superhi_basic_income___style_reference:
  info: "> violet column beside white broadsheet"

  theme: "light"

  info: "SuperHi Basic Income is a two-color editorial system: a permanent electric-violet column anchored to the left edge, a white broadsheet of generous typography scrolling to its right. The palette is ruthlessly binary — #2727e6 and #ffffff — with no shadows, gradients, or secondary surfaces to dilute the message. Typography carries all the personality: Basis (a geometric sans) handles every functional role, DDC (a more humanist display face) appears only where character is needed, and line heights breathe generously (1.46–1.67 for body text). Components are flat and shape-defined — pill tags at 50px radius, softly rounded buttons at 16px, a dotted globe illustration as the only graphic. The mood is campaign-poster confidence: one loud color, zero decoration, and text that does the heavy lifting."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Iris | `#2727e6` | `--color-electric-iris` | Violet accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Right content canvas, card and elevated surfaces, sidebar text and illustration on the violet panel |"

  tokens___typography:

    basis_grotesque___the_workhorse___body__buttons__links__most_headings__sidebar_labels__and_numbered_list_markers__weight_500_carries_buttons_and_emphasized_inline_text__700_is_reserved_for_strong_emphasis_within_body_copy__its_geometric_neutrality_lets_the_single_accent_color_do_the_talking_____font_basis_grotesque:
      - "**Substitute:** Basis Grotesque (free, Indian Type Foundry) → Inter, Söhne, or IBM Plex Sans"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 13, 14, 16, 21, 24, 32, 48px"
      - "**Line height:** 1.14–1.67"
      - "**Letter spacing:** normal at all sizes"
      - "**Role:** The workhorse — body, buttons, links, most headings, sidebar labels, and numbered list markers. Weight 500 carries buttons and emphasized inline text, 700 is reserved for strong emphasis within body copy. Its geometric neutrality lets the single accent color do the talking."

    ddc___a_more_humanist_display_face_used_sparingly_for_select_headings_where_a_softer__less_geometric_voice_is_wanted__its_tight_line_height_1_00_1_14_is_the_signature__ddc_pulls_double_duty_as_type_and_as_a_graphical_block__substitute_with_a_humanist_sans_that_has_stronger_character_than_basis___s_hne_breit__abc_diatype_mono__or_tiempos_headline_at_low_weight_____font_ddc:
      - "**Substitute:** ABC Diatype, Söhne Breit, or PP Neue Montreal"
      - "**Weights:** 400"
      - "**Sizes:** 21, 24px"
      - "**Line height:** 1.00–1.14"
      - "**Role:** A more humanist display face used sparingly for select headings where a softer, less geometric voice is wanted. Its tight line height (1.00–1.14) is the signature: DDC pulls double duty as type and as a graphical block. Substitute with a humanist sans that has stronger character than Basis — Söhne Breit, ABC Diatype Mono, or Tiempos Headline at low weight."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.46 | — | `--text-caption` |"
      info: "| body | 16px | 1.67 | — | `--text-body` |"
      info: "| subheading | 21px | 1.33 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.17 | — | `--text-heading` |"
      info: "| display | 48px | 1.14 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 50px |"
      info: "| cards | 0px |"
      info: "| buttons | 16px |"

    layout:

      - "**Section gap:** 64px"
      - "**Card padding:** 32px"
      - "**Element gap:** 8-16px"

  components:

    fixed_violet_sidebar:
      role: "Brand panel"

      info: "Full-height fixed left column (~33% viewport width), #2727e6 background, contains dotted globe illustration centered vertically, brand wordmark 'SUPERHI BASIC INCOME' at top in white uppercase, and status label 'APPLICATIONS CLOSED' at bottom — all white text on violet. No padding inside, but elements align to a central vertical axis."

    sidebar_wordmark:
      role: "Brand label"

      info: "White uppercase text on #2727e6, Basis 14px weight 500, centered horizontally in sidebar, with a 1px white horizontal rule below it as a divider. Sits at the top of the sidebar."

    sidebar_status_label:
      role: "Status indicator"

      info: "White uppercase text on #2727e6, Basis 14px weight 500, centered horizontally at the bottom of the sidebar, preceded and followed by short white horizontal rules — functions as a 'closed' stamp."

    dotted_globe_illustration:
      role: "Sole graphic element"

      info: "White dot-matrix sphere on #2727e6 sidebar, takes ~60% of sidebar height, centered. Several larger solid white dots scattered across the sphere surface act as location markers. No animation, no labels — pure texture."

    display_heading:
      role: "Section opener"

      info: "Basis 48px weight 400, #2727e6, line-height 1.14, tight letter-spacing. Used for the page-level hero statement. Can be 2–4 lines, left-aligned within the right content column."

    section_heading:
      role: "Content section label"

      info: "Basis 32px weight 400, #2727e6, line-height 1.17, sits in the left sub-column of the right content area. Acts as the 'title' for each content block, paired with a longer body in the right sub-column."

    subheading_ddc_variant:
      role: "Character heading"

      info: "DDC 21–24px weight 400, #2727e6, line-height 1.00–1.14. Reserved for moments needing typographic warmth — used 1–2 times per page max. Its tight leading makes it read almost as a shape."

    body_text:
      role: "Long-form copy"

      info: "Basis 16px weight 400, #2727e6, line-height 1.67 (the most generous in the system). Long paragraphs encouraged — the generous leading signals editorial confidence rather than UI density."

    underlined_inline_link:
      role: "Text link"

      info: "Basis 14–16px weight 500, #2727e6, with a 1px #2727e6 underline at baseline. No hover state change needed — the entire system is static. Underline is always present, never removed on hover."

    outlined_action_button:
      role: "Primary interactive element"

      info: "White background, 1.5px solid #2727e6 border, 16px border-radius, padding 8px 16px (or 16px 32px for larger versions), Basis 14–16px weight 500, #2727e6 text. This is the only button variant — the system never uses filled buttons. ACTION_BORDER=176 confirms this is the primary interactive treatment."

    pill_tag___status_pill:
      role: "Compact label"

2727e6_background__50px_border_radius_fully_rounded__white_text__basis_13px_weight_500__padding_4px_8px__used_sparingly_for_inline_metadata_or_small_status_labels:

    numbered_list_item:
      role: "Ordered list"

      info: "Each item opens with a circled number (① ② ③) in #2727e6, followed by Basis 16px weight 500 #2727e6 heading text, then a Basis 16px weight 400 description below. Spacing between items: 24px."

    arrow_bullet_list_faq:
      role: "Disclosure / question list"

      info: "Each item prefixed with a right-pointing triangle marker (▸) in #2727e6, text is Basis 16px weight 500 #2727e6, vertically spaced 8px apart. Used for FAQ-style question lists."

    two_column_content_block:
      role: "Layout primitive"

      info: "The right content area is internally split: a narrow left sub-column (~40%) holds the section heading in Basis 32px, a wider right sub-column (~60%) holds the body text and links. Column gap is 32–48px. This nested two-column pattern repeats down the page."

  do_s_and_don_ts:

    do:
      - "Use only #2727e6 and #ffffff — never introduce a third color, a gradient, or a shadow"
      - "Set body line-height to 1.67 and display line-height to 1.14 — the breathing room IS the typographic system"
      - "Make the left sidebar a fixed full-height #2727e6 panel with the dotted globe and white sidebar text; treat it as a permanent brand surface, not a navigation widget"
      - "Use the outlined button (1.5px #2727e6 border, 16px radius, white fill) as the only action variant — never create a filled button"
      - "Use Basis for everything functional and reserve DDC for 1–2 display moments per page where humanist character is needed"
      - "Use 50px radius for tags and 16px radius for buttons — the two-value radius system is the complete shape language"
      - "Underline every link with a 1px #2727e6 rule at baseline; never remove the underline on hover since the system is static"

    don_t:
      - "Do not add a third color, a muted neutral gray for secondary text, or a tinted background — all non-white surfaces must be #2727e6 or pure white"
      - "Do not add drop shadows, inner shadows, or glow effects — the system is completely flat and any elevation will feel foreign"
      - "Do not fill buttons with #2727e6 — the system is outlined-only; a filled button would break the editorial restraint"
      - "Do not use DDC for body text, buttons, or functional UI — it is a display face for 1–2 moments per page max"
      - "Do not use border-radius values outside 0, 16px, and 50px — there are exactly two rounded shapes in the system and everything else is square"
      - "Do not break the split-screen layout with a top navigation bar, hamburger menu, or sidebar collapse — the violet column is permanent"
      - "Do not set body line-height below 1.46 or display line-height above 1.25 — the tight-display / loose-body rhythm defines the typographic voice"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Violet Column | `#2727e6` | Fixed full-height left sidebar — the brand surface that anchors the layout |"
    info: "| 1 | Paper Canvas | `#ffffff` | Main content area to the right of the sidebar; the only place body copy, links, and headings live |"

  elevation:

    info: "No shadows. The system is completely flat — visual hierarchy comes from the two-color contrast, typographic scale, and generous whitespace, never from elevation. Any shadow would break the broadsheet metaphor."

  imagery:

    info: "Almost no imagery. The only visual asset is a hand-drawn-style dotted globe illustration rendered in white dots on the violet sidebar — a dot-matrix sphere that occupies the entire left column. No photography, no product screenshots, no decorative icons, no avatars. Where icons appear (checklist circles, arrow markers, circled numbers) they are pure typographic Unicode characters in #2727e6, not graphic assets. The page is overwhelmingly text-dominant; the globe is the visual punctuation."

  layout:

    split_screen: "a fixed left sidebar (~33% viewport width) stays locked on screen in solid #2727e6, while the right ~67% scrolls independently as a white content canvas. Within the right canvas, content is organized into a nested two-column grid — a narrow heading sub-column on the left and a wider body sub-column on the right, separated by 32–48px. Major sections (hero, 'Free money', 'Got a question?', 'Further reading') are stacked vertically with 64px between them. The sidebar never changes — it carries the brand wordmark, globe illustration, and status label from top to bottom. Navigation is minimal: no top bar, no hamburger, no breadcrumbs — the sidebar IS the navigation. Content density is comfortable: paragraphs are long but breathing room between blocks is generous, giving the page an editorial broadsheet rhythm rather than a dense product UI feel."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #2727e6"
    - "background: #ffffff"
    - "sidebar / brand surface: #2727e6"
    - "border (outlined actions, link underlines): #2727e6"
    - "primary action: #2727e6 (outlined action border)"

  example_component_prompts:
    - "**Create a hero section**: Permanent #2727e6 sidebar (~33% width) on the left with a white dotted-globe illustration centered vertically and white uppercase 'SUPERHI BASIC INCOME' wordmark at top. White right canvas with a display heading: Basis 48px weight 400, #2727e6, line-height 1.14. Subhead: Basis 21px weight 500, #2727e6, line-height 1.33."

    - "**Create an outlined action button**: White fill, 1.5px solid #2727e6 border, 16px border-radius, 8px 16px padding, Basis 14px weight 500, #2727e6 text. No hover state, no shadow. This is the only button variant in the system."

    - "**Create a pill tag**: #2727e6 background, 50px border-radius, white text, Basis 13px weight 500, 4px 8px padding. Used for compact inline labels only."

    - "**Create a two-column content block**: Left sub-column (~40% width) with Basis 32px weight 400 #2727e6 heading, line-height 1.17. Right sub-column (~60% width) with Basis 16px weight 400 #2727e6 body, line-height 1.67. 48px gap between columns. 64px gap between this block and the next."

    - "**Create a numbered list**: Each item starts with a circled Unicode number (① ② ③) in #2727e6, then a Basis 16px weight 500 heading line, then a Basis 16px weight 400 description line. 24px vertical gap between items."

  similar_brands:

    - "**Stripe Press** — Same editorial broadsheet approach — white canvas, single accent color, generous typography, minimal decoration, text that carries the entire visual weight"
    - "**Substack** — Similar two-column newsletter layout with a persistent left brand column and white content reading area, plus the same restraint to a two-color palette"
    - "**Kickstarter campaign pages** — Same single-accent-color campaign-poster energy with a flat layout, large display text, and an emphasis on the proposition rather than UI chrome"
    - "**Mubi** — Editorial single-accent discipline with a strong typographic voice and no decorative imagery beyond a few signature graphic elements"
    - "**Notion** — Ruthless two-color simplicity and zero-shadow flat surfaces; both systems prove that one chromatic color plus white is enough to carry a brand"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-iris: #2727e6;
          --color-paper-white: #ffffff;
        
          /* Typography — Font Families */
          --font-basis-grotesque: 'Basis Grotesque', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ddc: 'DDC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.46;
          --text-body: 16px;
          --leading-body: 1.67;
          --text-subheading: 21px;
          --leading-subheading: 1.33;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --text-heading: 32px;
          --leading-heading: 1.17;
          --text-display: 48px;
          --leading-display: 1.14;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
        
          /* Layout */
          --section-gap: 64px;
          --card-padding: 32px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-full: 50px;
        
          /* Named Radii */
          --radius-tags: 50px;
          --radius-cards: 0px;
          --radius-buttons: 16px;
        
          /* Surfaces */
          --surface-violet-column: #2727e6;
          --surface-paper-canvas: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-iris: #2727e6;
          --color-paper-white: #ffffff;
        
          /* Typography */
          --font-basis-grotesque: 'Basis Grotesque', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ddc: 'DDC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.46;
          --text-body: 16px;
          --leading-body: 1.67;
          --text-subheading: 21px;
          --leading-subheading: 1.33;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --text-heading: 32px;
          --leading-heading: 1.17;
          --text-display: 48px;
          --leading-display: 1.14;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-full: 50px;
        }