square___style_reference:
  info: "> blue signal on white steel."

  theme: "mixed"

  info: "Square's design system is a confident, white-canvas fintech language that lets one vivid blue do all the talking. The interface stays nearly monochrome: white surfaces, a soft gray page background, near-black text, and a single Signal Blue (#006aff) that punctuates CTAs, links, and the subscription form. Headlines lean on a geometric custom display face at near-display sizes (50–86px) with tight line-heights and negative tracking, creating a weight-of-restraint authority rather than shouting. Components are flat and minimal — a 4px-cornered filled button, a ghost variant, light-blue tinted feature cards with 24px image radii, and a single hard-edged dark footer band that flips the palette to black with white type and the same blue for the send button. Elevation is essentially absent: a 1px 16% black shadow on buttons is the only depth the system allows."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Blue | `#006aff` | `--color-signal-blue` | Primary CTAs, link text, active nav, submit buttons, icon accents — the sole chromatic voice in an otherwise achromatic system |"
    info: "| Carbon | `#1a1a1a` | `--color-carbon` | Primary text, heading fills, dark icon strokes, nav labels — near-black that reads softer than pure black on white |"
    info: "| Slate Gray | `#737373` | `--color-slate-gray` | Secondary text, helper copy, muted nav, input placeholder tone |"
    info: "| Platinum | `#d9d9d9` | `--color-platinum` | Hairline borders, input outlines, subtle dividers between sections |"
    info: "| Ash | `#b3b3b3` | `--color-ash` | Disabled text, tertiary metadata, very subtle structural lines |"
    info: "| Cloud | `#f2f2f2` | `--color-cloud` | Page canvas beneath white cards, soft section background, muted surface |"
    info: "| Paper | `#ffffff` | `--color-paper` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Obsidian | `#030303` | `--color-obsidian` | Dark footer section background, inverted surfaces — the only break from white |"
    info: "| True Black | `#000000` | `--color-true-black` | Icon fills, monochrome graphic elements, SVG illustration strokes |"

  tokens___typography:

    square_sans_display_vf___headlines_and_large_display_copy_at_32_86px__the_display_weight_regular_400_at_display_sizes_is_a_signature_choice___most_fintechs_push_600_700_at_this_scale__square_uses_the_lighter_weight_with_negative_tracking_to_feel_architectural_rather_than_aggressive__system_substitute__inter_tight_or_manrope_at_matching_tracking_____font_square_sans_display_vf:
      - "**Substitute:** Inter Tight"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16, 20, 24, 32, 50, 62, 86"
      - "**Line height:** 0.97, 1.10, 1.12, 1.19, 1.25, 1.30, 1.33, 1.42, 1.50"
      - "**Letter spacing:** -0.0120em"
      - "**OpenType features:** `\"ss01\" on`"
      - "**Role:** Headlines and large display copy at 32–86px; the display weight (regular 400) at display sizes is a signature choice — most fintechs push 600–700 at this scale, Square uses the lighter weight with negative tracking to feel architectural rather than aggressive. System substitute: Inter Tight or Manrope at matching tracking."

    square_sans_text_vf___body_copy__nav_labels__footer_text__card_descriptions_at_12_16px_with_relaxed_1_5_1_75_line_height_for_legibility__the_same_family_as_the_display_face_keeps_the_text_voice_continuous___the_only_difference_is_size_and_tracking__system_substitute__inter_or_s_hne_____font_square_sans_text_vf:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12, 14, 16"
      - "**Line height:** 1.38, 1.43, 1.50, 1.71, 1.75, 2.00, 2.63"
      - "**Role:** Body copy, nav labels, footer text, card descriptions at 12–16px with relaxed 1.5–1.75 line-height for legibility. The same family as the display face keeps the text voice continuous — the only difference is size and tracking. System substitute: Inter or Söhne."

    cash_sans___button_labels_and_in_line_cta_microcopy_at_18px_medium___a_distinct_text_face_for_actions_so_they_read_as_tappable_artifacts_separate_from_body_copy__substitute__same_family_as_text_at_500_weight__or_dm_sans_medium_____font_cash_sans:
      - "**Substitute:** DM Sans Medium"
      - "**Weights:** 500"
      - "**Sizes:** 18"
      - "**Line height:** 1.00, 1.50"
      - "**Role:** Button labels and in-line CTA microcopy at 18px medium — a distinct text face for actions so they read as tappable artifacts separate from body copy. Substitute: same family as text at 500 weight, or DM Sans Medium."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.3 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | -0.29px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.19 | -0.38px | `--text-heading` |"
      info: "| heading-lg | 50px | 1.1 | -0.6px | `--text-heading-lg` |"
      info: "| display | 62px | 1 | -0.74px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 33 | 33px | `--spacing-33` |"
      info: "| 47 | 47px | `--spacing-47` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 113 | 113px | `--spacing-113` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| icons | 32px |"
      info: "| images | 24px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"
      info: "| pillButtons | 20px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.16) 0px 1px 4px 0px` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 96px"
      - "**Card padding:** 24px"
      - "**Element gap:** 10-15px"

  components:

    primary_filled_button:
      role: "Main CTA across hero, feature cards, footer form"

      info: "Solid Signal Blue (#006aff) background, white text in Cash Sans 18px medium, 4px corner radius, 10px vertical × 15px horizontal padding. Carries a single subtle shadow rgba(0,0,0,0.16) 0 1px 4px — the only elevation the system grants any component. No hover state color shift, no border."

    ghost_outlined_button:
      role: "Secondary action alongside the primary"

      info: "Transparent fill, 1px Signal Blue (#006aff) border, Signal Blue text in Cash Sans 18px, 4px radius, 10px × 15px padding. Always pairs horizontally with a filled primary button on the same baseline."

    header_nav:
      role: "Top-level site navigation"

      info: "White background, logo left (Carbon mark + Square wordmark), nav links in Square Sans Text 14px Carbon, right-aligned secondary actions. No visible bottom border; sits on white and reads through whitespace rather than a divider line."

    hero_headline_block:
      role: "Primary above-the-fold message"

      info: "Square Sans Display 62px / 1.0 line-height, Carbon (#1a1a1a), tracking -0.012em. Sub-copy at Square Sans Text 16px Slate Gray (#737373) sits ~18px below. Two-button row at 10px gap. Left-aligned, paired with a 24px-radius editorial photograph on the right."

    feature_card:
      role: "Three-column solution overview"

      info: "White card with a very light blue (Signal Blue at ~8% opacity) background fill, 24px image radius for the leading visual, 24px internal padding, 20px gap between image and headline. Title in Square Sans Display 24px Carbon, body in Square Sans Text 16px Carbon/Slate, bottom link in Signal Blue 16px with → arrow."

    inverted_footer_section:
      role: "Email capture and contact band at page bottom"

      info: "Full-bleed Obsidian (#030303) background, white headline in Square Sans Display 50px, Signal Blue link row directly beneath. Email input is 4px radius white field with Carbon text and a Signal Blue filled 'Enviar' button attached. White icon trio (mail, paper plane, smiley) at 32px render size on the right."

    email_input_with_attached_submit:
      role: "Newsletter capture inside the dark footer"

      info: "White Paper (#ffffff) input field, 4px radius, Carbon text at Square Sans Text 16px, Slate Gray placeholder, no visible border. Signal Blue submit button flush against the right edge of the field, same 4px radius, white 'Enviar' label in Cash Sans 18px."

    section_heading_with_link:
      role: "Subsection introductions (e.g. 'Empieza a vender al instante')"

      info: "Square Sans Display 50px / 1.10 Carbon, with a Signal Blue 16px link directly below prefixed by a small arrow or '→'. Heading and link share the same left-alignment axis; no decorative rules."

    lifestyle_photography_block:
      role: "Hero image and card imagery"

      info: "Full-bleed editorial photography with 24px corner radius on card contexts, sharp edges on hero. Warm, naturalistic, real-customer scenes — hands, devices, food, retail counters. No duotone, no overlay tint, no graphic treatment."

  do_s_and_don_ts:

    do:
      - "Use Signal Blue (#006aff) as the only chromatic element in the system — never introduce a second brand color, secondary accent, or decorative gradient."
      - "Set headlines in Square Sans Display at 400 weight with -0.012em tracking; use 50–86px sizes with line-heights between 1.0 and 1.19 so type feels architectural, not bulky."
      - "Give all editorial and card imagery a 24px corner radius; let hero photographs bleed edge-to-edge only on full-bleed sections."
      - "Pair every filled primary button with a ghost outlined variant of the same label, separated by a 10px gap, on a shared baseline."
      - "Use 4px radius for all buttons, inputs, and nav elements; reserve 20px exclusively for pill-shaped button variants and 32px for icon containers."
      - "Let cards lift off the page through the #ffffff on #f2f2f2 surface contrast — never add a drop shadow to a card or panel."
      - "Use Cash Sans 18px medium for every button label so actions read as a distinct typographic register from body copy."

    don_t:
      - "Don't use Carbon (#1a1a1a) for button backgrounds — buttons are always Signal Blue filled, ghost blue outlined, or white-on-dark in the footer."
      - "Don't add drop shadows to cards, feature panels, or images — the only shadow allowed is the 1px 16% black on filled buttons."
      - "Don't use 600 or 700 weight on display headlines; the system relies on 400 weight at large sizes with negative tracking for its visual voice."
      - "Don't introduce semantic colors (green for success, red for error) into the neutral-by-default interface — accent is blue only."
      - "Don't break the white canvas with decorative gradients, colored section bands, or pattern fills — let the dark Obsidian footer be the single chromatic inversion."
      - "Don't use border-radius values outside the four-token set (4, 20, 24, 32) — inconsistent radii fragment the geometric discipline."
      - "Don't use letter-spacing on body copy; tracking adjustments are reserved for display sizes 24px and above."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#f2f2f2` | Subtle off-white base that lets pure white cards lift off the page |"
    info: "| 1 | Card Surface | `#ffffff` | Primary content surface for hero, feature cards, inputs, nav |"
    info: "| 2 | Inverted Footer | `#030303` | Full-bleed dark band at page bottom for email capture and social |"

  elevation:

    - "**Primary Filled Button:** `rgba(0, 0, 0, 0.16) 0px 1px 4px 0px`"

  imagery:

    photography_led_visual_language: "warm, naturalistic editorial scenes of merchants and customers interacting with phones and card readers. High-key lighting, candid hands-and-objects framing (fries on green paper, wooden tables, counter tops), no staged studio polish. Images are tightly cropped to human moments and devices, never wide environmental shots. No illustration, no 3D renders, no abstract graphics. Images sit in 24px-radius frames inside feature cards and bleed sharp-edged into the hero. The photography is the only source of warmth and color in the system — the UI itself is intentionally cold and minimal so the imagery feels like sunlight in a steel room."

  layout:

    info: "Max-width ~1200px centered container with generous horizontal padding. Hero is a two-column split: left-aligned headline + dual-button stack on roughly 45% width, right-aligned 24px-radius editorial photograph on 55%. Below the hero, a three-column equal-width feature card grid with ~24px gutters, each card stacking image → headline → body → blue link vertically. The page ends with a full-bleed dark footer band that spans edge to edge, breaking the centered grid. Vertical rhythm is comfortable and unhurried — roughly 96px between major sections, 10–15px between elements within a block. Navigation is a single white top bar, not sticky, not shadowed. No sidebar, no mega-menu — links are flat horizontal text."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #1a1a1a (Carbon)"
    - "background: #ffffff (Paper) over #f2f2f2 (Cloud) canvas"
    - "border: #d9d9d9 (Platinum) hairlines"
    - "accent: #006aff (Signal Blue) for links and icons"
    - "primary action: no distinct CTA color"
    - "dark surface: #030303 (Obsidian) for inverted footer band"

    info: "Example Component Prompts:"
    - "Create a hero section: white #ffffff background, 1200px max-width centered. Left column holds a headline in Square Sans Display 62px weight 400, color #1a1a1a, line-height 1.0, letter-spacing -0.74px. Below at 18px gap, sub-copy in Square Sans Text 16px #737373. Then a button row: filled #006aff button (4px radius, 10px 15px padding, white Cash Sans 18px label 'Get started') next to a ghost button (1px #006aff border, transparent fill, #006aff text) with 10px gap. Right column holds a 24px-radius editorial photograph of a person using a phone at a table."

    - "Create a three-column feature card grid: each card is #ffffff with a very light blue (~8% opacity of #006aff) background fill, 24px internal padding, a 24px-radius product image at the top, then a 20px gap, then a Square Sans Display 24px #1a1a1a title, then Square Sans Text 16px #1a1a1a body, then a #006aff 16px link with a → arrow. 24px gutter between cards, no shadows."

    - "Create the dark footer band: full-bleed #030303 background, white headline in Square Sans Display 50px weight 400. Below, a Signal Blue (#006aff) link row at 16px. Email input: 4px radius white field, #1a1a1a text, #737373 placeholder, attached to a #006aff filled submit button (4px radius, white Cash Sans 18px label). To the right, three white icons (mail, paper plane, smiley) at 32px render size with no fill, stroke-only style."

  blue_accent_discipline:

    info: "Signal Blue is rationed, not splashed. It appears as: filled CTA buttons, ghost button borders, inline text links, the submit button, icon accents inside cards, and the subhead link arrow. It never appears as a card background tint at full saturation, never as a section background, never as a decorative shape, never as a gradient stop. The system treats blue as a vocabulary of ~3 functions (act, navigate, emphasize) and nothing else — this scarcity is what gives the single color its power."

  similar_brands:

    - "**Stripe** — Same single-accent-on-white approach with one bold blue and a custom geometric display face at large sizes for headlines"
    - "**Linear** — Shares the restrained typographic voice — weight 400 at display sizes, tight tracking, one accent color doing all the work on a clean light canvas"
    - "**Plaid** — Same fintech editorial photography (hands, devices, real merchants) paired with minimal white UI and a single chromatic link/accent color"
    - "**Notion** — Similar near-black text (#1a1a1a) on white, minimal shadow discipline, and feature cards with soft surface tints instead of elevation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-blue: #006aff;
          --color-carbon: #1a1a1a;
          --color-slate-gray: #737373;
          --color-platinum: #d9d9d9;
          --color-ash: #b3b3b3;
          --color-cloud: #f2f2f2;
          --color-paper: #ffffff;
          --color-obsidian: #030303;
          --color-true-black: #000000;
        
          /* Typography — Font Families */
          --font-square-sans-display-vf: 'Square Sans Display VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-square-sans-text-vf: 'Square Sans Text VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cash-sans: 'Cash Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.29px;
          --text-heading: 32px;
          --leading-heading: 1.19;
          --tracking-heading: -0.38px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.6px;
          --text-display: 62px;
          --leading-display: 1;
          --tracking-display: -0.74px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-47: 47px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-113: 113px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 24px;
          --element-gap: 10-15px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-icons: 32px;
          --radius-images: 24px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
          --radius-pillbuttons: 20px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.16) 0px 1px 4px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #f2f2f2;
          --surface-card-surface: #ffffff;
          --surface-inverted-footer: #030303;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-blue: #006aff;
          --color-carbon: #1a1a1a;
          --color-slate-gray: #737373;
          --color-platinum: #d9d9d9;
          --color-ash: #b3b3b3;
          --color-cloud: #f2f2f2;
          --color-paper: #ffffff;
          --color-obsidian: #030303;
          --color-true-black: #000000;
        
          /* Typography */
          --font-square-sans-display-vf: 'Square Sans Display VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-square-sans-text-vf: 'Square Sans Text VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cash-sans: 'Cash Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.29px;
          --text-heading: 32px;
          --leading-heading: 1.19;
          --tracking-heading: -0.38px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.6px;
          --text-display: 62px;
          --leading-display: 1;
          --tracking-display: -0.74px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-47: 47px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-113: 113px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.16) 0px 1px 4px 0px;
        }