diff --git a/DESIGN.md b/DESIGN.md index e72f135..6f9b0a4 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -1,389 +1,178 @@ -# Design System Inspired by OpenMonetis +# Design System do OpenMonetis -## 1. Visual Theme & Atmosphere +Este documento descreve a identidade visual implementada no OpenMonetis. Ele deve +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. -### Interactive -- **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 verdade -### 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 used 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-muted-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 Rules +## 3. Cores -### Font Family -**Primary:** Inter (sans-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 tokens 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× line height multiplier for comfortable reading; headings use tighter ratio (1:1) for impact -- **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. -### Navigation +### Formulários -#### 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 / Tabs -- **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álogos -#### 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 – Default -- **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 – Success -- **Background:** `#E8F5F0` -- **Text Color:** `#0E9D6E` -- **Padding:** `4px 12px` -- **Border Radius:** `20px` -- **Font Size:** `12px` -- **Font Weight:** `500` +## 7. Layout e navegação -#### Badge – Warning -- **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 – Error -- **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–8px:** Tight spacing within compact components (icon-text pairs, inline elements) -- **12–16px:** Standard padding inside cards, inputs, and buttons -- **24–32px:** Section gaps, spacing between components on a page -- **48–64px:** Large section separations, hero spacing -- **80–128px:** Hero margins, page-level vertical rhythm +- mantenha foco visível com os tokens `ring`; +- use HTML semântico antes de adicionar 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 -OpenMonetis prioritizes breathing room and visual clarity. Whitespace is intentional and strategic—surrounding headings, separating card groups, and framing key messages. The warm neutral backgrounds (`#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 containers, 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–0.12)`) 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–48px`) around sections and inside cards for breathing room -- Stack elements vertically with `24–32px` 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–599px` | Single column; container padding `16px`; font sizes reduce 1–2 sizes; gap scale halved | -| Tablet | `600px–1023px` | 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–33% on mobile (e.g., `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× line height minimum for body text**; 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 \ No newline at end of file +- 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? diff --git a/public/fonts/font_index.ts b/public/fonts/font_index.ts index b104591..95cc9bc 100644 --- a/public/fonts/font_index.ts +++ b/public/fonts/font_index.ts @@ -1,10 +1,10 @@ -import { Golos_Text } from "next/font/google"; +import { Bricolage_Grotesque } from "next/font/google"; -export const inter = Golos_Text({ +export const bricolage = Bricolage_Grotesque({ subsets: ["latin"], display: "swap", - variable: "--font-inter", - fallback: ["ui-sans-serif", "system-ui"], + variable: "--font-bricolage", + fallback: ["arial", "ui-sans-serif", "system-ui"], weight: ["500", "600", "700"], preload: true, }); diff --git a/src/app/(dashboard)/insights/loading.tsx b/src/app/(dashboard)/insights/loading.tsx index 183fdb9..0f23eda 100644 --- a/src/app/(dashboard)/insights/loading.tsx +++ b/src/app/(dashboard)/insights/loading.tsx @@ -1,39 +1,125 @@ +import { Card, CardContent } from "@/shared/components/ui/card"; import { Skeleton } from "@/shared/components/ui/skeleton"; -/** - * Loading state para a página de insights com IA - */ +const providers = [ + "openai", + "anthropic", + "google", + "minimax", + "openrouter", + "ollama", +]; + +const summaryRows = ["period", "data-source"]; + export default function InsightsLoading() { return (
-
- {/* Header */} -
- - + +
+ + +
+ - {/* Grid de insights */} -
- {Array.from({ length: 4 }).map((_, i) => ( -
-
-
- - - +
+
+
+ + +
+ + + +
+ +
+
+ + +
+ +
+ {providers.map((provider) => ( +
+ + +
+ + + +
+
+ ))} +
+
+ + + + + +
+
+ + +
+ +
+ +
+ + +
+ + +
+ + + +
+ +
+ +
-
-
- - - + + + + +
+ {summaryRows.map((row) => ( +
+ +
+ + +
+
+ ))}
-
- ))} + +
+ +
+ +
+ + +
+
+
+ + + + +
-
+
); } diff --git a/src/app/(dashboard)/reports/installment-analysis/loading.tsx b/src/app/(dashboard)/reports/installment-analysis/loading.tsx new file mode 100644 index 0000000..85d69b4 --- /dev/null +++ b/src/app/(dashboard)/reports/installment-analysis/loading.tsx @@ -0,0 +1,61 @@ +import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"; +import { Skeleton } from "@/shared/components/ui/skeleton"; + +const installmentCards = ["first", "second", "third"]; + +export default function Loading() { + return ( +
+ + + + + + + + + + +
+ {installmentCards.map((card) => ( + + +
+ + +
+ + +
+ +
+ + + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+ +
+ + + + + ))} +
+
+ ); +} diff --git a/src/app/globals.css b/src/app/globals.css index bcb10b1..4d198cf 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -117,7 +117,7 @@ --destructive: oklch(62% 0.2 28); --destructive-foreground: oklch(98% 0.005 30); - --border: oklch(31.987% 0.00462 39.069); + --border: oklch(24.576% 0.0072 67.399); --input: var(--border); --ring: var(--primary); @@ -170,7 +170,7 @@ } @theme inline { - --default-font-family: var(--font-inter); + --default-font-family: var(--font-bricolage); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9c58f7d..ee7958c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,7 +4,7 @@ import { QueryProvider } from "@/shared/components/providers/query-provider"; import { ThemeProvider } from "@/shared/components/providers/theme-provider"; import { Toaster } from "@/shared/components/ui/sonner"; import "./globals.css"; -import { inter } from "@/public/fonts/font_index"; +import { bricolage } from "@/public/fonts/font_index"; export const metadata: Metadata = { title: { @@ -24,7 +24,7 @@ export default function RootLayout({ diff --git a/src/features/accounts/components/account-statement-card.tsx b/src/features/accounts/components/account-statement-card.tsx index a9a5005..f333e80 100644 --- a/src/features/accounts/components/account-statement-card.tsx +++ b/src/features/accounts/components/account-statement-card.tsx @@ -82,7 +82,7 @@ export function AccountStatementCard({ {/* Linha 2 — saldo final (hero) */} -
+

Saldo ao final do período

diff --git a/src/features/categories/components/category-detail-header.tsx b/src/features/categories/components/category-detail-header.tsx index fbdfebd..d05c5df 100644 --- a/src/features/categories/components/category-detail-header.tsx +++ b/src/features/categories/components/category-detail-header.tsx @@ -89,7 +89,7 @@ export function CategoryDetailHeader({
-
+

Total em {currentPeriodLabel}

@@ -98,7 +98,7 @@ export function CategoryDetailHeader({

-
+

Total em {previousPeriodLabel}

@@ -107,7 +107,7 @@ export function CategoryDetailHeader({

-
+

Variação

diff --git a/src/features/invoices/components/invoice-summary-card.tsx b/src/features/invoices/components/invoice-summary-card.tsx index 0659cc6..1ebc612 100644 --- a/src/features/invoices/components/invoice-summary-card.tsx +++ b/src/features/invoices/components/invoice-summary-card.tsx @@ -240,13 +240,13 @@ export function InvoiceSummaryCard({
{/* Linha 2 — valor da fatura (hero) */} -
+

Valor da fatura

@@ -259,7 +259,7 @@ export function InvoiceSummaryCard({ type="button" variant="ghost" size="icon-sm" - className="text-muted-foreground hover:text-foreground" + className="text-primary hover:text-primary" aria-label="Ajustar fatura" >