north_kingdom___style_reference:
  info: "> cinematic void with luminous type — a black film-studio soundstage where a single wordmark glows"

  theme: "dark"

  north_kingdom_reads_as_a_cinematic_void: "an almost-black canvas (#050311) swallowing everything except oversized white type and a single luminous accent. The wordmark is the hero — giant neo-grotesque letterforms spanning the full viewport, flanked by a 3D shield emblem with a circular play affordance. The entire palette is near-monochrome; there is no chromatic brand color, no gradients, no decorative warmth. Every component lives or dies by contrast: white type and hairlines on darkness, with a single muted gray (#9b9aa0) carrying all secondary information. Surfaces are flat — no shadows, no elevation tricks, no glass effects. Geometry is quiet and slightly sharp: 8px image/card radii, 4px button radii, with one outlier 26px pill input that signals interactivity. The effect is a digital agency portfolio treated like a film title card."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Ink | `#050311` | `--color-void-ink` | Page canvas, section backgrounds, dark surface base — the near-black stage on which all content sits, carrying a barely-perceptible cool-violet undertone that keeps it from feeling clinical |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Primary text, headline color, hairline borders, icon strokes, button outlines — the only high-contrast voice in the system; when something needs to be seen, it is white |"
    info: "| Carbon Black | `#000000` | `--color-carbon-black` | Monochrome icon fills, brand marks, and high-contrast graphic details. Do not promote it to the primary CTA color |"
    info: "| Ash Gray | `#9b9aa0` | `--color-ash-gray` | Muted body text, secondary headings, subtle borders, disabled states — carries all secondary information without competing with the white voice |"
    info: "| Graphite | `#44424d` | `--color-graphite` | Dividers, low-emphasis borders, hairline separators between sections — quiet structural lines that organize the dark canvas without drawing attention |"

  tokens___typography:

    fkgroteskneue___universal_type_family___used_for_navigation__body__headings__badges__buttons__cards__and_the_massive_hero_wordmark__a_neo_grotesque_sans_with_tabular_numerals_as_a_deliberate_feature__the_single_weight_400_is_the_system_s_signature__the_hero__north_kingdom__wordmark_achieves_its_cinematic_weight_through_sheer_size__not_font_weight__substitute__space_grotesk_or_inter_at_matching_weight_____font_fkgroteskneue:
      - "**Substitute:** Space Grotesk"
      - "**Weights:** 400"
      - "**Sizes:** 24px"
      - "**Line height:** 1.15–1.70"
      - "**Letter spacing:** -0.01em"
      - "**OpenType features:** `\"tnum\"`"
      - "**Role:** Universal type family — used for navigation, body, headings, badges, buttons, cards, and the massive hero wordmark. A neo-grotesque sans with tabular numerals as a deliberate feature. The single weight (400) is the system's signature: the hero 'North Kingdom' wordmark achieves its cinematic weight through sheer size, not font weight. Substitute: Space Grotesk or Inter at matching weight."

    arial___system_fallback_for_button_labels__icons__and_input_fields___used_where_the_custom_font_license_or_loading_constraints_prevent_the_primary_face_from_rendering____font_arial:
      - "**Substitute:** system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.20"
      - "**Role:** System fallback for button labels, icons, and input fields — used where the custom font license or loading constraints prevent the primary face from rendering"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.2 | — | `--text-caption` |"
      info: "| heading | 24px | 1.15 | -0.24px | `--text-heading` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| badges | 100px |"
      info: "| images | 8px |"
      info: "| inputs | 26px |"
      info: "| buttons | 4px |"

    layout:

      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    hero_wordmark_display:
      role: "Primary brand expression — full-viewport typographic statement"

      the_signature_element: "'North Kingdom' rendered in FKGroteskNeue weight 400 at extreme scale (estimated 120–180px viewport-relative), letter-spacing -0.01em, color #ffffff, set against the #050311 void canvas. The text spans nearly the full viewport width with the 3D shield emblem embedded between the two words."

    3d_brand_emblem_card:
      role: "Central brand icon — visual anchor within the hero wordmark"

      info: "A square or slightly tall container (8px radius) holding a 3D-rendered shield/crest illustration with rich internal color (blues, greens, golds) — the only chromatic content in the system. A circular white play button (#ffffff fill, 4px radius or circular) is overlaid dead-center, signaling video. The container is 8px radius, consistent with all image cards."

    top_navigation_bar:
      role: "Site navigation — minimal, non-competing"

      info: "Fixed or top-anchored horizontal bar on the dark canvas. Left: small shield logo mark in #ffffff. Right: inline nav links (Work, About, Careers, Contact) in FKGroteskNeue 24px or smaller, #ffffff color, with 24px horizontal spacing between items. No background fill, no border — the nav floats directly on the void."

    image_card:
      role: "Project thumbnail / work showcase tile"

      info: "8px border-radius container holding project imagery or video stills. No border, no shadow. The image fills the card edge-to-edge. Cards sit directly on the void canvas with 10px gaps between them in grid arrangements."

    outlined_button:
      role: "Primary interactive element"

      info: "4px border-radius button with 1px border in #ffffff or #000000, transparent fill on the dark canvas. Padding: 6px horizontal, 7px vertical. Label in FKGroteskNeue 24px, #ffffff. The slight radius and hairline border create a precise, almost architectural feel."

    pill_input_field:
      role: "Form input — newsletter, contact, search"

      info: "26px border-radius (near-pill) input with #ffffff border on the dark canvas. Padding includes generous horizontal space. The large radius is a deliberate departure from the otherwise sharp 4–8px geometry, signaling 'type here' with a single visual gesture."

    full_pill_badge___tag:
      role: "Category labels, filters, metadata chips"

      info: "100px border-radius pill shape with #ffffff background and dark text, or #ffffff border with white text. Padding 20px horizontal. Used for project categories, filter pills, or status indicators — the only fully rounded element in the system."

    play_button_overlay:
      role: "Video trigger — appears on hero emblem and video thumbnails"

      info: "Circular #ffffff button with a centered triangular play icon in #050311. Sits as an overlay on video containers. The pure white circle on the dark void is the system's most recognizable micro-component."

    section_divider:
      role: "Structural separator between content bands"

      info: "1px hairline in #9b9aa0 or #44424d spanning the full width. No vertical padding tricks — just a single line that says 'new section begins' without visual ceremony."

    footer_block:
      role: "Site footer — contact, social, legal"

      info: "Dark block matching the void canvas. Content arranged in columns with 20px gaps. Heading text in #ffffff, body and links in #9b9aa0. 52px top padding creates breathing room from the last content section."

    grid_project_layout:
      role: "Work portfolio grid — the 'Work' page pattern"

      info: "Multi-column grid of Image Cards with 10px gaps. Full-bleed (no page max-width constraint), columns equal-width. Each card may contain a Play Button Overlay indicating video case studies."

  do_s_and_don_ts:

    do:
      - "Set all body text and headings in FKGroteskNeue weight 400 — the single weight is the system's voice; never introduce bold or light variants"
      - "Use #050311 as the page canvas for every full-width background; let sections flow as uninterrupted bands of void"
      - "Apply 8px border-radius to all image containers and project cards; use 4px for buttons; reserve 26px exclusively for input fields"
      - "Let white (#ffffff) carry all primary information: text, borders, icons, button outlines — it is the only voice that speaks loudly"
      - "Use #9b9aa0 for secondary text and muted borders; it should never compete with white for attention"
      - "Let the hero wordmark be enormous — typographic scale is the design system, not color or imagery"
      - "Include \"tnum\" font-feature-settings on all FKGroteskNeune usage to preserve tabular numeral alignment"

    don_t:
      - "Never introduce a chromatic brand color — the system is monochrome; color appears only inside the 3D emblem artwork"
      - "Never use drop shadows, glows, or blur effects — depth comes from value contrast, not elevation"
      - "Never use border-radius above 8px on cards or images — the 26px and 100px values are reserved for inputs and pills only"
      - "Never use more than one font weight — the system speaks in a single 400 voice at varying sizes"
      - "Never place white text on white surfaces or dark text on the void without testing contrast — the system depends on absolute clarity between two values"
      - "Never use gradients on backgrounds — the canvas is a solid void; gradients were not detected in the system"
      - "Never add decorative borders or ornamental elements — the aesthetic is architectural minimalism, not illustration"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void Canvas | `#050311` | Base page background — the absolute floor of the design |"
    info: "| 1 | Carbon Layer | `#000000` | Icon containers, button surfaces, card backgrounds where a step deeper than the canvas is needed |"
    info: "| 2 | Inverted Surface | `#ffffff` | Full-bleed light sections, badge backgrounds, inverse text blocks — the dramatic opposite of the void |"

  elevation:

    info: "Elevation is avoided entirely. The system uses pure value contrast (white on near-black) rather than shadows to separate layers. No drop shadows, no glow effects, no blur. Depth comes from typographic scale and content density, not from lifted surfaces."

  imagery:

    info: "Imagery is treated as cinematic content, not decoration. The dominant visual is a 3D-rendered shield/crest emblem with rich internal coloring (blues, greens, golds, architectural stairways) — this single artwork is the only chromatic element in the entire interface and serves as the brand mascot. Project thumbnails and video stills appear as edge-to-edge 8px-radius cards. Photography is not present in the hero; the void + type + 3D emblem is the hero composition. Icons are minimal and line-based, rendered in #ffffff with thin strokes. The overall visual language is closer to a film studio title sequence than a typical agency portfolio."

  layout:

    info: "Full-bleed layout with no max-width container constraint — content stretches edge to edge of the viewport. The hero is a full-viewport dark canvas with the massive 'North Kingdom' wordmark split by the 3D emblem in the center; the wordmark text and emblem share a single horizontal baseline that is vertically centered. Navigation is a minimal top bar (logo left, links right) with no background fill, floating directly on the void. Below the hero, sections flow as uninterrupted horizontal bands separated by hairline dividers in #44424d, with 80px vertical gaps between major sections. Content within sections uses generous 140px horizontal padding for breathing room. Project grids use equal-width columns with 10px gaps. The overall rhythm is cinematic: one overwhelming opening frame, then quiet, spacious, content-driven scrolling."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #ffffff"
    - "background: #050311"
    - "border: #9b9aa0"
    - "accent: #ffffff"
    - "primary action: #ffffff (filled action)"

  3_5_example_component_prompts:

    - "**Hero Wordmark Section**: Full-bleed #050311 background, no max-width. Center the text 'North Kingdom' in FKGroteskNeue weight 400, ~140px, color #ffffff, letter-spacing -0.01em. Split the two words with a square 8px-radius image container holding a 3D shield emblem; overlay a 48px circular #ffffff play button at the emblem's center. Add 80px top padding to clear the navigation."

    - "**Top Navigation Bar**: Full-width on #050311 canvas, 24px vertical padding. Left: small white (#ffffff) shield logo, ~32px. Right: four nav links in FKGroteskNeue 24px, #ffffff, 24px horizontal gap between items. No background, no border."

    - "**Project Grid Card**: 8px border-radius container with edge-to-edge image fill. No border, no shadow. On hover, the card does not change — it is already fully white-on-void. Text caption below: FKGroteskNeue 24px, #9b9aa0, 10px gap above."

    - "**Outlined Ghost Button**: 4px border-radius, 1px solid #ffffff border, transparent fill, padding 6px 12px. Label in FKGroteskNeue 24px, #ffffff. Sits directly on the #050311 canvas with 10px margin to surrounding elements."

    - "**Pill Input Field**: 26px border-radius, 1px solid #ffffff border, transparent fill, padding 12px 24px. Placeholder text in FKGroteskNeue 24px, #9b9aa0. The pill shape is the system's sole departure from sharp geometry — it is the visual 'I am interactive' signal."

  similar_brands:

    - "**Unit Image** — Same cinematic dark-canvas hero with oversized white type and a central 3D-rendered brand artifact — the title-card approach to an agency homepage"
    - "**Active Theory** — Dark full-bleed creative agency aesthetic with a single immersive visual centerpiece and minimal monochrome navigation"
    - "**Resn** — Dark-void canvas treatment with large neo-grotesque type and experimental 3D/webGL elements as the brand identity"
    - "**Locomotive** — Agency portfolio with full-bleed dark sections, hairline dividers, and typography-led hero compositions"
    - "**Ueno** — Single-weight custom neo-grotesque type at extreme sizes, monochrome dark palette, minimal navigation — the wordmark IS the hero"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-ink: #050311;
          --color-pure-white: #ffffff;
          --color-carbon-black: #000000;
          --color-ash-gray: #9b9aa0;
          --color-graphite: #44424d;
        
          /* Typography — Font Families */
          --font-fkgroteskneue: 'FKGroteskNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.2;
          --text-heading: 24px;
          --leading-heading: 1.15;
          --tracking-heading: -0.24px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-80: 80px;
          --spacing-140: 140px;
        
          /* Layout */
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 26px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-badges: 100px;
          --radius-images: 8px;
          --radius-inputs: 26px;
          --radius-buttons: 4px;
        
          /* Surfaces */
          --surface-void-canvas: #050311;
          --surface-carbon-layer: #000000;
          --surface-inverted-surface: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-ink: #050311;
          --color-pure-white: #ffffff;
          --color-carbon-black: #000000;
          --color-ash-gray: #9b9aa0;
          --color-graphite: #44424d;
        
          /* Typography */
          --font-fkgroteskneue: 'FKGroteskNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.2;
          --text-heading: 24px;
          --leading-heading: 1.15;
          --tracking-heading: -0.24px;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-80: 80px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 26px;
          --radius-full: 100px;
        }