# Design System — HGTX Commander > Referência técnica de tokens e padrões — light + dark. > **Fonte da verdade (código):** `src/index.css` + `tailwind.config.ts`. > Tema aplicado via `next-themes` (`class` no ``, `storageKey: hgtx-commander-theme`). ## Cor de marca (azul HGTX) Azul institucional usado em botões primários, links, anéis de foco e destaques do Commander. | Papel | Light | Dark | |-------|-------|------| | **Primária** | `hsl(210 100% 33%)` · **#0054A8** | `hsl(210 90% 52%)` · **#1685F3** | | Hover | `hsl(210 100% 28%)` · #00478F | `hsl(210 95% 46%)` · #0675E5 | | Pressed | `hsl(210 100% 24%)` · #003D7A | `hsl(210 100% 40%)` · #0066CC | | Fundo sutil | `hsl(210 55% 96%)` · #EFF5FB | `hsl(210 50% 14%)` · #122033 | | Focus ring | `rgba(0, 85, 164, 0.28)` | `rgba(51, 136, 255, 0.35)` | Referência histórica de marca: ~`#0055A4` / `#004080` — no código o token `--primary` (light) resolve para **#0054A8**. **Tailwind / shadcn:** `bg-primary`, `text-primary`, `border-primary`, `ring-ring` (usa `--ring`, alinhado ao primário). --- ## Fonte Inter — Google Fonts Pesos: 400, 500, 600, 700 Import: `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap` Token: `--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif` --- ## Cores Valores em **HSL sem vírgula** (formato shadcn: `hsl(var(--token))`). Hex entre parênteses para referência visual. ### Primária e estados | Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso | |-----------|-------------------|------------------|-----------------|-----| | `--primary` | 210 100% 33% · #0054A8 | 210 90% 52% · #1685F3 | `bg-primary` `text-primary` | CTAs, enviar, links ativos | | `--primary-foreground` | 0 0% 100% · #FFFFFF | 0 0% 100% · #FFFFFF | `text-primary-foreground` | Texto sobre primário | | `--primary-hover` | 210 100% 28% · #00478F | 210 95% 46% · #0675E5 | `bg-primary-hover` | Hover botões primários | | `--primary-pressed` | 210 100% 24% · #003D7A | 210 100% 40% · #0066CC | `bg-primary-pressed` | Active / pressed | | `--primary-light` | 210 55% 96% · #EFF5FB | 210 50% 14% · #122033 | `bg-primary-light` | Fundo de destaque suave | | `--ring` | 210 100% 33% | 210 90% 52% | `ring-ring` | Focus visível (inputs) | | `--focus-ring` | rgba(0, 85, 164, 0.28) | rgba(51, 136, 255, 0.35) | sombra manual | Focus em componentes custom | ### Semânticas (feedback) | Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso | |-----------|-------------------|------------------|-----------------|-----| | `--success` | 134 61% 41% · #29A847 | 141 71% 48% · #23D160 | `bg-success` `text-success` | Online, confirmação | | `--success-foreground` | 0 0% 100% | 216 48% 8% | `text-success-foreground` | Texto sobre success | | `--destructive` | 0 84% 60% | 0 84% 60% | `bg-destructive` | Erro, excluir | | `--destructive-foreground` | 0 0% 100% | 0 0% 100% | `text-destructive-foreground` | Texto sobre destructive | | `--warning` | 38 92% 50% | 38 92% 50% | `bg-warning` `text-warning` | Alertas, badge “Pessoal” | | `--warning-foreground` | 209 11% 15% | 216 48% 8% | `text-warning-foreground` | Texto sobre warning | ### Superfícies (page, card, sidebar) | Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso | |-----------|-------------------|------------------|-----------------|-----| | `--background` | 0 0% 100% · #FFFFFF | 216 48% 8% · #0B121E | `bg-background` | Fundo principal / chat | | `--foreground` | 209 11% 15% · #22262A | 0 0% 100% · #FFFFFF | `text-foreground` | Texto principal | | `--card` | 0 0% 100% · #FFFFFF | 216 42% 11% · #101A28 | `bg-card` | Cards, modais, composer | | `--card-foreground` | 209 11% 15% | 0 0% 100% | `text-card-foreground` | Texto em cards | | `--popover` | 0 0% 100% | 216 42% 11% | `bg-popover` | Dropdowns, selects | | `--sidebar-background` | 210 17% 98% · #F8FAFB | 216 50% 9% · #0B1522 | `bg-sidebar` | Sidebar Commander / módulos | | `--sidebar-foreground` | 209 11% 15% | 0 0% 100% | `text-sidebar-foreground` | Texto na sidebar | | `--sidebar-border` | 220 13% 91% · #E5E7EB | 212 12% 21% · #2F363F | `border-sidebar-border` | Divisor da sidebar | | `--sidebar-accent` | 210 70% 94% · #E3EEFC | 210 45% 16% · #16283D | `bg-sidebar-accent` | Item de nav ativo / hover | | `--sidebar-accent-foreground` | 210 100% 33% | 210 85% 62% · #5BA3EB | `text-sidebar-accent-foreground` | Texto no item ativo | | `--muted` | 210 17% 96% · #F3F6F8 | 216 38% 13% · #15202E | `bg-muted` | Fundos secundários | | `--accent` | 210 70% 94% | 210 45% 16% | `bg-accent` | Hover suave, chips | | `--accent-foreground` | 210 100% 33% | 210 85% 62% | `text-accent-foreground` | Texto em accent | ### Tokens extras (chat e UI) | Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Uso | |-----------|-------------------|------------------|-----| | `--bubble-bot` | 209 36% 96% | 216 36% 14% | Bolha do assistente | | `--nav-active` | 210 70% 94% | 210 45% 16% | Nav ativo (alias visual do accent) | | `--input-bg` | 0 0% 100% | 216 40% 10% | Fundo de campos (referência) | | `--secondary` | 210 6% 60% | 216 38% 13% | Neutro secundário (evitar texto em badge dark) | | `--secondary-foreground` | 209 11% 15% | 0 0% 100% | Texto sobre secondary | ### Bordas e inputs (shadcn) No shadcn, `--input` é a **cor da borda** de Input / Select / Textarea, não o fundo do campo. | Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso | |-----------|-------------------|------------------|-----------------|-----| | `--border` | 220 13% 91% · #E5E7EB | 216 18% 26% · #36404E | `border-border` | Divisores, cards | | `--input` | 220 9% 83% · #D0D2D8 | 216 16% 30% · #404A59 | `border-input` | Borda de inputs | | `--border-subtle` | 220 13% 95% | 216 22% 20% | custom | Bordas muito suaves | | `--btn-secondary-border` | 220 9% 83% | 216 16% 30% | custom | Outline secundário | ### Texto secundário | Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso | |-----------|-------------------|------------------|-----------------|-----| | `--muted-foreground` | 209 7% 46% · #6D767E | 212 9% 58% · #8B949E | `text-muted-foreground` | Subtítulos, hints | | `--placeholder` | 220 9% 66% | 212 10% 31% | `text-placeholder` / `placeholder:` | Placeholders | ### Gradientes e glow (efeitos) | Token | Light | Dark | |-------|-------|------| | `--gradient-cyber` | `135deg`, hsl(210 100% 33%) → hsl(210 90% 42%) | hsl(210 90% 52%) → hsl(210 100% 40%) | | `--gradient-subtle` | #FFF → hsl(210 17% 98%) | hsl(216 42% 11%) → hsl(216 48% 8%) | | `--glow-cyan` / `--glow-blue` | sombra azul suave 12–15% opac. | sombra azul 28–35% opac. | Classes utilitárias: `.gradient-text`, `.cyber-glow`, `.glass-effect` em `src/index.css`. --- ## Tipografia > Mesma escala em light e dark. | Nível | Tamanho | Peso | Line Height | Classe Semântica | |-------|---------|------|-------------|------------------| | Display / Commander | 32px (`--fs-display`) | 700 | 1.25 (`--lh-tight`) | text-display | | Heading 1 — Modal | 24px (`--fs-h1`) | 600 | 1.25 | text-h1 | | Heading 2 — Seção | 18px (`--fs-h2`) | 600 | 1.5 (`--lh-body`) | text-h2 | | Heading 3 | 15px (`--fs-h3`) | — | — | text-h3 | | Body | 14px (`--fs-body`) | 400 | 1.5 | text-body | | Small / Timestamp | 12px (`--fs-small`) | 400 | — | text-small | | Caption | 11px (`--fs-caption`) | 500 | — | text-caption | | Nav link | 13px | 500 (`--fw-medium`) | — | text-nav-link | | Nav brand | 15px | 700 (`--fw-bold`) | — | text-nav-brand | | Brand lockup (tagline) | 10px | 600 | — | text-brand-tag | | Brand lockup (nome) | 16px | 700 | — | text-brand-name | | Hero título (catálogo) | clamp(28px, 4vw, 42px) | 700 | 1.25 | text-hero | | Section title | 28px | 700 | — | text-section-title | Tokens de peso: `--fw-regular` 400, `--fw-medium` 500, `--fw-semibold` 600, `--fw-bold` 700. Tokens de line-height: `--lh-tight` 1.25, `--lh-body` 1.5, `--lh-relaxed` 1.65. --- ## Espaçamento Base unit: **4px** | Token | Valor | Classe Semântica | |-------|-------|------------------| | --space-1 | 4px | p-1 / m-1 / gap-1 | | --space-2 | 8px | p-2 / m-2 / gap-2 | | --space-3 | 12px | p-3 / m-3 / gap-3 | | --space-4 | 16px | p-4 / m-4 / gap-4 | | --space-5 | 20px | p-5 / m-5 / gap-5 | | --space-6 | 24px | p-6 / m-6 / gap-6 | | --space-7 | 32px | p-7 / m-7 / gap-7 | | --space-8 | 48px | p-8 / m-8 / gap-8 | | --space-9 | 64px | p-9 / m-9 / gap-9 | | --section-y | 64px | py-section | | --section-x | 40px | px-section | | --nav-h | 56px | h-nav | | --container | 1200px | max-w-container | --- ## Border Radius | Token | Valor | Classe Semântica | Uso | |-------|-------|------------------|-----| | --radius-sm | 6px | rounded-sm | Chat items, detalhes | | --radius-md | 8px | rounded-md | Botões, inputs, nav items, badges | | --radius-lg | 12px | rounded-lg | Cards, bolhas, demo wrap | | --radius-xl | 16px | rounded-xl | Modal Personalidade | | --radius-pill | 999px | rounded-pill | Chat bar (composer) | | 50% | — | rounded-full | Botão send circular | --- ## Sombras | Token CSS | Light | Dark | Classe Tailwind | Uso | |-----------|-------|------|-----------------|-----| | `--shadow-card` | `0 4px 12px rgba(0,0,0,0.06)` | `0 4px 16px rgba(0,0,0,0.35)` | `shadow-card` | Cards elevados | | `--shadow-modal` | `0 16px 40px rgba(0,0,0,0.12)` | `0 24px 48px rgba(0,0,0,0.55)` | `shadow-modal` | Modais, dialogs | Glow Online (badge): `box-shadow: 0 0 8px hsl(var(--success) / 0.5)`. --- ## Componentes > Use referências a tokens — valores resolvem para light/dark conforme o tema ativo. ### Botão Primary (HGTX — Nova Sessão / Salvar Perfil) ``` bg-primary hover:bg-primary-hover active:bg-primary-pressed text-white rounded-md px-[18px] py-[10px] text-[13px] font-semibold inline-flex items-center gap-2 border-none cursor-pointer transition-[background] duration-200 disabled:opacity-45 disabled:cursor-not-allowed ``` ### Botão Primary (catálogo / hero) ``` bg-primary hover:bg-primary-hover active:bg-primary-pressed active:translate-y-px text-white rounded-md px-6 py-3 text-sm font-semibold border-none cursor-pointer transition-all duration-200 ``` ### Botão Outline (Nova Pasta) ``` bg-transparent text-primary border border-btn-secondary rounded-md px-[18px] py-[10px] text-[13px] font-medium inline-flex items-center gap-2 cursor-pointer hover:border-secondary transition-[border-color] duration-200 ``` ### Botão Secondary (catálogo) ``` bg-transparent text-primary border border-btn-secondary rounded-md px-6 py-3 text-sm font-medium hover:border-secondary hover:bg-black/[0.03] (light) / hover:bg-white/[0.04] (dark) transition-all duration-200 cursor-pointer ``` ### Botão Ghost (Cancelar) ``` bg-transparent text-secondary border-none rounded-md px-[14px] py-2 text-[13px] cursor-pointer hover:text-primary hover:bg-black/[0.04] (light) / hover:bg-white/[0.05] (dark) transition-all duration-200 ``` ### Botão Send (circular) ``` w-10 h-10 rounded-full bg-primary text-white border-none flex items-center justify-center text-base cursor-pointer ``` ### Nav Sticky (catálogo DS) ``` sticky top-0 z-[100] h-nav flex items-center justify-between px-section bg-nav backdrop-blur-[12px] border-b border-divider ``` ### Nav CTA ``` bg-primary hover:bg-primary-hover text-white rounded-md px-[18px] py-2 text-[13px] font-semibold border-none cursor-pointer ``` ### Nav Item (sidebar) ``` flex items-center gap-3 px-3 py-2 rounded-md text-[13px] text-secondary ``` ### Nav Item Ativo ``` bg-nav-active text-primary ``` ### Nav Chat Item (lista conversas) ``` flex justify-between items-center px-3 py-2 text-xs text-secondary rounded-sm /* timestamp */ text-[11px] text-placeholder ``` ### Input / Select / Textarea ``` font-sans text-sm px-[14px] py-[10px] rounded-md border border-divider bg-input text-primary outline-none w-full placeholder:text-placeholder transition-[border-color,box-shadow] duration-200 focus:border-primary focus:shadow-[0_0_0_3px_var(--color-focus-ring)] disabled:opacity-50 disabled:cursor-not-allowed ``` ### Textarea (modal) ``` [classes input] min-h-[120px] resize-y ``` ### Input Search (com ícone) ``` relative /* wrap */ [input] pl-9 /* ícone */ absolute left-3 top-1/2 -translate-y-1/2 text-placeholder text-sm ``` ### Chat Composer Bar ``` flex items-center gap-3 py-2 pr-2 pl-5 border border-divider rounded-pill bg-input max-w-[560px] /* input interno */ flex-1 border-none bg-transparent text-sm text-primary outline-none placeholder:text-placeholder /* + btn-send */ ``` ### Badge Online ``` inline-flex items-center gap-2 text-small font-medium text-secondary /* dot */ w-2 h-2 rounded-full bg-success shadow-[0_0_8px_rgba(35,209,96,0.5)] ``` ### Badge Self-Hosted ``` inline-flex items-center gap-2 text-caption text-placeholder px-3 py-2 border border-divider rounded-md ``` ### Card Modal (Personalidade) ``` max-w-[480px] p-6 bg-surface-card border border-divider rounded-xl shadow-modal ``` ### Card Modal Header ``` flex justify-between items-start mb-4 /* título */ text-h2 font-semibold ``` ### Card Modal Close ``` w-8 h-8 border-none rounded-md bg-transparent text-secondary text-lg cursor-pointer hover:text-primary hover:bg-black/[0.05] (light) / hover:bg-white/[0.06] (dark) ``` ### Card Modal Actions ``` flex justify-end gap-3 mt-5 /* Cancelar: btn-hgtx-ghost | Salvar: btn-hgtx-primary */ ``` ### Bolha Bot (boas-vindas) ``` max-w-[420px] px-5 py-4 bg-bubble-bot rounded-lg text-sm text-secondary leading-relaxed ``` ### Layout Demo (3 colunas) ``` grid grid-cols-[200px_280px_1fr] border border-divider rounded-lg overflow-hidden min-h-[320px] /* sidebars */ bg-sidebar p-4 border-r border-divider /* main */ bg-page p-5 flex flex-col items-center justify-center ``` ### Brand Lockup (sidebar) ``` text-[10px] font-bold uppercase tracking-[0.12em] text-secondary mb-4 /* nome */ block text-sm text-primary tracking-[0.06em] ``` ### Folder Label (sidebar) ``` text-xs font-medium text-secondary py-2 mt-3 ``` --- ## Tema — como aplicar 1. **Tokens light** em `:root` e **tokens dark** em `.dark` — ver `src/index.css`. 2. **App:** `ThemeProvider` (`next-themes`) com `attribute="class"`, `storageKey="hgtx-commander-theme"`, temas `light` | `dark`. 3. **Tailwind:** cores semânticas em `tailwind.config.ts` → `hsl(var(--primary))`, etc. Tokens **compartilhados** (não mudam com o tema): `--fs-*`, `--space-*`, `--radius-*`, `--fw-*`, `--lh-*`, `--section-*`, `--nav-h`, `--container`. Texto sobre botões primários: sempre `--primary-foreground` (`#FFFFFF`). ### Mapeamento rápido (legado → atual) | Doc / HTML antigo | Token atual | |-------------------|-------------| | `#0061ff` / `#1a73e8` | `--primary` → #0054A8 (light) / #1685F3 (dark) | | `bg-page` | `bg-background` | | `bg-sidebar` | `bg-sidebar` (`--sidebar-background`) | | `text-secondary` (corpo) | `text-muted-foreground` | | `border-divider` | `border-border` | --- *Atualizado para refletir `src/index.css` (HGTX Commander redesign).* *Para uso como referência no Cursor e agentes de código.*