ori___style_reference:
  info: "> Server-room at midnight — black void, white light, one ignited switch."

  theme: "dark"

  info: "Radiant (formerly Ori) operates in a dark infrastructure-at-night language: pure black canvas, bright white typography at whisper-light weight, and a single saturated orange that ignites action and full-bleed statements. The visual grammar borrows from data-center photography — server racks, neon edge-lights, and hard architectural lines — and translates that into UI: zero border-radius on interactive elements, hairline borders, and monospaced labels that feel like terminal readouts. Headlines in TWK Everett at weight 300 create a cool, confident scale that never shouts; orange is rationed for CTAs, one full-bleed band, and accent details, making it feel like a power-on indicator rather than decoration. The system is text-forward and cinematic — large type breathes against dark voids, sections alternate between black and orange with no gradients or shadows to soften transitions."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ember Orange | `#ff4f2b` | `--color-ember-orange` | Orange action color for filled buttons, selected navigation states, and focused conversion moments. |"
    info: "| Void Black | `#000000` | `--color-void-black` | Page canvas, hero background, card surface base, footer — the dominant stage on which everything floats |"
    info: "| Carbon | `#1a1a1a` | `--color-carbon` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. |"
    info: "| Graphite Border | `#3c3c3c` | `--color-graphite-border` | Hairline dividers, ghost button borders, section separators — barely-there structural lines |"
    info: "| Steel Mid | `#737373` | `--color-steel-mid` | Secondary metadata, timestamps, muted labels, tertiary body copy |"
    info: "| Fog Light | `#bfbfbf` | `--color-fog-light` | Card borders on dark surfaces, secondary text, dimmed paragraph copy — a lighter neutral for readability without full white |"
    info: "| Bone White | `#f5f5f5` | `--color-bone-white` | Primary text, headlines, nav items, icon strokes, ghost button borders — the luminous text color across all dark surfaces |"

  tokens___typography:

    twk_everett___display_and_heading_family__weight_300_at_60_96px_for_hero_headlines__we_are_powered_intelligence____light_weight_at_massive_sizes_gives_a_cool__architectural_feel__weight_400_for_section_headings__weight_700_for_emphasized_words_inside_headlines__negative_tracking_tightens_the_scale_____font_twk_everett:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 300, 400, 700"
      - "**Sizes:** 24px, 36px, 48px, 60px, 72px, 96px"
      - "**Line height:** 0.95–1.30"
      - "**Letter spacing:** -0.0110em"
      - "**Role:** Display and heading family. Weight 300 at 60–96px for hero headlines ('We Are Powered Intelligence') — light weight at massive sizes gives a cool, architectural feel. Weight 400 for section headings. Weight 700 for emphasized words inside headlines. Negative tracking tightens the scale."

    switzer___body_text_and_primary_paragraph_copy__the_neutral_geometric_grotesque_companion_to_everett_s_sharper_display_cut__16px_for_standard_body__18px_for_hero_subtext_and_larger_paragraphs_____font_switzer:
      - "**Substitute:** Inter, Söhne, Untitled Sans"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 18px"
      - "**Line height:** 1.40"
      - "**Role:** Body text and primary paragraph copy. The neutral geometric grotesque companion to Everett's sharper display cut. 16px for standard body, 18px for hero subtext and larger paragraphs."

    chivo_mono___monospaced_labels__nav_items__buttons__tags__metadata__author___01__section_numbers__button_text__gives_the_system_a_terminal_data_center_texture___every_label_reads_like_a_system_status_readout_____font_chivo_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, Space Mono"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 1.00–1.40"
      - "**Role:** Monospaced labels, nav items, buttons, tags, metadata ('AUTHOR:', '01' section numbers, button text). Gives the system a terminal/data-center texture — every label reads like a system status readout."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.2 | — | `--text-caption` |"
      info: "| body | 16px | 1.4 | — | `--text-body` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.26px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | -0.4px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.1 | -0.53px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -0.79px | `--text-display` |"
      info: "| display-lg | 96px | 0.95 | -1.06px | `--text-display-lg` |"

  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: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 92 | 92px | `--spacing-92` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 48-80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    announcement_bar:
      role: "Slim top banner for system-level messages (mergers, updates)"

      info: "Full-bleed #1a1a1a background, single line of centered 14px Switzer text in #f5f5f5, 4–8px vertical padding. Inline links in #ff4f2b. No border-radius."

    primary_navigation:
      role: "Top-level site navigation"

      info: "Transparent or #000000 background, 40px horizontal padding. Wordmark 'RADIANT' left-aligned in 16px Chivo Mono weight 400. Nav items in 14px Chivo Mono, uppercase, #f5f5f5 text, 16–24px gap. Contact CTA as filled orange button (#ff4f2b bg, #000000 text, 8px 16px padding, 0 radius). Login as ghost button (#f5f5f5 border, #f5f5f5 text, 0 radius)."

    filled_cta_button:
      role: "Primary action trigger"

      info: "Background #ff4f2b, text #000000, 14px Chivo Mono weight 400 uppercase, 8px 16px padding, 0 border-radius, no border. Tight, rectangular, terminal-button feel."

    ghost_button:
      role: "Secondary action or outlined trigger"

      info: "Transparent background, 1px solid #f5f5f5 border, #f5f5f5 text, 14px Chivo Mono uppercase, 8px 16px padding, 0 border-radius. Inverts on hover (fills with #f5f5f5, text goes #000000)."

    hero_section:
      role: "First-screen brand statement"

      info: "Full-viewport #000000 background, optional dark photographic overlay (server rooms with orange light streaks). Headline in TWK Everett weight 300 at 72–96px, #f5f5f5 with one word or phrase in #ff4f2b for emphasis. Body subtext in 16–18px Switzer, #f5f5f5, max-width ~540px. Dual CTA row: filled orange + ghost white, 16px gap."

    full_bleed_statement_section:
      role: "Dramatic brand assertion between dark sections"

      info: "Full-width #ff4f2b background, no padding above/below (bleeds to viewport edges). Centered text in TWK Everett weight 400, 36–48px, #000000 color. Typically a single sentence or two. Acts as a visual interruption in the dark rhythm."

    section_header:
      role: "Opening title for content sections"

      info: "Left-aligned title in TWK Everett weight 300, 48–60px, #f5f5f5 on black. Optional large numeric counter (e.g. '01', '02') right-aligned in Chivo Mono 16px, #f5f5f5. Separated from content by 40–48px vertical space."

    news_blog_card:
      role: "Content card for articles, news, resources"

000000_background__no_border_or_shadow__full_bleed_image_at_top_no_radius__edge_to_edge__20_24px_padding_below_image__author_meta_in_12_14px_chivo_mono_uppercase__f5f5f5__title_in_twk_everett_weight_400__24px__f5f5f5__excerpt_in_14px_switzer__bfbfbf__2_3_line_clamp___read_more__link_in_14px_chivo_mono__ff4f2b:

    dark_input_field:
      role: "Text input for forms"

      info: "Background #1a1a1a, 1px solid #3c3c3c border, 0 border-radius. Text in 14–16px Switzer, #f5f5f5. Placeholder in #737373. No visible focus ring — relies on border color shift to #ff4f2b on focus."

    data_center_product_screenshot:
      role: "Product/UI showcase within content sections"

      info: "Dark product UI mockup floating on #000000, no border or shadow treatment, slight rotation or overlap with text. Appears as a 'device floating in the void' rather than a framed screenshot."

    footer:
      role: "Site footer"

000000_background__40px__padding__wordmark___nav_columns_in_14px_chivo_mono__f5f5f5_text_with_737373_secondary__no_dividers_or_boxes___flat_columns_of_text:

  do_s_and_don_ts:

    do:
      - "Use 0px border-radius on every button, card, input, and badge — the sharp rectangular geometry is structural, not aesthetic"
      - "Set hero and section headlines in TWK Everett weight 300 at 60–96px — the light weight at scale is the system's signature confidence move"
      - "Use Chivo Mono at 14px for all labels, nav items, buttons, and metadata — the monospace texture makes the UI feel like a control panel"
      - "Reserve #ff4f2b for filled CTAs, one full-bleed statement band per page, and key emphasis words in headlines — rationing it keeps it powerful"
      - "Use #f5f5f5 on #000000 for all primary text — the 19.3:1 contrast ratio is the default readable state"
      - "Alternate sections between #000000 canvas and one #ff4f2b full-bleed band to create binary color rhythm across the page"
      - "Apply 1px solid #3c3c3c or #bfbfbf hairlines for borders and dividers — never use shadows for depth"

    don_t:
      - "Do not add border-radius to any element — even 2px or 4px breaks the architectural language"
      - "Do not use drop shadows, glows, or blurred elevation — depth comes from surface color shifts, not shadows"
      - "Do not use #ff4f2b for body text, decorative backgrounds, or non-interactive accent fills — it must mean 'action' or 'ignition'"
      - "Do not set headlines in weight 700 or 900 — the whisper-weight 300–400 range is the signature; bold kills the cool scale"
      - "Do not use rounded or pill-shaped buttons — stay rectangular and terminal"
      - "Do not introduce gradients, soft pastels, or warm secondary colors — the palette is binary: black, white, and one orange"
      - "Do not use lifestyle photography, illustrations, or decorative iconography — imagery is restricted to dark architectural/infrastructure photography"

  elevation:

    info: "The system intentionally avoids shadows. Depth is communicated through surface color (black → carbon), full-bleed color interruptions (orange bands), and photographic overlays — not drop shadows or glows. Everything sits flush on the void. Where a component needs separation, a 1px hairline border in #3c3c3c or #bfbfbf does the work."

  imagery:

    photography_is_cinematic_and_dark: "server-rack interiors, data-center corridors, architectural grids, industrial infrastructure. Images are full-bleed with no border-radius, often overlaid with dark gradients to maintain text legibility. The aesthetic is 'infrastructure at night' — no people, no lifestyle, no warmth. News/blog thumbnails lean toward abstract architectural and technology photography (scaled surfaces, server arrays, patterned facades). Iconography is minimal — thin-stroke monochrome icons in #f5f5f5, consistent with the monospaced label system. No illustrations or 3D renders; the visual story is told through photography and type."

  layout:

    info: "Full-bleed dark sections with no visible container borders. Page max-width 1280px centered for text content, but images and full-bleed bands break out to viewport edges. Hero is left-aligned text stack with dark photographic right-side or full background. Sections alternate between black and one orange full-bleed statement band, creating a binary color rhythm. Content sections use a 2-column layout (text-left / product-screenshot-right) and a 3-column card grid for news/resources. Navigation is a single top bar — no sidebar, no mega-menu, no sticky behavior beyond standard scroll. Vertical spacing is generous: 48–80px between sections, 40px between content blocks within a section. The layout is text-forward and cinematic — type breathes against void, not packed into dense grids."

  agent_prompt_guide:

    quick_color_reference:
    - "Text (primary): #f5f5f5"
    - "Background (canvas): #000000"
    - "Border (hairline): #3c3c3c"
    - "Accent / emphasis: #ff4f2b"
    - "Muted text: #bfbfbf or #737373"
    - "Elevated surface: #1a1a1a"
    - "primary action: #ff4f2b (filled action)"

    3_5_example_component_prompts:

    - "Create a Primary Action Button: #ff4f2b background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "**Full-Bleed Statement Band**: Full-width #ff4f2b background, 80px vertical padding. Centered text in TWK Everett weight 400, 36px, #000000, line-height 1.2. Bleeds to all viewport edges — no max-width container."

    - "**News Card**: #000000 background, no border or shadow. Full-bleed image at top (16:9 ratio, no radius, edge-to-edge). 24px padding below image. Author label in 12px Chivo Mono uppercase, #f5f5f5, letter-spacing normal. Title in TWK Everett weight 400, 24px, #f5f5f5, line-height 1.3. Excerpt in 14px Switzer, #bfbfbf, 2-line clamp. 'READ MORE' link in 14px Chivo Mono uppercase, #ff4f2b, no underline."

    - "**Dark Input Field**: Background #1a1a1a, 1px solid #3c3c3c border, 0 border-radius, 12px 16px padding. Text in 16px Switzer, #f5f5f5. Placeholder in 16px Switzer, #737373. On focus: border becomes #ff4f2b."

    - "**Section Header**: Left-aligned title in TWK Everett weight 300, 60px, #f5f5f5, letter-spacing -0.66px. Right-aligned counter '01' in Chivo Mono 16px, #f5f5f5. 48px vertical space below before content begins."

  border_radius_philosophy:

    info: "All interactive elements and containers use 0px border-radius. The system is intentionally sharp and rectangular. This is a load-bearing design choice: it reinforces the industrial/architectural/infrastructure metaphor. Every button, card, input, and badge is a flat rectangle. Do not round corners on anything. This is not minimalism — it's structural language."

  similar_brands:

    - "**CoreWeave** — Same dark void canvas, single neon accent color (green or orange), large light-weight display headlines, infrastructure-photography hero — AI/cloud provider visual grammar"
    - "**Lambda Labs** — Dark-mode GPU cloud branding with rationed accent color, monospaced labels, sharp rectangular buttons, and data-center hero imagery"
    - "**Anthropic** — Dark surfaces with warm accent (terracotta/orange), large light-weight serif-inspired display type, generous breathing room, terminal-style mono labels"
    - "**Together AI** — Black canvas, single saturated accent, bold display type at extreme sizes, infrastructure/AI positioning with photographic server imagery"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ember-orange: #ff4f2b;
          --color-void-black: #000000;
          --color-carbon: #1a1a1a;
          --color-graphite-border: #3c3c3c;
          --color-steel-mid: #737373;
          --color-fog-light: #bfbfbf;
          --color-bone-white: #f5f5f5;
        
          /* Typography — Font Families */
          --font-twk-everett: 'TWK Everett', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-chivo-mono: 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.26px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.4px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.53px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.79px;
          --text-display-lg: 96px;
          --leading-display-lg: 0.95;
          --tracking-display-lg: -1.06px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-92: 92px;
          --spacing-180: 180px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 48-80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ember-orange: #ff4f2b;
          --color-void-black: #000000;
          --color-carbon: #1a1a1a;
          --color-graphite-border: #3c3c3c;
          --color-steel-mid: #737373;
          --color-fog-light: #bfbfbf;
          --color-bone-white: #f5f5f5;
        
          /* Typography */
          --font-twk-everett: 'TWK Everett', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-chivo-mono: 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.2;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.26px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.4px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.53px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -0.79px;
          --text-display-lg: 96px;
          --leading-display-lg: 0.95;
          --tracking-display-lg: -1.06px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-92: 92px;
          --spacing-180: 180px;
        }