splice___style_reference:
  info: "> midnight recording studio — a dark, weightless space where the only thing that ever gets loud is the music."

  theme: "dark"

  info: "Splice operates as a midnight recording studio: deep charcoal canvases, near-borderless surfaces, and a single electric blue accent that cuts through the darkness like a signal light. Typography splits between SoehneBreit at whisper-weight for editorial headlines and Inter Variable as the dense workhorse, creating a deliberate contrast between performance and utility. Components stay flat and weightless — cards sit on near-identical surface tones, shadows are replaced by hairline inset strokes, and elevation comes from the photography itself. Color is rationed: one blue carries links and interactive elements, a saturated yellow-green appears as rare text punctuation, and everything else recedes into grayscale. The product — sound — is the only thing that ever gets loud."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Blue | `#528fff` | `--color-signal-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Button Blue | `#1253ff` | `--color-button-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Voltage Yellow | `#f1f607` | `--color-voltage-yellow` | Rare text accent — highlight punctuation, featured labels, emphasis. Used sparingly, only when a word needs to flash against the dark canvas. Never on backgrounds |"
    info: "| Carbon | `#121214` | `--color-carbon` | Primary page canvas, card surfaces, input fields, footer. The dominant working surface at 425 occurrences across every context |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Deepest dark — image containers, nav surface, full-bleed backgrounds. Creates the bottom of the surface stack |"
    info: "| Platinum | `#ffffff` | `--color-platinum` | Primary text, inverted button text, icon fills. The only true white in the system; appears 1506 times across every text context |"
    info: "| Graphite | `#232426` | `--color-graphite` | Dominant canvas background, secondary button surface. Sits one step lighter than Carbon, used when a surface needs to feel like a different plane without using shadow |"
    info: "| Fog | `#a6a8ad` | `--color-fog` | Muted text, nav items, secondary labels, inactive links. The first step down from white in the type hierarchy |"
    info: "| Ash | `#c8c9cc` | `--color-ash` | Button borders, icon strokes, hairline dividers, ghost control outlines. The border that doesn't feel like a border |"
    info: "| Slate | `#63656d` | `--color-slate` | Borders, dividers, inactive controls. Darker than Ash for when a divider needs to recede further |"
    info: "| Iron | `#45464d` | `--color-iron` | Elevated surfaces, button borders, nav separators. The highest dark in the stack — used for the 1px inset stroke that replaces shadows |"

  tokens___typography:

    intervariable_custom___workhorse_for_all_ui_text___body__nav__buttons__inputs__cards__footer__the_variable_axis_allows_weight_shifts_400_500_600_700_within_a_single_family__universal__0_015em_tracking_creates_a_compact__efficient_reading_rhythm_across_every_size_____font_intervariable_custom:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12, 13, 14, 16, 18, 20, 26"
      - "**Line height:** 1.20, 1.25, 1.43, 1.50"
      - "**Letter spacing:** -0.0150em"
      - "**Role:** Workhorse for all UI text — body, nav, buttons, inputs, cards, footer. The variable axis allows weight shifts (400→500→600→700) within a single family. Universal -0.015em tracking creates a compact, efficient reading rhythm across every size."

    soehnebreit_custom___editorial_display_headlines__the_wider__geometric_cut_of_soehnebreit_at_weight_400_creates_a_distinctive_voice___headlines_don_t_shout__they_announce_with_quiet_authority__the_0_071em_tracking_applied_at_14px_appears_on_uppercase_eyebrow_labels__creating_the_system_s_only_wide_tracked_text__weight_400_only___bold_is_never_used_____font_soehnebreit_custom:
      - "**Substitute:** Inter (with +2% horizontal scaling and 0.071em tracking on uppercase)"
      - "**Weights:** 400"
      - "**Sizes:** 14, 28, 36, 48, 54"
      - "**Line height:** 1.25, 1.43"
      - "**Letter spacing:** -0.0150em, 0.0710em"
      - "**Role:** Editorial display headlines. The wider, geometric cut of SoehneBreit at weight 400 creates a distinctive voice — headlines don't shout, they announce with quiet authority. The 0.071em tracking (applied at 14px) appears on uppercase eyebrow labels, creating the system's only wide-tracked text. Weight 400 only — bold is never used."

    soehne_custom___subheadings___bridges_the_gap_between_soehnebreit_display_and_inter_body__used_at_20px_for_secondary_headings_that_need_editorial_weight_without_display_scale_____font_soehne_custom:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 20"
      - "**Line height:** 1.25"
      - "**Letter spacing:** -0.0150em"
      - "**Role:** Subheadings — bridges the gap between SoehneBreit display and Inter body. Used at 20px for secondary headings that need editorial weight without display scale."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | -0.18px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.21px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.24px | `--text-body` |"
      info: "| subheading | 20px | 1.25 | -0.3px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.25 | -0.42px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.25 | -0.54px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.25 | -0.72px | `--text-heading-lg` |"
      info: "| display | 54px | 1.25 | -0.81px | `--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: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 1440px |"
      info: "| cards | 4px |"
      info: "| images | 4px |"
      info: "| inputs | 4px |"
      info: "| buttons | 8px |"
      info: "| pill-buttons | 60px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.07) 0px 0px 0px 1px inset` | `--shadow-subtle` |"

    layout:

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

  components:

    promotional_banner:
      role: "Top-of-page announcement strip"

      info: "Full-width #528fff background, centered white text at 14px Inter weight 400, with an inline link. Padding 8-14px vertical. Sits above the navigation as a separate band."

    navigation_bar:
      role: "Primary site navigation"

      info: "Black (#000000) background, sticky to top. Logo left, link group center (Fog #a6a8ad, 14px Inter, 16-20px horizontal spacing), utility actions right. Inner pill elements use 1440px radius (fully rounded). Height approximately 60px."

    filled_button_primary:
      role: "Interactive action trigger"

1253ff_background__ffffff_text__8px_border_radius__16px_vertical___20px_horizontal_padding__inter_weight_500_600_at_14px__the_system_s_solid_interactive_element___deeper_and_more_grounded_than_the_signal_blue_links:

    ghost_button:
      role: "Secondary interactive trigger"

      info: "Transparent background, #c8c9cc or #ffffff border (1px), #ffffff text, 8px border-radius, 8px vertical / 20px horizontal padding. Inter weight 400-500 at 14px. Used for actions that should not compete with the filled button."

    pill_button:
      role: "Rounded utility button"

      info: "60px border-radius, compact padding (8-10px vertical, 16-20px horizontal). Used for tag-like actions, filter pills, and small interactive chips. Typically #ffffff fill with #000000 text when inverted, or transparent with #ffffff text on dark."

    hero_section:
      role: "Full-bleed landing visual"

      info: "Full-viewport-width photograph (no radius, edge-to-edge). Overlaid text sits left-aligned, 48-54px SoehneBreit weight 400 in #ffffff with -0.72 to -0.81px letter-spacing. Body text at 16-18px Inter in #ffffff or rgba white. A filled blue button sits below the headline at 20px from the last line."

    content_card:
      role: "Grouped content surface"

121214_background__4px_border_radius__20_32px_padding__optional_1px_232426_or_45464d_hairline_border__no_drop_shadow__content_sits_flat_on_the_canvas__separated_only_by_the_surface_tone_shift_and_border_line:

    input_field:
      role: "Text input control"

121214_background__1px_45464d_border__4px_border_radius__12_14px_vertical___16px_horizontal_padding__inter_weight_400_at_14px__placeholder_text_in_fog_a6a8ad__no_focus_glow___the_border_simply_shifts_to_signal_blue_528fff_on_focus:

    inline_link:
      role: "Text-level navigation"

528fff_color__inter_weight_400_500_at_14_16px__no_underline_by_default__underline_appears_on_hover_at_1px_offset__the_system_s_most_used_color___351_occurrences:

    footer:
      role: "Site-bottom content"

000000_background__48px__vertical_padding__inter_12_14px_in_fog_a6a8ad_for_body_text__links_in_ffffff__minimal_visual_weight___the_footer_recedes:

  do_s_and_don_ts:

    do:
      - "Use #528fff Signal Blue for all links and interactive text — it is the system's only persistent color voice"
      - "Apply -0.015em letter-spacing to all text at all sizes for the compact reading rhythm"
      - "Use SoehneBreit weight 400 for headlines — never bold, the whisper-weight is the voice"
      - "Separate surfaces with 1px borders in #45464d or #232426, never with drop shadows"
      - "Use 8px radius for standard buttons and 60px for pill-shaped interactive elements"
      - "Apply 0.071em tracking to uppercase SoehneBreit labels at 14px for the editorial eyebrow pattern"
      - "Let photography provide all visual elevation — full-bleed images carry the weight that shadows would"

    don_t:
      - "Never use #f1f607 Voltage Yellow on backgrounds — it is text-only punctuation"
      - "Don't add drop shadows to cards or panels — the system is intentionally flat"
      - "Never set SoehneBreit to bold weight — it only exists at 400 in this system"
      - "Don't introduce new accent colors — the palette is grayscale plus two signals (blue, yellow-green)"
      - "Avoid pure white backgrounds — the canvas is always Carbon #121214 or Graphite #232426"
      - "Don't center-align body text — left-align for editorial reading rhythm"
      - "Never use more than one chromatic color per component — the system rations color"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Graphite Canvas | `#232426` | Page background — the dominant working surface |"
    info: "| 1 | Carbon | `#121214` | Card surfaces, sections, input fields |"
    info: "| 2 | Obsidian | `#000000` | Deepest dark — full-bleed images, nav surface |"
    info: "| 3 | Iron | `#45464d` | Elevated borders, inset strokes, the system's only 'raised' element |"

  elevation:

    info: "Elevation is intentionally absent. The only shadow in the system is a 1px inset stroke (rgba(0,0,0,0.07) 0px 0px 0px 1px inset) used to create hairline separation on dark surfaces. Cards don't float — they sit on near-identical tones, differentiated only by the 1px border between Carbon and the slightly lighter Iron. This creates a flat, weightless feel appropriate for a creative tool that needs to stay out of the way of the work. If something needs to feel important, it gets a photograph, not a shadow."

  imagery:

    photography_is_the_hero: "full-bleed, atmospheric, and moody. The signature treatment is interior spaces — rooms, studios, domestic environments — captured in dramatic colored light (the green-tinted room in the hero is characteristic). Photography is high-key in color but low-key in contrast, creating a cinematic, almost editorial feel. Images are edge-to-edge with 4px radius or no radius at all, never contained in rounded cards. Product screenshots and illustrations are absent — the photography IS the product communication. The visual density is image-heavy at the hero level, transitioning to text-dominant in body sections."

  layout:

    info: "Full-bleed layout with no content max-width constraint — the nav, hero, and footer all span the full viewport. The hero is a single full-bleed photograph with left-aligned text overlaid in the lower-left quadrant, following a classic editorial pattern. Body content sits centered or left-aligned within the full-width canvas. The promotional banner at the very top is a separate full-width band. Section rhythm is spacious — 80px between major sections, with breathing room around photography. Navigation is a dark sticky top bar with a separated promotional strip above it. The grid is not rigidly columnar at the page level; content blocks are positioned with generous margins, and the only grid structure appears in card clusters and feature lists."

  agent_prompt_guide:

    primary_action: "no distinct CTA color"
    quick_color_reference:
    - "text: #ffffff"
    - "background: #121214"
    - "border: #45464d"
    - "accent: #528fff"
    - "button fill: #1253ff"
    - "highlight: #f1f607"

    example_component_prompts:

    - "Create a full-bleed hero section: a large dark-toned photograph filling the entire viewport with no border-radius. Overlaid in the lower-left, a headline at 54px SoehneBreit weight 400, #ffffff, letter-spacing -0.81px. Below it, a filled blue button (#1253ff background, #ffffff text, 8px radius, 16px 20px padding, Inter weight 500 at 14px)."

    - "Create a content card: #121214 background, 4px border-radius, 1px #45464d border, 24px padding. Headline at 28px SoehneBreit weight 400 in #ffffff, body text at 16px Inter weight 400 in Fog #a6a8ad. No drop shadow."

    - "Create a ghost button: transparent background, 1px #c8c9cc border, #ffffff text, 8px radius, 8px 20px padding, Inter weight 400 at 14px. Include a small play icon (▷) in white to the left of the text."

    - "Create a navigation bar: #000000 background, 60px height, sticky to top. Logo (wordmark in #ffffff, Inter weight 700 at 16px) on the left, nav links (#a6a8ad, Inter weight 400 at 14px, 20px horizontal gap) in the center, and a filled blue button (#1253ff, 8px radius, Inter 14px weight 500) on the right."

    - "Create an input field: #121214 background, 1px #45464d border, 4px border-radius, 12px 16px padding. Placeholder text 'Search samples...' in #a6a8ad, Inter weight 400 at 14px. On focus, border shifts to #528fff."

  similar_brands:

    - "**Spotify** — Dark-mode media platform with a near-monochrome palette and a single green accent — the same rationed-color approach where the product (audio) is the only loud element"
    - "**Bandcamp** — Dark music marketplace with editorial typography and full-bleed album photography — similar weightless surface treatment with hairline separation instead of shadows"
    - "**Native Instruments** — Music production tools with dark UI, condensed type, and minimal chrome — the same professional-tools-meets-creative-tool balance"
    - "**Ableton** — Dark-mode creative software with weightless surfaces and photography-led marketing — the same philosophy of letting the medium (sound/light) do the visual heavy lifting"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-blue: #528fff;
          --color-button-blue: #1253ff;
          --color-voltage-yellow: #f1f607;
          --color-carbon: #121214;
          --color-obsidian: #000000;
          --color-platinum: #ffffff;
          --color-graphite: #232426;
          --color-fog: #a6a8ad;
          --color-ash: #c8c9cc;
          --color-slate: #63656d;
          --color-iron: #45464d;
        
          /* Typography — Font Families */
          --font-intervariable-custom: 'InterVariable (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehnebreit-custom: 'SoehneBreit (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehne-custom: 'Soehne (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.18px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.21px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.24px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.3px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.42px;
          --text-heading: 36px;
          --leading-heading: 1.25;
          --tracking-heading: -0.54px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: -0.72px;
          --text-display: 54px;
          --leading-display: 1.25;
          --tracking-display: -0.81px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --section-gap: 80px;
          --card-padding: 20-32px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 60px;
          --radius-full-2: 100px;
          --radius-full-3: 128px;
          --radius-full-4: 180px;
          --radius-full-5: 1440px;
        
          /* Named Radii */
          --radius-nav: 1440px;
          --radius-cards: 4px;
          --radius-images: 4px;
          --radius-inputs: 4px;
          --radius-buttons: 8px;
          --radius-pill-buttons: 60px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.07) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-graphite-canvas: #232426;
          --surface-carbon: #121214;
          --surface-obsidian: #000000;
          --surface-iron: #45464d;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-blue: #528fff;
          --color-button-blue: #1253ff;
          --color-voltage-yellow: #f1f607;
          --color-carbon: #121214;
          --color-obsidian: #000000;
          --color-platinum: #ffffff;
          --color-graphite: #232426;
          --color-fog: #a6a8ad;
          --color-ash: #c8c9cc;
          --color-slate: #63656d;
          --color-iron: #45464d;
        
          /* Typography */
          --font-intervariable-custom: 'InterVariable (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehnebreit-custom: 'SoehneBreit (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-soehne-custom: 'Soehne (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.18px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.21px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.24px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.3px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.42px;
          --text-heading: 36px;
          --leading-heading: 1.25;
          --tracking-heading: -0.54px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: -0.72px;
          --text-display: 54px;
          --leading-display: 1.25;
          --tracking-display: -0.81px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 60px;
          --radius-full-2: 100px;
          --radius-full-3: 128px;
          --radius-full-4: 180px;
          --radius-full-5: 1440px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.07) 0px 0px 0px 1px inset;
        }