somos_incansáveis_pra_você_não_precisar_ser___nubank___style_reference:
  info: "> Violet signal on white marble — one vivid accent on luminous off-white, all surfaces curved into soft pills."

  theme: "mixed"

  info: "Nubank operates on a radical one-accent system: a white porcelain canvas, black ink typography, and a single vivid violet that functions as the only chromatic note in the entire interface. The visual grammar is built on pill shapes — buttons, inputs, and links all curve into 999px capsules, giving the system a soft, rounded, approachable personality that softens the severity of high-contrast black-on-white. Typography carries the authority: a custom geometric sans (Graphik) at weights 400-500 with aggressive negative tracking, creating tight, composed headlines that whisper rather than shout. The page breathes — generous 8px-based spacing, large display sizes (up to 56px), and dark photo sections that contrast with otherwise luminous white surfaces. Every interaction surface is a pill, every accent is violet, and every screen feels like a single page from a meticulously typeset magazine."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Nubank Violet | `#820ad1` | `--color-nubank-violet` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Deep Iris | `#290b4d` | `--color-deep-iris` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Dusty Violet | `#714f8f` | `--color-dusty-violet` | Subtle violet washes, disabled violet states, muted brand backgrounds |"
    info: "| Ink | `#000000` | `--color-ink` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Snow | `#ffffff` | `--color-snow` | Card surfaces, input fills, text on dark backgrounds, page sections over the mist base |"
    info: "| Mist | `#f4f4f4` | `--color-mist` | Page canvas, subtle section backgrounds, input field fills — the porcelain tone that defines the overall light theme |"
    info: "| Stone | `#a2a2a2` | `--color-stone` | Secondary text, helper labels, placeholder text, icon strokes at rest |"
    info: "| Concrete | `#b3b3b3` | `--color-concrete` | Hairline borders, dividers, subtle UI separators |"
    info: "| Smoke | `#777777` | `--color-smoke` | Tertiary text, footer secondary lines, metadata |"
    info: "| Graphite | `#666666` | `--color-graphite` | Mid-neutral fills, muted backgrounds for nested sections |"

  tokens___typography:

    graphik___all_interface_text___headings__body__buttons__inputs__navigation__the_custom_geometric_sans_with_weights_limited_to_400_500_is_deliberate__no_bold_ever_appears__so_weight_contrast_is_replaced_by_size_contrast__creating_a_system_that_whispers_through_scale_rather_than_shouts_through_heaviness_____font_graphik:
      - "**Substitute:** Inter, Geist, Manrope"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12, 14, 16, 18, 20, 22, 24, 36, 48, 56"
      - "**Line height:** 1.0–2.8 (tight for display, generous for body)"
      - "**Letter spacing:** -0.0300em at 56px display → -0.0100em at body 16px (tightens as size increases)"
      - "**OpenType features:** `\"kern\" — kerning is always on across all weights and sizes`"
      - "**Role:** All interface text — headings, body, buttons, inputs, navigation. The custom geometric sans with weights limited to 400-500 is deliberate: no bold ever appears, so weight contrast is replaced by size contrast, creating a system that whispers through scale rather than shouts through heaviness."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| micro | 12px | 1.44 | -0.12px | `--text-micro` |"
      info: "| caption | 14px | 1.44 | -0.14px | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | -0.16px | `--text-body-sm` |"
      info: "| body | 18px | 1.5 | -0.18px | `--text-body` |"
      info: "| body-lg | 20px | 1.44 | -0.2px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.3 | -0.24px | `--text-subheading` |"
      info: "| heading-sm | 36px | 1.2 | -0.648px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.1 | -0.96px | `--text-heading` |"
      info: "| display | 56px | 1.1 | -1.68px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 999px |"
      info: "| cards | 24px |"
      info: "| images | 32px |"
      info: "| inputs | 24px |"
      info: "| buttons | 999px |"
      info: "| smallButtons | 8px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24-32px"
      - "**Element gap:** 16-24px"

  components:

    primary_violet_pill_button:
      role: "Main call-to-action across the site"

      info: "Filled violet (#820ad1) pill with white text at 16px weight 500. Radius 999px, horizontal padding 24px, vertical padding 12-16px. Carries an arrow icon for directional actions. The rounded capsule form is signature — Nubank has no rectangular buttons."

    ghost_dark_pill_button:
      role: "Secondary action on dark/image backgrounds"

      info: "Dark semi-transparent fill (#000000 or rgba 0,0,0,0.5) with white text, radius 999px. Used as 'Saiba mais' over product card images. Always pill-shaped, never rectangular."

    small_radius_button:
      role: "Compact inline action"

      info: "8px radius variant of the pill system for compact spaces. Violet fill with white text. Used where the full pill is too wide."

    product_hero_card:
      role: "Full-bleed hero with overlaid form"

      info: "Dark photographic background spanning full viewport width, with large white display text (48-56px) at left and a floating white card (#ffffff) at right containing a heading, input field, and violet CTA. The card has radius 24px and 32px padding. This pairing of dark image + floating white form is Nubank's signature hero pattern."

    product_carousel_card:
      role: "Showcase card in a 3-card carousel"

      info: "Rounded image card (32px radius) with a photo fill, centered white product name overlaid (24px weight 500), and a ghost dark pill button ('Saiba mais') at the bottom. Cards overlap slightly in the carousel. Height approximately 400px, aspect ratio roughly 3:4."

    pill_input_field:
      role: "Text input for forms (CPF, email, etc.)"

      info: "Rounded input with 24px radius, light gray fill (#f4f4f4), placeholder text in Stone (#a2a2a2), body text 16px. No visible border by default. Feels soft and approachable rather than clinical."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Light mist (#f4f4f4) background, Nubank 'nu' logo in violet at far left, horizontal nav items in black (16px weight 500) with dropdown carets, search icon, a ghost outlined 'Login Empresas' button, and a filled violet 'Quero ser Nubank' pill button at far right. No heavy borders — sits cleanly on the canvas."

    dark_footer:
      role: "Site-wide footer with links and contact"

      info: "Full-width black (#000000) background, white text links in a 4-column grid, social icons in a row, legal copy at bottom in small Stone-toned text. Section headings in white weight 500, phone numbers in white. The dark surface is the visual counterweight to the light page."

    inline_text_link:
      role: "Hyperlink within body text"

      info: "Violet (#820ad1) text, no underline at rest, underline on hover. Weight matches surrounding text. Sits naturally in body copy without visual weight change."

  do_s_and_don_ts:

    do:
      - "Use the 999px pill radius for every button, input, and tag — rectangular buttons break the brand"
      - "Apply Nubank Violet (#820ad1) as the only chromatic accent in any view; never introduce a second hue"
      - "Set letter-spacing to -0.0100em or tighter on all text; positive tracking would destroy the composed feel"
      - "Use Graphik weight 400 for body and 500 for emphasis; never use bold (700) — the system doesn't have it"
      - "Float white cards on the mist (#f4f4f4) canvas with 24-32px padding to create depth without shadows"
      - "Keep dark image sections full-bleed; let them break the 1200px container for visual punctuation"
      - "Size display headlines at 48-56px with line-height 1.10 to match the magazine-like editorial scale"

    don_t:
      - "Don't add drop shadows, elevation, or glow effects — Nubank uses surface contrast only"
      - "Don't use sharp corners on interactive elements; the pill is the brand's most recognizable shape"
      - "Don't introduce a second accent color or background tint beyond violet, white, mist, and black"
      - "Don't use bold or extra-bold weights; the type system stops at 500 and relies on size for hierarchy"
      - "Don't put violet fills on large background areas — violet is for actions and small accents only"
      - "Don't use positive letter-spacing; all text should feel optically tightened"
      - "Don't mix icon styles; use a single stroke-based icon family at 1.5-2px weight"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Mist Canvas | `#f4f4f4` | Base page background — the porcelain surface everything floats on |"
    info: "| 1 | Snow Card | `#ffffff` | Product cards, form cards, input fields — lifted off the mist canvas |"
    info: "| 2 | Ink Surface | `#000000` | Dark hero image overlays, full-dark footer — dramatic contrast sections |"

  elevation:

    info: "Nubank avoids drop shadows entirely. Depth is communicated through surface contrast — white cards float on mist canvas, dark images anchor sections. The pill geometry and generous spacing do the work that shadows would do in a conventional system."

  imagery:

    photography_dominates: "large full-bleed aerial and lifestyle photos anchor hero sections and product cards. The stadium hero shot (aerial drone view of a branded arena) is editorial in scale. Product carousel cards use intimate lifestyle photography — people in natural moments (laughing, swimming, working). All photos are treated with full-bleed framing inside 32px-radius masks. No illustrations, no abstract graphics, no 3D renders. The photography is bright, warm-toned, and human — the opposite of clinical fintech imagery."

  layout:

    info: "Max-width 1200px centered container, but hero sections and footer are full-bleed. The hero pattern is consistently: dark full-viewport image left, floating white form card right. Below the fold, the rhythm alternates between white sections and the carousel of product image cards. Section spacing is generous (64px gaps) creating room to breathe. Navigation is a minimal top bar — no sidebar, no mega-menu, just horizontal links with caret indicators. The overall flow is: full-bleed dark hero → white product showcase → more white content sections → full-bleed dark footer."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #f4f4f4 (Mist canvas)"
    - "surface: #ffffff (Snow cards)"
    - "text: #000000 (Ink primary)"
    - "muted text: #a2a2a2 (Stone)"
    - "border: #b3b3b3 (Concrete)"
    - "accent: #820ad1 (Nubank Violet)"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "*Create a product carousel card*: 32px-radius image container with a full-bleed lifestyle photo. Centered white product name at 24px Graphik weight 500. Ghost dark pill button ('Saiba mais') at the bottom — #000000 semi-transparent fill, white text, 999px radius, 12px vertical padding."

    - "*Create the top navigation*: Mist (#f4f4f4) background bar, Nubank 'nu' logo in #820ad1 at far left, horizontal nav items in #000000 at 16px Graphik weight 500 with dropdown carets, a ghost outlined 'Login' button (1px #000000 border, 999px radius, 16px 24px padding), and a filled violet 'Quero ser Nubank' pill button (#820ad1, white text, 999px radius) at far right."

    - "*Create the dark footer*: Full-width #000000 background. Four-column grid of white text links at 16px Graphik weight 400. Column headings in white weight 500. Social icon row (LinkedIn, YouTube, Facebook, Instagram, X) in white. Legal copy at bottom in #a2a2a2 at 12px."

    - "*Create an inline violet link within body text*: #820ad1 color, 18px Graphik weight 400, no underline at rest, underline on hover. Should sit within a paragraph of #000000 body copy on the #f4f4f4 canvas."

  type_system_philosophy:

    info: "Nubank's type system is defined by restraint: weights stop at 500, letter-spacing is always negative, and hierarchy comes from scale jumps (18→24→36→48→56). The 2.25x ratio between body and display creates magazine-level contrast. The 'kern' feature setting is always on, optimizing the tight letter-spacing pairs. This produces text that feels composed and intentional — like a financial publication, not a tech startup."

  similar_brands:

    - "**Revolut** — Same pill-button language and single-accent-on-light-canvas approach, though Revolut uses black as its dominant accent rather than violet"
    - "**Monzo** — Similar rounded-soft component geometry and clean light surfaces, though Monzo leans more colorful with coral and yellow"
    - "**Wise (TransferWise)** — Same white-canvas-plus-one-bold-accent strategy, with generous spacing and confident display typography"
    - "**Klarna** — Shares the pill-button system and light background with single accent color (pink for Klarna vs violet for Nubank)"
    - "**Cash App** — Same commitment to a single brand color as the only chromatic note in the interface, with clean white surfaces"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-nubank-violet: #820ad1;
          --color-deep-iris: #290b4d;
          --color-dusty-violet: #714f8f;
          --color-ink: #000000;
          --color-snow: #ffffff;
          --color-mist: #f4f4f4;
          --color-stone: #a2a2a2;
          --color-concrete: #b3b3b3;
          --color-smoke: #777777;
          --color-graphite: #666666;
        
          /* Typography — Font Families */
          --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 12px;
          --leading-micro: 1.44;
          --tracking-micro: -0.12px;
          --text-caption: 14px;
          --leading-caption: 1.44;
          --tracking-caption: -0.14px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.16px;
          --text-body: 18px;
          --leading-body: 1.5;
          --tracking-body: -0.18px;
          --text-body-lg: 20px;
          --leading-body-lg: 1.44;
          --tracking-body-lg: -0.2px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.24px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.648px;
          --text-heading: 48px;
          --leading-heading: 1.1;
          --tracking-heading: -0.96px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: -1.68px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24-32px;
          --element-gap: 16-24px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 999px;
        
          /* Named Radii */
          --radius-tags: 999px;
          --radius-cards: 24px;
          --radius-images: 32px;
          --radius-inputs: 24px;
          --radius-buttons: 999px;
          --radius-smallbuttons: 8px;
        
          /* Surfaces */
          --surface-mist-canvas: #f4f4f4;
          --surface-snow-card: #ffffff;
          --surface-ink-surface: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-nubank-violet: #820ad1;
          --color-deep-iris: #290b4d;
          --color-dusty-violet: #714f8f;
          --color-ink: #000000;
          --color-snow: #ffffff;
          --color-mist: #f4f4f4;
          --color-stone: #a2a2a2;
          --color-concrete: #b3b3b3;
          --color-smoke: #777777;
          --color-graphite: #666666;
        
          /* Typography */
          --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 12px;
          --leading-micro: 1.44;
          --tracking-micro: -0.12px;
          --text-caption: 14px;
          --leading-caption: 1.44;
          --tracking-caption: -0.14px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.16px;
          --text-body: 18px;
          --leading-body: 1.5;
          --tracking-body: -0.18px;
          --text-body-lg: 20px;
          --leading-body-lg: 1.44;
          --tracking-body-lg: -0.2px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.24px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.648px;
          --text-heading: 48px;
          --leading-heading: 1.1;
          --tracking-heading: -0.96px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: -1.68px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 999px;
        }