@@ -1,389 +1,178 @@
# Design System Inspired by OpenMonetis
# Design System do OpenMonetis
## 1. Visual Theme & Atmospher e
Este documento descreve a identidade visual implementada no OpenMonetis. Ele dev e
ser usado como referência ao criar telas, revisar componentes e manter a
experiência consistente entre dashboard, relatórios, formulários e landing page.
OpenMonetis embodies a warm, approachable financial management aesthetic grounded in trust and transparency. The design system combines a rich warm-orange accent palette with a sophisticated warm-neutral foundation, creating an interface that feels both professional and inviting. The typography and spacing work together to emphasize clarity and hierarchy, supporting the open-source ethos of personal financial control. The visual atmosphere prioritizes legibility and calm navigation, with generous whitespace and deliberate color restraint—the bold orange is reserved for critical calls-to-action and highlights, while the warm grays and blacks anchor the interface with stability and focus.
## 1. Direção visual
**Key Characteristics **
- Warm, approachable color story with a dominant orange accent (`#FF7733` )
- Generous whitespace and breathing room between sections
- High contrast between backgrounds and text for accessibility
- Clear typographic hierarchy using Inter for all text and UI
- Minimal elevation and shadow treatment—mostly flat design
- Subtle border accents in warm grays to define surfaces
- Open-source transparency reflected in straightforward, honest design language
O OpenMonetis busca tornar a gestão financeira clara e acolhedora. A interface
usa superfícies quentes, poucos elementos decorativos e uma cor laranja de
destaque para orientar o olhar sem transformar toda ação em urgência.
## 2. Color Palette & Roles
Princípios:
### Primary
- **Primary Accent** (`#FF7733` ): Used for primary call-to-action buttons, highlights, and key interactive elements throughout the interface; draws user attention to the most important actions
- **Primary Dark** (`#443732` ): Warm-brown anchor color used extensively for text, headings, and interactive elements; provides the primary text color across the system
- priorizar legibilidade e hierarquia em telas com muitos dados;
- usar laranja para ações principais, seleção e foco;
- manter superfícies leves no tema claro e contraste confortável no tema escuro;
- aplicar cores semânticas para comunicar estado, não como decoração;
- preservar espaço suficiente entre blocos para evitar ruído visual;
- favorecer componentes responsivos e navegação acessível por teclado.
### Interactiv e
- **Interactive Neutral** (`#0F0D0C` ): Near-black used for primary text and strong emphasis elements; highest contrast state
- **Interactive Overlay** (`#0006` ): Transparent black overlay at 24% opacity; used for hover states, modals, and depth layering
## 2. Fonte de verdad e
### Neutral Scale
- **Neutral 900** (`#2A2827` ): Very dark warm gray; used for secondary text and disabled states
- **Neutral 800** (`#322C2A` ): Dark warm gray; alternative text color for lower-emphasis content
- **Neutral 700** (`#676260` ): Medium warm gray; used for tertiary text, captions, and metadata
- **Neutral 50** (`#FCF7F6` ): Almost-white warm cream; primary background color for light surfaces
- **Neutral 100** (`#F8F6F4` ): Very light warm gray; secondary background and subtle surface distinction
- **Neutral 200** (`#F5F2EF` ): Light warm gray; tertiary background and card interiors
- **Neutral 300** (`#F0EEEC` ): Pale warm gray; border and divider lines
Os tokens globais estão definidos em
[`src/app/globals.css` ](./src/app/globals.css ). Componentes reutilizáveis ficam
em [`src/shared/components/ui/` ](./src/shared/components/ui/ ) e seguem o padrão
do shadcn/ui com Radix UI e Tailwind CSS 4.
### Surface & Borders
- **Surface** (`#FFFFFF` ): Pure white; primary card and container background; high-contrast surface
- **Border Light** (`#F0EEEC` ): Pale warm gray used for subtle borders between elements
- **Border Dark** (`#2A2827` ): Dark warm gray; stronger borders for defined card boundaries
Ao implementar uma tela:
### Semantic / Status
- **Success** (`#0E9D6E` ): Green us for positive status indicators, confirmation states, and success messages
- **Warning** (`#F7A439` ): Amber used for cautionary states, warnings, and attention-drawing alerts
- **Error** (`#F53F2D` ): Red-orange used for error states, destructive actions, and validation failures
- **Error Alt** (`#D40C1A` ): Deep red alternative for critical errors and danger states
1. use classes semânticas como `bg-background` , `bg-card` , `text-foreground` ,
`text-mut ed- foreground` , `border-border` e `ring-ring` ;
2. reutilize os componentes em `src/shared/components/ui/` ;
3. evite cores hexadecimais e valores arbitrários quando já existir um token;
4. valide os dois temas antes de concluir a alteração.
## 3. Typography Rul es
## 3. Cor es
### Font Family
- serif)
Fallback: `Inter, system-ui, -apple-system, sans-serif`
A paleta é definida em OKLCH para manter uma percepção de contraste mais
consistente. Não copie os valores para componentes: use os toke ns semânticos.
**Monospace: ** ui-monospace
Fallback: `ui-monospace, 'Courier New', monospace`
| Token | Papel |
|---|---|
| `background` | Fundo geral da aplicação |
| `foreground` | Texto principal |
| `card` / `card-foreground` | Cards e conteúdo em destaque |
| `popover` / `popover-foreground` | Menus, popovers e overlays |
| `primary` / `primary-foreground` | Ações principais, foco e seleção |
| `secondary` / `secondary-foreground` | Ações secundárias e superfícies discretas |
| `muted` / `muted-foreground` | Apoio visual, descrições e metadados |
| `accent` / `accent-foreground` | Hover e seleção leve |
| `success` | Confirmações, recebimentos e estados positivos |
| `warning` | Atenção, vencimentos e estados intermediários |
| `info` | Informações auxiliares |
| `destructive` | Erros e ações destrutivas |
| `border` , `input` , `ring` | Bordas, campos e foco |
### Hierarchy
### Gráficos
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display / H1 | Inter | 60px | 600 | 60px | 0px | Page titles and hero headlines; maximum visual impact |
| Heading H2 | Inter | 36px | 600 | 40px | 0px | Section headers and major subsections |
| Heading H3 | Inter | 16px | 600 | 20px | 0px | Card titles and smaller section headers |
| Body | Inter | 20px | 400 | 28px | 0px | Descriptive text, paragraphs, and long-form content |
| Body Secondary | Inter | 16px | 400 | 24px | 0px | Standard body text, list items, and descriptions |
| Emphasis / Span | Inter | 14px | 500 | 20px | 0px | Emphasized text, labels, and badge content |
| Button | Inter | 14px | 500 | 20px | 0px | All button text; medium weight for clarity |
| Caption | Inter | 14px | 400 | 20px | 0px | Metadata, timestamps, and small supporting text |
| Code | ui-monospace | 14px | 400 | 20px | 0px | Code blocks and technical content |
Gráficos usam `chart-1` a `chart-10` . Visualizações que precisam de uma escala
sequencial quente podem usar `data-1` a `data-6` . A cor nunca deve ser o único
meio de distinguir uma série: inclua legenda, rótulo ou tooltip.
### Principles
- **Contrast & Clarity:** Text color `#0F0D0C` on light backgrounds; `#FFFFFF` on dark backgrounds
- **Weight Hierarchy:** Use 600 weight for all headings; 500 for interactive/emphasized text; 400 for body
- **Scale Progression:** Sizes increase in meaningful increments (14 → 16 → 20 → 36 → 60); maintain consistent rhythm
- **Line Height:** Body text uses 1.4×
- **Readability First:** Avoid line lengths over 80 characters for long-form content; increase line height on smaller screens
### Tema escuro
## 4. Component Stylings
O tema escuro redefine a mesma camada semântica dentro de `.dark` . Não crie uma
segunda árvore de componentes para suportá-lo. Prefira tokens e, somente quando
necessário, variantes Tailwind `dark:` .
### Buttons
## 4. Tipografia
#### Primary Button
- **Background:** `#FF7733`
- **Text Color:** `#FFFFFF`
- **Font Size:** `14px`
- **Font Weight:** `500`
- **Font Family:** `Inter`
- **Padding:** `8px 16px`
- **Border Radius:** `9.2px`
- **Border:** `0px solid transparent`
- **Height:** `40px`
- **Box Shadow:** `none`
- **Hover State:** Darken background to `#E55F1F` ; add subtle shadow `0px 2px 8px rgba(0, 0, 0, 0.12)`
- **Active State:** Darken further to `#CC5118` ; increase shadow
- **Disabled State:** Background `#E8E3E0` ; text color `#999890` ; cursor not-allowed
A família principal é **Bricolage Grotesque ** , carregada com `next/font` em
[`public/fonts/font_index.ts` ](./public/fonts/font_index.ts ). Os pesos
disponíveis são `500` , `600` e `700` , com fallback para Arial e fontes sans-serif
do sistema.
#### Secondary Button
- **Background:** `#FFFFFF`
- **Text Color:** `#2A2827`
- **Font Size:** `14px`
- **Font Weight:** `500`
- **Font Family:** `Inter`
- **Padding:** `8px 24px`
- **Border Radius:** `9.2px`
- **Border:** `1px solid #F0EEEC`
- **Height:** `40px`
- **Box Shadow:** `0px 1px 3px rgba(0, 0, 0, 0.06)`
- **Hover State:** Background `#F8F6F4` ; border color `#E8E3E0`
- **Active State:** Background `#F0EEEC` ; border color `#D5CCCA`
- **Disabled State:** Background `#FAFAF8` ; text color `#BFBAB7` ; border color `#F0EEEC`
Diretrizes:
#### Ghost Button
- **Background:** `transparent `
- **Text Color:** `#443732 `
- **Font Size:** `14px `
- **Font Weight:** `500`
- **Font Family:** `Inter`
- **Padding:** `6px 8px`
- **Border Radius:** `9.2px`
- **Border:** `0px solid transparent`
- **Height:** `32px`
- **Box Shadow:** `none`
- **Hover State:** Background `rgba(68, 55, 50, 0.05)`
- **Active State:** Background `rgba(68, 55, 50, 0.1)`
- **Disabled State:** Text color `#BFBAB7` ; cursor not-allowed
- corpo e controles: `text-sm` ou `text-base` ;
- descrições e metadados: `text-sm text-muted-foreground ` ;
- títulos de card: `text-base font-medium ` ;
- títulos de modal: `text-lg font-semibold ` ;
- títulos de página: hierarquia responsiva conforme a densidade da tela;
- números financeiros: destaque por peso e alinhamento, sem depender apenas da
cor.
#### Icon Button
- **Background:** `transparent`
- **Icon Color:** `#443732`
- **Size:** `32px` × `32px`
- **Border Radius:** `9.2px`
- **Border:** `0px solid transparent`
- **Padding:** `0px`
- **Box Shadow:** `none`
- **Hover State:** Background `rgba(68, 55, 50, 0.08)`
- **Active State:** Background `rgba(68, 55, 50, 0.12)`
## 5. Espaçamento, raio e elevação
### Cards & Containers
A escala base é de `0.25rem` (`4px` ). Prefira a escala padrão do Tailwind para
padding, gap e margens. O raio base é `0.7rem` , exposto pelas classes
`rounded-sm` , `rounded-md` , `rounded-lg` e `rounded-xl` .
#### Standard Card
- **Background:** `#FFFFFF`
- **Border:** `1px solid #F0EEEC`
- **Border Radius:** `11.2px`
- **Padding:** `24px`
- **Box Shadow:** `none`
- **Text Color:** `#2A2827`
- **Hover State:** Border color `#E8E3E0` ; box-shadow `0px 4px 12px rgba(0, 0, 0, 0.08)`
Sombras também são tokens. Cards comuns usam `shadow-xs` ; menus, tooltips e
modais podem subir de nível conforme a necessidade. Evite adicionar sombra forte
a cada bloco: bordas e diferença de superfície devem resolver a maior parte da
hierarquia.
#### Card with Top Border
- **Background:** `#FFFFFF`
- **Border:** `1px solid #F0EEEC`
- **Border Radius:** `15.2px 15.2px 0px 0px` (top corners only)
- **Padding:** `24px`
- **Box Shadow:** `none`
- **Top Border Color:** `#FF7733` (3px height implied)
## 6. Componentes
#### Surface Container (Header/Nav)
- **Background:** `#FF7733`
- **Height:** `64px`
- **Padding:** `0px 24px`
- **Box Shadow:** `none`
- **Text Color:** `#FFFFFF`
- **Border:** `0px solid transparent`
### Botões
#### Light Surface
- **Background:** `#F8F6F4`
- **Border:** `0px solid transparent`
- **Border Radius:** `11.2px`
- **Padding:** `16px`
- **Box Shadow:** `none`
Use [`Button` ](./src/shared/components/ui/button.tsx ) e suas variantes:
### Inputs & Forms
| Variante | Uso |
|---|---|
| `default` | Ação principal da tela ou do fluxo |
| `secondary` | Ação complementar |
| `outline` | Ação neutra com contorno |
| `ghost` | Ação discreta em barras e grupos |
| `link` | Ação textual |
| `destructive` | Exclusão ou operação irreversível |
| `navbar` | Ferramentas da navegação superior |
#### Text Input
- **Background:** `#FFFFFF`
- **Border:** `1px solid #F0EEEC`
- **Border Radius:** `9.2px`
- **Padding:** `12px 16px`
- **Font Size:** `16px`
- **Text Color:** `#2A2827`
- **Line Height:** `24px`
- **Placeholder Color:** `#999890`
- **Focus State:** Border color `#FF7733` ; box-shadow `0px 0px 0px 3px rgba(255, 119, 51, 0.1)`
- **Error State:** Border color `#F53F2D` ; background `#FEF5F3`
- **Disabled State:** Background `#F8F6F4` ; text color `#BFBAB7` ; border color `#F0EEEC`
Não coloque duas ações `default` competindo na mesma região. Para ícones sem
rótulo visível, inclua `aria-label` ou texto apenas para leitores de tela.
#### Select / Dropdown
- **Background:** `#FFFFFF`
- **Border:** `1px solid #F0EEEC`
- **Border Radius:** `9.2px`
- **Padding:** `12px 16px`
- **Font Size:** `16px`
- **Text Color:** `#2A2827`
- **Focus State:** Border color `#FF7733` ; outline `0px`
- **Hover State:** Background `#FAFAF8`
### Cards
#### Checkbox & Radio
- **Size:** `20px` × `20px`
- **Border Radius:** `4px` (checkbox), `50%` (radio)
- **Border:** `2px solid #F0EEEC`
- **Background:** `#FFFFFF`
- **Checked Background:** `#FF7733`
- **Checked Border:** `2px solid #FF7733`
- **Checked Icon Color:** `#FFFFFF`
- **Focus:** Border `2px solid #FF7733` ; box-shadow `0px 0px 0px 3px rgba(255, 119, 51, 0.1)`
Use [`Card` ](./src/shared/components/ui/card.tsx ) para agrupar informações
relacionadas. O componente já define fundo, borda, sombra leve, raio e destaque
de hover. Não transforme todo conteúdo em card: listas densas e tabelas podem
usar uma única superfície.
### Navigat ion
### Formulár ios
#### Primary Navigation
- **Background:** `#FF7733`
- **Height:** `64px`
- **Padding:** `0px 48px`
- **Display:** flex; align-items: center; gap `32px`
- **Link Color:** `#FFFFFF`
- **Link Font Size:** `16px`
- **Link Font Weight:** `400`
- **Link Hover:** Opacity `0.8`
- **Link Active:** Text decoration underline; opacity `1.0`
Campos devem usar os componentes compartilhados, como `Input` , `Select` ,
`Checkbox` , `Switch` e `DatePicker` . Eles já aplicam foco com `ring` , estados
desabilitados e integração visual com os temas. Sempre associe controles a
`Label` e apresente erros próximos ao campo correspondente.
#### Secondary Navigation / Tab s
- **Background:** `transparent`
- **Border Bottom:** `2px solid #F0EEEC`
- **Tab Padding:** `16px 24px`
- **Tab Color:** `#676260`
- **Tab Font Size:** `16px`
- **Tab Hover:** Color `#443732`
- **Tab Active:** Color `#FF7733` ; border-bottom color `#FF7733`
### Diálogo s
#### Breadcrumb Navigation
- **Font Size:** `14px`
- **Color:** `#676260`
- **Separator:** `/` with `0px 8px` margin
- **Link Color:** `#443732`
- **Link Hover:** Color `#FF7733`
- **Current (Active):** Color `#2A2827` ; font-weight `500`
Use [`Dialog` ](./src/shared/components/ui/dialog.tsx ) para tarefas focadas. Em
mobile, o conteúdo respeita a largura disponível; em telas maiores, o modal pode
ganhar mais espaço. Botões do rodapé devem preservar a ordem e a hierarquia da
ação principal.
### Badges & Status Indicators
### Feedback
#### Badge –
- **Background:** `#F8F6F4`
- **Text Color:** `#443732`
- **Padding:** `4px 12px`
- **Border Radius:** `20px`
- **Font Size:** `12px`
- **Font Weight:** `500`
- **Border:** `0px solid transparent`
Use toast para retorno breve, `Alert` para contexto persistente e componentes em
[`src/shared/components/feedback/` ](./src/shared/components/feedback/ ) para
estados vazios, status e confirmações. Textos visíveis ao usuário devem estar em
português claro.
#### Badge –
- **Background:** `#E8F5F0`
- **Text Color:** `#0E9D6E`
- **Padding:** `4px 12px`
- **Border Radius:** `20px`
- **Font Size:** `12px`
- **Font Weight:** `500`
## 7. Layout e navegação
#### Badge –
- **Background:** `#FEF5E8`
- **Text Color:** `#F7A439`
- **Padding:** `4px 12px`
- **Border Radius:** `20px`
- **Font Size:** `12px`
- **Font Weight:** `500`
As páginas protegidas usam uma navbar fixa e um contêiner central com largura
máxima `max-w-8xl` , padding lateral responsivo e espaçamento vertical enxuto. A
navegação principal fica em
[`src/shared/components/navigation/navbar/` ](./src/shared/components/navigation/navbar/ ).
#### Badge –
- **Background:** `#FEF5F3`
- **Text Color:** `#F53F2D`
- **Padding:** `4px 12px`
- **Border Radius:** `20px`
- **Font Size:** `12px`
- **Font Weight:** `500`
Padrões:
## 5. Layout Principles
- telas do App Router devem continuar finas;
- conteúdo principal começa abaixo da navbar fixa (`pt-16` );
- use uma coluna em telas pequenas e expanda grids progressivamente;
- tabelas e gráficos devem preservar leitura em viewport estreita;
- ações essenciais precisam continuar alcançáveis por toque e teclado.
### Spacing System
- **Base Unit:** `4px`
- **Scale:** `4px` , `8px` , `12px` , `16px` , `24px` , `32px` , `48px` , `56px` , `64px` , `80px` , `96px` , `128px`
## 8. Acessibilidade
**Usage Contexts: **
- **4– nts ( icon-text pairs, inline elements)
- **12–
- **24–
- **48–
- **80–
- mantenha foco visível com os tokens `ring` ;
- use HTML semântico a nte s de ad ici onar ARIA;
- não comunique estado apenas por cor;
- associe labels a inputs;
- forneça nome acessível para botões de ícone;
- confira contraste e navegação por teclado nos temas claro e escuro;
- mantenha áreas de toque confortáveis em mobile.
### Grid & Container
- **Max Width:** `1440px` for full-width containers
- **Content Width:** `1152px` for typical page layouts
- **Column Strategy:** 12-column grid system; gutter `24px`
- **Container Padding:** `48px` on desktop (left + right)
- **Section Pattern:** Full-width containers with internal max-width constraint
## 9. Checklist de revisão visual
### Whitespace Philosophy
`#F8F6F4` , `#F5F2EF` ) create natural visual separation without hard borders. Minimum margin between major sections is `64px` vertically; minimum padding inside containers is `16px` .
### Border Radius Scale
- **Sharp Corners:** `0px` (utility container tops, category selectors)
- **Subtle Radius:** `9.2px` (buttons, small inputs, icon buttons)
- **Standard Radius:** `11.2px` (cards, standard conta iners, modals)
- **Rounded Top:** `15.2px 15.2px 0px 0px` (card headers, sheet-style containers)
- **Pill Shape:** `24px` (badges, full-rounded tags, avatar images)
- **Circle:** `50%` (avatar images, radial elements)
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (None) | No shadow, `border: 1px solid #F0EEEC` | Default cards, inputs, containers; baseline surfaces |
| Subtle (sm) | `0px 1px 3px rgba(0, 0, 0, 0.06)` | Secondary buttons, hover states on light surfaces |
| Medium (md) | `0px 4px 12px rgba(0, 0, 0, 0.08)` | Elevated cards on hover, floating actions |
| Deep (lg) | `0px 10px 24px rgba(0, 0, 0, 0.12)` | Modals, dropdowns, popover menus |
**Shadow Philosophy: **
The design system uses restrained shadow treatment aligned with a flat-modern aesthetic. Shadows emerge subtly on interaction (hover, focus) rather than as default styling. The primary depth cue is border color (`#F0EEEC` ), which maintains visual hierarchy without excessive z-depth. When shadows are used, they employ warm-tinted blacks (`rgba(0, 0, 0, 0.06– ) to harmonize with the warm neutral palette.
## 7. Do's and Don'ts
### Do
- Use the primary orange (`#FF7733` ) exclusively for the most important call-to-action buttons
- Apply generous padding (`24px– ) around sections and inside cards for breathing room
- Stack elements vertically with `24– gaps for clear visual rhythm
- Use warm grays (`#443732` , `#2A2827` ) for all body text to maintain the warm aesthetic
- Apply `9.2px` border radius consistently to all interactive elements (buttons, inputs)
- Keep line heights at `1.4× or greater for comfortable reading on body text
- Use semantic colors (`#0E9D6E` success, `#F7A439` warning, `#F53F2D` error) intentionally
- Test contrast ratios; maintain WCAG AA minimum (4.5:1 for body text)
- Use the `Inter` typeface exclusively for consistency
- Implement focus states with a `3px` colored outline or border
### Don't
- Don't use orange anywhere except primary CTAs and critical highlights
- Don't reduce padding below `12px` inside cards or `8px` inside compact buttons
- Don't use dark backgrounds (`#0F0D0C` ) for body text on light surfaces; stick to `#2A2827` or `#443732`
- Don't apply shadows as default styling; reserve them for elevated states (hover, focus, modal)
- Don't mix border radius values on the same component type; stick to defined scale
- Don't increase line height above `1.6× for headings; tighten for impact
- Don't use the error color (`#F53F2D` ) for general emphasis; reserve for genuine errors
- Don't create new colors outside the palette; use opacity if gradation is needed
- Don't apply multiple shadows to a single element; layer a maximum of two shadow values
- Don't forget to include focus/keyboard navigation states on all interactive elements
## 8. Responsive Behavior
### Breakpoints
| Breakpoint | Width | Key Changes |
|-----------|-------|-------------|
| Mobile | `375px– | Single column; container padding `16px` ; font sizes reduce 1–
| Tablet | `600px– | Two-column grid; container padding `32px` ; button height `36px` ; heading sizes reduce slightly |
| Desktop | `1024px+` | Full 12-column grid; container padding `48px` ; full-scale typography; max-width `1440px` |
### Touch Targets
- **Minimum Interactive Size:** `44px` × `44px` for mobile; `40px` × `40px` for desktop
- **Button Padding:** `12px` vertical, `16px` horizontal (minimum)
- **Link Padding:** `6px` vertical, `8px` horizontal minimum
- **Icon Button:** `32px` × `32px` minimum (32px on mobile preferred)
- **Spacing Between Targets:** `8px` minimum to avoid accidental activation
### Collapsing Strategy
- **Navigation:** Horizontal nav on desktop collapses to hamburger menu on tablet; menu items stack vertically with `12px` gap
- **Grid:** 12-column layout on desktop → 6-column on tablet → 2-column (stacked) on mobile
- **Cards:** Three-column card layouts collapse to single column on mobile; padding reduces from `24px` to `16px`
- **Typography:** Display (60px) → 36px on tablet → 28px on mobile; body (20px) → 18px on tablet → 16px on mobile
- **Spacing:** All spacing scale values reduce by 25– `24px` gap → `16px` on tablet, `12px` on mobile)
- **Buttons:** Full-width on mobile (padding `0px` ); inline (auto-width) on desktop
- **Inputs:** Full-width on mobile; constrained width on desktop
## 9. Agent Prompt Guide
### Quick Color Reference
- **Primary CTA:** Warm Orange (`#FF7733` ) — Buttons, highlights, key interactions
- **Primary Text:** Warm Brown (`#443732` ) — Headings, strong emphasis
- **Secondary Text:** Dark Neutral (`#2A2827` ) — Body text, card content
- **Background:** White (`#FFFFFF` ) — Cards, primary surfaces
- **Background Alt:** Cream (`#FCF7F6` ) — Alternative surfaces, light containers
- **Border:** Pale Gray (`#F0EEEC` ) — Card borders, divider lines
- **Success:** Green (`#0E9D6E` ) — Confirmation, positive states
- **Warning:** Amber (`#F7A439` ) — Cautions, attention states
- **Error:** Red-Orange (`#F53F2D` ) — Errors, destructive actions
- **Disabled:** Light Gray (`#E8E3E0` ) — Inactive elements, inaccessible states
### Iteration Guide
1. **Always use `#FF7733` for primary buttons ** and all main call-to-action elements; secondary buttons use `#FFFFFF` with `#F0EEEC` border
2. **Typography is always `Inter` ** with weights 400 (body), 500 (emphasis), and 600 (headings); size hierarchy: 14 → 16 → 20 → 36 → 60px
3. **Spacing base is `4px` ** ; use multiples from the scale (8, 12, 16, 24, 32, 48, 64, 80, 96, 128px); never arbitrary values
4. **Border radius: ** Apply `9.2px` to all buttons and inputs, `11.2px` to cards, `15.2px 15.2px 0px 0px` to top-bordered containers
5. **Cards default to `#FFFFFF` background with `1px solid #F0EEEC` border ** ; add shadow only on hover (0px 4px 12px rgba(0, 0, 0, 0.08))
6. **Form inputs: ** Padding `12px 16px` , border `1px solid #F0EEEC` , focus state `border: 1px solid #FF7733` + `box-shadow: 0px 0px 0px 3px rgba(255, 119, 51, 0.1)`
7. **Navigation background is always `#FF7733` ** with white text; links in content use `#443732` with underline on active
8. **Maintain 1.4× ** ; tighten headings to 1:1 or 1.2:1 ratio
9. **Contrast validation: ** Text `#0F0D0C` or `#2A2827` on light backgrounds (WCAG AA); text `#FFFFFF` on `#FF7733` (WCAG AAA)
10. **Responsive collapse: ** Reduce padding and font by 25% on mobile; stack multi-column layouts to single column; full-width buttons on mobile only
- O componente compartilhado existente foi reutilizado?
- As cores usam tokens semânticos?
- A tela funciona em tema claro e escuro?
- O layout continua legível em mobile?
- Foco, labels e nomes acessíveis estão presentes?
- Estados vazio, carregando, erro e sucesso foram considerados?
- Valores financeiros continuam fáceis de comparar?
Felipe Coutinho