---
name: semog-design
description: Use this skill to generate well-branded interfaces and assets for Semog, the largest condominium administrator in Brazil's Northeast (PE, PA, PB). Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping landing pages, decks, mobile-app screens, slides and marketing materials in the Semog brand voice.
user-invocable: true
---

Read the `README.md` file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.

## Quick orientation

- **Brand:** Semog. Tagline *"Preocupe-se apenas em morar."* Archetype: The Ruler. 35 years administering condominiums in PE, PA, PB.
- **Primary color:** `#1B2D70` (Blue World). Supports: `#BCBCC7` (Gray Mist), `#ADD5EB` (Sky).
- **Type:** Saira (display) + Inter (body). Inter ships as a licensed variable font in `fonts/`.
- **Signature element:** gradients — see `--grad-cover`, `--grad-deep`, `--grad-pillar` in `tokens/tokens.css`.
- **Monogram:** three vertical bars (III) → condomínios · métricas · organização.
- **Voice:** Brazilian Portuguese, warm but professional, never emoji, never hype.
- **Iconography:** Lucide outline icons (1.5 px stroke, square caps). No emoji, no unicode glyphs as icons.

## What's in this folder

| Path | Purpose |
|---|---|
| `README.md` | Brand context, content fundamentals, visual foundations, iconography. |
| `tokens/tokens.css` | Drop-in CSS variables — colors, gradients, type, spacing, motion. |
| `fonts/` | Inter variable font (licensed). |
| `assets/` | Logos, gradient backgrounds, photo mockups. |
| `kits/web/` | Marketing site components (Header, Hero, Pillars, Footer…) + `SKILL.md`. |
| `kits/app/` | Condômino mobile app components (Login, Dashboard, Boleto…) + `SKILL.md`. |
| `kits/admin/` | Admin Tahoe — `tahoe.css` + `shell.html` + `SKILL.md`. **Padrão único do backoffice.** |
| `kits/sindico/` | Síndico Tahoe — `tahoe.css` + `SKILL.md`. Variant para a webapp do síndico. |
| `tailwind/preset.js` | Tailwind preset opcional (tokens semânticos para apps Tailwind). |
| `preview/` | Design-system specimen cards. |

This package publishes as `@semog-tech/tahoe` on GitHub Packages. Always include `@semog-tech/tahoe/tokens` in new HTML/JSX output. Prefer copying the closest kit component over reinventing one.

## Para projetos admin

Se a tarefa for **construir interface de admin/backoffice Semog**, use a skill irmã [`semog-admin`](kits/admin/SKILL.md) — ela tem as regras duras do shell Tahoe (window 26px, sidebar 248px, traffic-lights, glass cards) e a lista de primitivos disponíveis. **Tahoe é o único padrão admin** — não combine com Material UI / Ant / shadcn.

Para a webapp do **síndico**, use [`semog-sindico`](kits/sindico/SKILL.md) — variant do Tahoe (max-width 1320, workspace switcher).

Importe nos seus apps:
```ts
import '@semog-tech/tahoe/tokens'
import '@semog-tech/tahoe/admin'      // ou '@semog-tech/tahoe/sindico'
```

Referência viva da dashboard completa (preview only): https://brand.semog.com.br/Admin%20Shell%20Tahoe.html · Esqueleto pra forkar: `node_modules/@semog-tech/tahoe/kits/admin/shell.html`