superlocal___style_reference:
  info: "> Cream risograph poster under cobalt sky — a single sheet of eggshell paper, one bolt of electric blue, and a sharp geometric face that feels printed not designed."

  theme: "light"

  info: "Superlocal reads as a printed festival poster translated to the web. The canvas is a warm eggshell cream (#fbf5e7), never clinical white — every default surface carries that risograph paper warmth. A single full-bleed electric cobalt band (#1673ff) detonates the first screen and acts as the brand's signature anchor, while a deep coffee-brown band (#3d2800) carries schedule content. Typography is dominated by a custom geometric display face (RST Reactor) that swings from a massive 172px headline with brutally tight -0.06em tracking down to 14-17px body, then jumps to positively-tracked uppercase eyebrows for the nav and captions. Controls are flat pill shapes (99px radius), the sponsor system is a sharp-cornered 6-column grid divided by hairlines, and color is rationed: most screens stay cream and monochrome, letting blue and orange erupt only on the hero and the single sunburst illustration."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Cobalt | `#1673ff` | `--color-electric-cobalt` | Full-bleed hero backgrounds, section anchors — the single saturated chord of the system, reserved for the opening band and any screen that needs to shout over the cream |"
    info: "| Coffee Bean | `#3d2800` | `--color-coffee-bean` | Dark schedule bands, body text on cream, logo lockup wordmark — a warm near-black that reads as ink, not charcoal |"
    info: "| Tangerine Burn | `#ff7b02` | `--color-tangerine-burn` | Sunburst illustration accent, flower petal rays — the warm counterweight to cobalt, appears only inside the hero graphic |"
    info: "| Eggshell Cream | `#fbf5e7` | `--color-eggshell-cream` | Page canvas, card surfaces, sponsor grid background, section fills — the warm default that replaces white everywhere |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary body text, logo monogram strokes, illustration line work, hairline dividers, iconography |"
    info: "| Pale Ash | `#c4c4c4` | `--color-pale-ash` | Secondary surface tint, disabled or inactive background fills, tertiary section background when cream needs a sibling |"
    info: "| Mocha | `#604106` | `--color-mocha` | Yellow supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"

  tokens___typography:

    rst_reactor___primary_display_and_body_face_across_the_entire_system__drives_the_172px_hero_headline__64px_section_headings__14_17px_body__and_10_12px_tracked_eyebrows__its_brutal_tracking_swing___from__0_06em_on_display_to__0_05em_on_micro_text___is_the_brand_s_typographic_signature__use_for_everything_except_rare_utility_contexts_____font_rst_reactor:
      - "**Substitute:** Space Grotesk (closest free geometric grotesque with similar optical qualities) or Sora"
      - "**Weights:** 400, 500 (Medium variant used for select headings at 64px)"
      - "**Sizes:** 10px, 12px, 14px, 16px, 17px, 64px, 172px"
      - "**Line height:** 0.90 (64px heading), 1.00 (172px display), 1.20 (10-12px), 1.30 (16px), 1.41 (17px), 1.50 (17px body)"
      - "**Letter spacing:** -0.06em at 172px, -0.05em at 64px, -0.04em at 17px, -0.02em at 14-16px, +0.022em at 12px, +0.05em at 10px"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Role:** Primary display and body face across the entire system. Drives the 172px hero headline, 64px section headings, 14-17px body, and 10-12px tracked eyebrows. Its brutal tracking swing — from -0.06em on display to +0.05em on micro text — IS the brand's typographic signature. Use for everything except rare utility contexts."

    inter___long_form_body_fallback__used_for_extended_paragraphs_where_rst_reactor_s_geometric_character_would_compete_with_readability__quiet__neutral__disappears_into_the_page_____font_inter:
      - "**Substitute:** Inter (Google Font) or IBM Plex Sans"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.60"
      - "**Letter spacing:** -0.02em"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Role:** Long-form body fallback. Used for extended paragraphs where RST Reactor's geometric character would compete with readability. Quiet, neutral, disappears into the page."

    system_sans_serif___micro_utility_text___timestamps__badges__and_any_element_too_small_for_rst_reactor_to_retain_character____font_system_sans_serif:
      - "**Substitute:** Any platform system stack (-apple-system, Segoe UI, sans-serif)"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Role:** Micro utility text — timestamps, badges, and any element too small for RST Reactor to retain character"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| micro | 10px | 1.2 | 0.5px | `--text-micro` |"
      info: "| eyebrow | 12px | 1.2 | 0.264px | `--text-eyebrow` |"
      info: "| caption | 14px | 1.41 | -0.28px | `--text-caption` |"
      info: "| body-sm | 16px | 1.6 | -0.32px | `--text-body-sm` |"
      info: "| heading | 64px | 0.9 | -3.2px | `--text-heading` |"
      info: "| display | 172px | 1 | -10.32px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 23 | 23px | `--spacing-23` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 57 | 57px | `--spacing-57` |"
      info: "| 78 | 78px | `--spacing-78` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 30px |"
      info: "| cards | 0px |"
      info: "| pills | 99px |"
      info: "| buttons | 50px |"

    layout:

      - "**Section gap:** 57-78px"
      - "**Card padding:** 16-24px"
      - "**Element gap:** 10-16px"

  components:

    cobalt_hero_band:
      role: "Opening screen — the system's signature moment"

      info: "Full-viewport #1673ff band. Logo wordmark 'superlocal' in Eggshell Cream at top-left (RST Reactor 17px, -0.02em). Nav links (INICIO, LINEUP, CRONOGRAMA, CONTACTO) in cream at 12px tracked +0.264px, top-right. Centered illustration occupies the full visual field. Bottom-left carries a 12px cream caption (LA CONFERENCIA DE DISEÑO / INTERNACIONAL DEL URUGUAY). No padding from viewport edges — graphic bleeds to all four sides."

    reservar_pill_button:
      role: "Primary floating action on the hero"

      info: "Eggshell Cream (#fbf5e7) pill, 99px radius, sits at bottom-right of the hero. Contains a 32×32 circular white inset with a miniature tangerine sunburst icon, the label 'RESERVAR ACTIVIDADES' in Coffee Bean at 12px tracked +0.264px, and a right-arrow glyph. Padding 8px vertical, 16px horizontal. No shadow — flat against the cobalt."

    top_navigation_bar:
      role: "Minimal global navigation"

      info: "Transparent, no background. Logo at top-left, nav cluster at top-right. Items are 12px RST Reactor, tracked +0.264px, uppercase, Ink Black on cream sections and Eggshell Cream on the cobalt hero. Spacing between items: 24px. No underline, no active state decoration beyond color shift."

    eggshell_content_section:
      role: "Default body surface"

      info: "Full-bleed #fbf5e7 background. No border, no shadow, no radius. Internal content uses generous edge padding (48-78px vertical, fluid horizontal). Headlines sit at 64-172px in Coffee Bean. Body in Ink Black at 17px. The cream itself provides the warmth — no decorative treatment needed."

    sponsor_grid_cell:
      role: "Single sponsor brand slot in the 6-column grid"

      info: "Zero radius, Eggshell Cream background, bordered on all four sides by a 1px Ink Black hairline. Sponsor logo centered both axes, 60% of cell width. Cell aspect roughly 1:1.5 portrait. No padding override — logo floats in the negative space."

    sponsor_grid:
      role: "6-column × 2-row partner wall"

      info: "Six equal columns, two rows, gap 0. The grid IS the divider system — each cell's borders compose the full grid lines. Background is Eggshell Cream. The grid sits inside a content section with edge padding equal to one cell width on each side, so the outermost borders align with the section's content edge."

    coffee_schedule_band:
      role: "Dark inverted band for schedule / timeline content"

      info: "Full-bleed #3d2800 background. Headlines 'Cronograma 2025' sit at 64px RST Reactor Medium, Eggshell Cream, -3.2px tracking, line-height 0.90 (the line-height <1 is a deliberate editorial squeeze — the descenders kiss the next line). Body explanation text in Eggshell Cream at 14px. Spacing between heading pair and body: 48px. Schedule rows below use 12px cream text on 0px gap (tight rows)."

    schedule_row:
      role: "Single time slot in the cronograma"

      info: "Three-column flex within the Coffee Band: date stamp (left, 12px cream, +0.264px tracking), title block (center, 17px Eggshell Cream, -0.68px tracking), meta line (right, 12px cream). Row height ~32px, separated by a 1px #604106 hairline. No hover state — static editorial table."

    section_caption:
      role: "Eyebrow / small context label"

      info: "10-12px RST Reactor, uppercase, +0.5px or +0.264px tracking, Coffee Bean on cream sections, Eggshell Cream on the cobalt hero. Single line, sits 32px above the headline it labels."

    sunburst_illustration:
      role: "Hero centerpiece graphic"

      large_stylized_flower_sonnenblume: "eight Eggshell Cream rounded petals around a black-and-white optical-ring center with a Tangerine Burn sunburst burst between the center and petals. Pure flat shapes, no gradients, no shadows. Centered on the cobalt band, scale ~60% of viewport height. Functions as a logo-as-poster, not a decorative flourish."

    footer_wordmark:
      role: "Closing identity lockup"

      info: "Abbreviated 'splcl' wordmark in Coffee Bean at 14px, top-left of an Eggshell section, acting as a recurring signpost. No rules, no background — just type breathing on the cream."

  do_s_and_don_ts:

    do:
      - "Use #fbf5e7 as the default canvas for every body section. Pure white is a violation of the paper-warm system."
      - "Reserve #1673ff for full-bleed hero bands and the single moment that needs to detonate. Never use it as a small button fill or chip."
      - "Set buttons and tags to 99px radius. The pill silhouette is the system's recurring punctuation mark."
      - "Use -0.05em or tighter tracking on any display size 64px and above. Positive tracking belongs only on 10-12px eyebrow and caption text."
      - "Use the 6-column hairline grid for any partner, sponsor, or logo wall. Zero cell gap, 1px black dividers, no card shadows."
      - "Anchor every section with either cream or coffee-brown as the surface. Do not introduce a third dark or light tone."
      - "Pair the sunburst illustration with a 12-32px cream or black circular badge when it appears at small sizes (e.g., inside the Reservar button)."

    don_t:
      - "Don't drop shadows anywhere. The system reads as flat-printed matter, not as a layered UI."
      - "Don't use #1673ff as a link color, icon tint, or text accent. It is a wall, not a highlight."
      - "Don't set body text larger than 17px in RST Reactor. The face is designed for tension between tiny tracked labels and massive display — body should stay in the 14-17px window."
      - "Don't use 0px radius for buttons. The pill is the system's recurring motif; squared buttons break the rhythm."
      - "Don't introduce a new accent hue. The brand's chromatic vocabulary is exactly three: Cobalt, Coffee, Tangerine."
      - "Don't set line-height above 1.0 on the 64px and 172px display sizes. The near-touching lines are intentional."
      - "Don't place a colored button on a surface of the same hue. The Reservar button is cream on cobalt — contrast is structural."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Hero Cobalt | `#1673ff` | Full-bleed first screen, sets the brand's electric register |"
    info: "| 1 | Eggshell Canvas | `#fbf5e7` | Default body surface across all content sections |"
    info: "| 2 | Ash Tint | `#c4c4c4` | Subtle alternation within cream content blocks |"
    info: "| 3 | Coffee Band | `#3d2800` | Dark schedule and footer band, inverted type surface |"

  elevation:

    info: "The system is deliberately flat. No drop shadows, no glows, no raised surfaces. Hierarchy comes from color contrast (cream → coffee → cobalt), type scale, and the negative space of full-bleed bands — never from z-axis elevation. A pill button on the cobalt hero is the same flat plane as the surface behind it, distinguished only by its 99px radius and inverted fill."

  imagery:

    info: "Imagery is graphic, not photographic. The entire visual identity rests on a single flat-vector sunburst/flower illustration in the hero — eight cream petals, tangerine rays, black-and-white optical center. No photography appears anywhere on the site. Sponsor marks are the only secondary visual content, presented as monochrome black wordmarks on cream cells. Icons are minimal: a tiny circular tangerine sunburst, a right-arrow glyph, and clean geometric utility marks. The aesthetic is risograph-printed-poster — bold flat shapes, tight ink coverage, and a single saturated burst of color as the visual exclamation point."

  layout:

    info: "The page model is full-bleed with no max-width container — every section paints its own color edge to edge. The hero is a single 100vh cobalt band with the illustration centered and floating type at the four corners. Below the hero, content lives in cream sections that alternate with one dark coffee-brown band for the schedule. Vertical rhythm is 57-78px between sections. The sponsor wall is a 6-column × 2-row grid with zero cell gap and no card radius — the cell borders compose the grid lines. Text sections use a single wide column rather than multi-column body text. Navigation is a transparent top bar with logo left and four links right; no sticky behavior, no hamburger, no sidebar. The overall feel is closer to a printed broadsheet than a SaaS dashboard — sections stack vertically like pages of a program."

  agent_prompt_guide:

    quick_color_reference:
    - "canvas: #fbf5e7 (Eggshell Cream)"
    - "surface dark: #3d2800 (Coffee Bean)"
    - "hero band: #1673ff (Electric Cobalt)"
    - "text primary: #000000 (Ink Black)"
    - "text on dark: #fbf5e7 (Eggshell Cream)"
    - "accent illustration: #ff7b02 (Tangerine Burn)"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:
    - "Build a full-bleed hero band: #1673ff background, no padding from viewport. Center a flat sunburst illustration (eight #fbf5e7 rounded petals, #ff7b02 ray burst, #000000-and-#fbf5e7 optical center, 60% of viewport height). 'superlocal' wordmark top-left in #fbf5e7 at 17px RST Reactor tracking -0.02em. Four uppercase nav links (INICIO, LINEUP, CRONOGRAMA, CONTACTO) top-right at 12px RST Reactor tracking +0.264px, color #fbf5e7. Bottom-left eyebrow caption at 12px #fbf5e7 tracking +0.264px."
    - "Build a sponsor grid: #fbf5e7 background, 6 equal columns × 2 rows, gap 0, 1px #000000 hairline borders on every cell, zero radius. Each cell holds one monochrome black wordmark centered at 60% cell width. Outer section padding equal to one cell width on left/right so the outer borders align flush with the content edge."
    - "Build a dark schedule band: full-bleed #3d2800 background. Heading 'Cronograma 2025' in #fbf5e7 RST Reactor at 64px, tracking -3.2px, line-height 0.90. Body description in #fbf5e7 at 14px. Below: schedule rows, each with 12px #fbf5e7 uppercase date stamp (tracking +0.264px), 17px #fbf5e7 title (tracking -0.68px), 12px #fbf5e7 meta line — row height 32px, separated by 1px #604106 hairlines."
    - "Build a pill floating action: 99px radius, #fbf5e7 background, padding 8px 16px. Contains a 32×32 white circle holding a miniature tangerine sunburst icon, the label 'RESERVAR ACTIVIDADES' in #3d2800 at 12px tracking +0.264px, and a right-arrow glyph. No shadow. Sits at bottom-right of the hero with 32px edge inset."
    - "Build a footer wordmark: abbreviated 'splcl' in #3d2800 RST Reactor at 14px, top-left of an #fbf5e7 section, 48px top padding, no background, no rules."

  similar_brands:

    - "**Awwwards Conference sites** — Same editorial full-bleed band structure — one saturated color detonates the hero, then a quiet cream/dark rhythm carries the program, with type that swings from tracked uppercase nav to massive geometric display"
    - "**Apple Keynote event pages** — Single full-bleed color hero, a centered graphic as the visual anchor, and a near-monochrome content body below — Superlocal adopts the same architectural restraint but swaps Apple's glass-blue for electric cobalt and white for cream"
    - "**It's Nice That features** — Cream-canvas editorial surfaces, hairline-bordered grid walls for partners, and a custom geometric face used at extreme size contrast — both treat the page as a printed sheet"
    - "**Dropbox Design Open** — Festival-style schedule band in a deep brand color, massive stacked heading pairs ('Cronograma / 2025' mirrors 'Design / Open'), and the editorial use of negative space as the primary layout device"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-cobalt: #1673ff;
          --color-coffee-bean: #3d2800;
          --color-tangerine-burn: #ff7b02;
          --color-eggshell-cream: #fbf5e7;
          --color-ink-black: #000000;
          --color-pale-ash: #c4c4c4;
          --color-mocha: #604106;
        
          /* Typography — Font Families */
          --font-rst-reactor: 'RST Reactor', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 1.2;
          --tracking-micro: 0.5px;
          --text-eyebrow: 12px;
          --leading-eyebrow: 1.2;
          --tracking-eyebrow: 0.264px;
          --text-caption: 14px;
          --leading-caption: 1.41;
          --tracking-caption: -0.28px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.6;
          --tracking-body-sm: -0.32px;
          --text-heading: 64px;
          --leading-heading: 0.9;
          --tracking-heading: -3.2px;
          --text-display: 172px;
          --leading-display: 1;
          --tracking-display: -10.32px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-23: 23px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-57: 57px;
          --spacing-78: 78px;
          --spacing-80: 80px;
          --spacing-104: 104px;
          --spacing-112: 112px;
          --spacing-200: 200px;
        
          /* Layout */
          --section-gap: 57-78px;
          --card-padding: 16-24px;
          --element-gap: 10-16px;
        
          /* Border Radius */
          --radius-3xl: 30px;
          --radius-full: 50px;
          --radius-full-2: 99px;
          --radius-full-3: 9999px;
        
          /* Named Radii */
          --radius-tags: 30px;
          --radius-cards: 0px;
          --radius-pills: 99px;
          --radius-buttons: 50px;
        
          /* Surfaces */
          --surface-hero-cobalt: #1673ff;
          --surface-eggshell-canvas: #fbf5e7;
          --surface-ash-tint: #c4c4c4;
          --surface-coffee-band: #3d2800;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-cobalt: #1673ff;
          --color-coffee-bean: #3d2800;
          --color-tangerine-burn: #ff7b02;
          --color-eggshell-cream: #fbf5e7;
          --color-ink-black: #000000;
          --color-pale-ash: #c4c4c4;
          --color-mocha: #604106;
        
          /* Typography */
          --font-rst-reactor: 'RST Reactor', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 1.2;
          --tracking-micro: 0.5px;
          --text-eyebrow: 12px;
          --leading-eyebrow: 1.2;
          --tracking-eyebrow: 0.264px;
          --text-caption: 14px;
          --leading-caption: 1.41;
          --tracking-caption: -0.28px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.6;
          --tracking-body-sm: -0.32px;
          --text-heading: 64px;
          --leading-heading: 0.9;
          --tracking-heading: -3.2px;
          --text-display: 172px;
          --leading-display: 1;
          --tracking-display: -10.32px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-23: 23px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-57: 57px;
          --spacing-78: 78px;
          --spacing-80: 80px;
          --spacing-104: 104px;
          --spacing-112: 112px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-3xl: 30px;
          --radius-full: 50px;
          --radius-full-2: 99px;
          --radius-full-3: 9999px;
        }