air___style_reference:
  info: "> sky canvas, frosted glass"

  theme: "light"

  info: "Air's visual system evokes a serene, cloud-like experience with a dominant blue sky background theme. Its typography balances expressive, custom display fonts for impact with understated, functional text for clarity. UI elements are largely monochromatic, maintaining focus through subtle surface variations and ghost-like components. A single vivid blue accent color is reserved for interactive states, guiding user attention and highlighting primary actions against the expansive, airy backdrop."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Sky Canvas | `#426188` | `--color-sky-canvas` | Dominant page background element, providing depth and a sky-like atmosphere. Also used for some decorative headline coloring and borders |"
    info: "| Action Blue | `#2b7fff` | `--color-action-blue` | Primary accent for interactive elements, such as outlined buttons and links, guiding user actions |"
    info: "| Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text color for headlines and body copy, ensuring high contrast against light surfaces. Used for borders of selected elements |"
    info: "| Cloud White | `#ffffff` | `--color-cloud-white` | Background for primary UI surfaces, headers, and text where contrast is needed against darker elements. Also used for ghost button borders and text |"
    info: "| Charcoal Text | `#1b1b1b` | `--color-charcoal-text` | Secondary text color, providing strong contrast while being slightly softer than pure black. Used for general body text and some borders |"
    info: "| Haze Grey | `#f5f5f5` | `--color-haze-grey` | Subtle background for input fields and less prominent card surfaces, providing visual separation |"

  tokens___typography:

    control___functional_text_across_ui_elements_including_buttons__body_text__links__and_navigation_items__acts_as_the_primary_workhorse_font_for_readability_____font_control:
      - "**Substitute:** Inter"
      - "**Weights:** 500"
      - "**Sizes:** 12px, 13px, 14px, 16px, 20px"
      - "**Line height:** 1.10, 1.40, 1.50"
      - "**Role:** Functional text across UI elements including buttons, body text, links, and navigation items. Acts as the primary workhorse font for readability."

    control_compressed___extremely_large__bold_headlines_used_for_dramatic_impact_and_branding__making_a_statement_through_sheer_scale_and_weight_____font_control_compressed:
      - "**Substitute:** Oswald Bold"
      - "**Weights:** 900"
      - "**Sizes:** 259px"
      - "**Line height:** 0.85"
      - "**Role:** Extremely large, bold headlines used for dramatic impact and branding, making a statement through sheer scale and weight."

    control_cursive___expressive__decorative_headlines__adding_a_touch_of_distinct_personality__used_for_select_section_titles_to_soften_the_brand_s_technical_nature_____font_control_cursive:
      - "**Substitute:** Dancing Script"
      - "**Weights:** 400, 500"
      - "**Sizes:** 20px, 32px, 56px"
      - "**Line height:** 1.00, 1.10, 1.50"
      - "**Role:** Expressive, decorative headlines, adding a touch of distinct personality. Used for select section titles to soften the brand's technical nature."

    control_tnt___secondary_expressive_font_for_occasional_headlines_and_prominent_body_text_accents__offering_a_distinct_visual_texture_____font_control_tnt:
      - "**Substitute:** Space Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 20px, 32px, 56px"
      - "**Line height:** 1.00, 1.10, 1.50"
      - "**Role:** Secondary expressive font for occasional headlines and prominent body text accents, offering a distinct visual texture."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body | 14px | 1.5 | — | `--text-body` |"
      info: "| heading-sm | 20px | 1.1 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 56px | 1 | — | `--text-heading-lg` |"
      info: "| display | 259px | 0.85 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 14px |"
      info: "| links | 8px |"
      info: "| images | 11px |"
      info: "| inputs | 4px |"
      info: "| buttons | 8px |"

    layout:

      - "**Section gap:** 48px"
      - "**Card padding:** 20px"
      - "**Element gap:** 8px"

  components:

    ghost_button:
      role: "Subtle, non-primary action button."

      background: "transparent (rgba(0, 0, 0, 0)), Text: Cloud White (#ffffff), Border: 1px solid Cloud White (#ffffff), Padding: 0px 8px, Radius: 0px. Often used in navigation."

    navigational_button_ghost:
      role: "Navigation button, visually similar to ghost button."

      background: "transparent (rgba(0, 0, 0, 0)), Text: Charcoal Text (#1b1b1b), Border: 1px solid Charcoal Text (#1b1b1b), Radius: 8px, Padding: 0px."

    content_card_transparent:
      role: "Informational card, often used for client logos or features without a distinct background."

      background: "transparent (rgba(0, 0, 0, 0)), Padding: 0px, Radius: 0px, Shadow: none."

    feature_card:
      role: "Elevated card for showcasing features or specific content blocks."

      background: "Haze Grey (#f5f5f5), Padding: 20px, Radius: 12px, Shadow: none."

    image_card:
      role: "Card specifically for framing images, with a distinct radius."

      background: "transparent (rgba(0, 0, 0, 0)), Padding: 0px, Radius: 14px, Shadow: none."

    input_field:
      role: "Standard input field for user data entry."

      background: "Haze Grey (#f5f5f5), Text: Charcoal Text (#1b1b1b), Border: 1px solid rgba(0, 0, 0, 0.1), Radius: 4px, Padding: 10px."

  do_s_and_don_ts:

    do:
      - "Prioritize Cloud White (#ffffff) text on Sky Canvas (#426188) backgrounds for headlines and key information."
      - "Use Action Blue (#2b7fff) exclusively for outlined interactive elements such as links and primary action buttons."
      - "Reserve Control Compressed (weight 900, size 259px) for hero-level headlines to maximize visual impact."
      - "Apply Haze Grey (#f5f5f5) as the background for input fields and subtle card surfaces to differentiate them."
      - "Implement a consistent 8px spacing unit for element gaps, and 48px for vertical section spacing."
      - "Use 14px border radius for content cards and 8px for buttons to maintain a consistent softness."
      - "Utilize Control, weight 500, at sizes 12-20px for all functional text to ensure readability and consistency."

    don_t:
      - "Do not use Action Blue (#2b7fff) as a background for filled content blocks or decorative elements."
      - "Avoid using multiple chromatic colors; limit the palette to Sky Canvas (#426188) and Action Blue (#2b7fff) as primary brand colors."
      - "Do not use hard-edged elements; apply defined border radii of 4px, 8px, 11px, or 14px to all interactive and container elements."
      - "Avoid excessive use of drop shadows; the design relies on surface color differentiation rather than elevation for visual hierarchy."
      - "Do not place body text directly on the Sky Canvas (#426188) background; it has too low contrast. Use neutral surfaces instead."
      - "Do not vary line heights randomly; adhere to the specified 1.0, 1.1, 1.4, and 1.5 ratios for consistent vertical rhythm."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Sky Canvas | `#426188` | Primary background for the page, setting the overall atmospheric tone. |"
    info: "| 2 | Haze Grey | `#f5f5f5` | Background for input fields and subtle feature cards, providing a slightly elevated surface. |"
    info: "| 3 | Cloud White | `#ffffff` | Background for primary UI elements like headers and navigation, offering clean contrast. |"

  elevation:

    info: "The design strongly minimizes shadows, opting instead for background blur (`backdrop-filter: blur(12px)`) and distinct surface colors to convey depth and hierarchy. The absence of heavy shadows contributes to the 'airy' and light aesthetic."

  imagery:

    info: "Imagery primarily features product concepts, often with abstract or stylized representations of data and workflows. There are also product shots of various digital devices, usually contained within cards. Icons are subtle, monochromatic, and usually outlined. The overall imagery is sparse, focusing on explaining product functionalities rather than lifestyle; when present, visuals often employ backdrop-filter blurring to create a 'frosted glass' effect, integrating seamlessly with the sky canvas background."

  layout:

    info: "The page layout is primarily full-bleed, extending content to the viewport edges, with a strong emphasis on consistent vertical spacing. The hero section is full-bleed, featuring large typographic elements centered over the background. Subsequent sections often include alternating content blocks (e.g., text on left, image on right) and grid-based arrangements for features. Navigation is a sticky top bar with ghost buttons and a prominent outlined 'Start for free' button, suggesting availability across the entire experience. Sections maintain a comfortable density, preventing information overload within the expansive background."

  agent_prompt_guide:

    create_an_outlined_primary_action: "Transparent background, #2b7fff border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button."

    info: "Example Component Prompts:"
    - "Create a primary outlined button: Background transparent, text Action Blue (#2b7fff), border 1px solid Action Blue (#2b7fff), radius 8px, padding 10px 20px. Text 'Get started' using Control font, weight 500, size 16px."
    - "Create a heading section: Background Sky Canvas (#426188), headline 'Human creativity. AI scale.' using Control Cursive, weight 500, size 56px, color Cloud White (#ffffff). Below it, a ghost button with a Cloud White (#ffffff) border, Cloud White (#ffffff) text, radius 8px, 'Get some Air' in Control font, weight 500, size 16px."
    - "Create a feature card: Background Haze Grey (#f5f5f5), padding 20px, radius 12px. Inside, a heading 'Understand your library' using Control font, weight 500, size 20px, color Charcoal Text (#1b1b1b), followed by body text using Control font, weight 500, size 14px, color Charcoal Text (#1b1b1b)."

  similar_brands:

    - "**Figma** — Clear, functional typography combined with a minimalist UI and a single primary accent color."
    - "**Notion** — Reliance on subtle grey surface variations and ghost-like interactive elements for a sense of spaciousness."
    - "**Webflow** — Use of large, expressive display typography in hero sections contrasted with clean body text."
    - "**Linear** — Focus on high-contrast text and interactive elements against a largely monochromatic background, with limited use of color."
    - "**Dropbox** — Clean, spacious UI with an emphasis on content and clear call-to-actions without heavy visual adornment."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-sky-canvas: #426188;
          --color-action-blue: #2b7fff;
          --color-midnight-ink: #000000;
          --color-cloud-white: #ffffff;
          --color-charcoal-text: #1b1b1b;
          --color-haze-grey: #f5f5f5;
        
          /* Typography — Font Families */
          --font-control: 'Control', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-compressed: 'Control Compressed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-cursive: 'Control Cursive', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-tnt: 'Control TNT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.1;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1;
          --text-display: 259px;
          --leading-display: 0.85;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --section-gap: 48px;
          --card-padding: 20px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-xl: 14px;
        
          /* Named Radii */
          --radius-cards: 14px;
          --radius-links: 8px;
          --radius-images: 11px;
          --radius-inputs: 4px;
          --radius-buttons: 8px;
        
          /* Surfaces */
          --surface-sky-canvas: #426188;
          --surface-haze-grey: #f5f5f5;
          --surface-cloud-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-sky-canvas: #426188;
          --color-action-blue: #2b7fff;
          --color-midnight-ink: #000000;
          --color-cloud-white: #ffffff;
          --color-charcoal-text: #1b1b1b;
          --color-haze-grey: #f5f5f5;
        
          /* Typography */
          --font-control: 'Control', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-compressed: 'Control Compressed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-cursive: 'Control Cursive', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-control-tnt: 'Control TNT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.1;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1;
          --text-display: 259px;
          --leading-display: 0.85;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-xl: 14px;
        }