aker___style_reference:
  info: "> darkroom gallery wall"
  info: "Monumental type floats over muted landscape photography like exhibit labels in a high-end architectural gallery — white walls, warm terracotta spotlights, everything else recedes."

  theme: "light"

  info: "Aker speaks in the visual vocabulary of a premium real-estate developer: dramatic full-bleed photography anchoring each section, a single warm terracotta accent cutting through near-monochrome layouts, and typography that oscillates between whisper-light and monumental. The interface trusts white space and dark imagery to do the heavy lifting — chrome is minimal, borders are hairlines, and interactive elements are reduced to text-and-arrow pairs or subtly filled dark pills. The single most distinctive choice is the contrast between the 168px Proxima Nova at weight 300 for the brand mark and the 15–18px body copy at the same family — the same typeface carries both the shouting and the whispering, which makes the voice feel unified rather than hybrid."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, hairline borders, icon strokes, link text on light surfaces |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, text on dark photography and dark surfaces |"
    info: "| Char | `#1c1c1c` | `--color-char` | Dark surface panels, navigation pill background, elevated dark cards |"
    info: "| Midnight | `#070707` | `--color-midnight` | Deepest surface for dark feature cards and modal backgrounds |"
    info: "| Iron | `#262626` | `--color-iron` | Mid-dark panel surface, secondary dark backgrounds behind photography |"
    info: "| Slate | `#38464a` | `--color-slate` | Cool-tinted dark surface, used for subtle contrast against warmer darks |"
    info: "| Mist | `#e5e4e4` | `--color-mist` | Light card surfaces, hairline borders on white, image overlay tints |"
    info: "| Smoke | `#8d8d8d` | `--color-smoke` | Muted helper text, secondary borders, inactive metadata |"
    info: "| Pewter | `#666666` | `--color-pewter` | Secondary body text, body-emphasis borders |"
    info: "| Ember | `#b75928` | `--color-ember` | Link text, brand accent, warm highlight on muted cards — single chromatic accent that warms an otherwise neutral system |"
    info: "| Pine | `#193f32` | `--color-pine` | Dark green surface for feature cards and link backgrounds on light |"
    info: "| Tide | `#002934` | `--color-tide` | Deep teal-dark surface for link and card backgrounds, complements Pine in the cool brand register |"
    info: "| Driftwood | `#537179` | `--color-driftwood` | Decorative stroke and fill for illustrations and icon-line work, soft cool gray with depth |"
    info: "| Cedar | `#776157` | `--color-cedar` | Warm brown card surface, earth-toned card variant |"
    info: "| Coral | `#df6a6b` | `--color-coral` | Warm-pink card surface, used as an occasional warm-tinted card variant |"
    info: "| Primary Action Fill | `#494949` | `--color-primary-action-fill` | Neutral button treatment for secondary actions and selected controls. Use as the primary filled action background |"

  tokens___typography:

    proxima_nova___primary_typeface_across_all_ui__weight_300_carries_the_brand_wordmark_at_168px_and_large_section_headings_62_80px___the_whisper_weight_at_display_sizes_is_anti_convention__creating_authority_through_restraint_instead_of_shouting_with_bold__weight_400_500_handles_body__labels__and_ui__weight_600_appears_only_for_emphasis_labels__sizes_range_from_8px_micro_labels_to_168px_display__a_21_1_ratio_that_produces_a_museum_label_to_billboard_scale_____font_proxima_nova:
      - "**Substitute:** Montserrat or Nunito Sans"
      - "**Weights:** 300, 400, 500, 600"
      - "**Sizes:** 8, 12, 13, 14, 15, 16, 18, 20, 22, 30, 36, 62, 80, 168"
      - "**Line height:** 0.80–1.50"
      - "**Letter spacing:** -0.0250em at display (168px, 80px, 62px), -0.0200em at mid headings (36–22px), 0.0100em at body and small text"
      - "**Role:** Primary typeface across all UI. Weight 300 carries the brand wordmark at 168px and large section headings (62–80px) — the whisper-weight at display sizes is anti-convention, creating authority through restraint instead of shouting with bold. Weight 400–500 handles body, labels, and UI. Weight 600 appears only for emphasis labels. Sizes range from 8px micro-labels to 168px display, a 21:1 ratio that produces a museum-label-to-billboard scale."

    lora___serif_accent_for_body_passages_and_editorial_copy__used_sparingly_to_break_the_all_sans_rhythm___a_single_serif_paragraph_next_to_proxima_nova_body_creates_an_editorial_press_feel__letter_spacing_0_0110em_gives_it_slight_breathing_room_____font_lora:
      - "**Substitute:** Lora (Google Fonts)"
      - "**Weights:** 400"
      - "**Sizes:** 15, 18"
      - "**Line height:** 1.35–1.50"
      - "**Letter spacing:** 0.0110em"
      - "**Role:** Serif accent for body passages and editorial copy. Used sparingly to break the all-sans rhythm — a single serif paragraph next to Proxima Nova body creates an editorial-press feel. Letter-spacing 0.0110em gives it slight breathing room."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 15px | 1.5 | 0.15px | `--text-body` |"
      info: "| subheading | 18px | 1.5 | 0.18px | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.25 | -0.44px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | -0.72px | `--text-heading` |"
      info: "| heading-lg | 62px | 1.1 | -1.55px | `--text-heading-lg` |"
      info: "| display | 168px | 0.8 | -4.2px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| small | 3.2px |"
      info: "| badges | 1584px |"
      info: "| images | 8px |"
      info: "| buttons | 80px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 16px"
      - "**Element gap:** 16px"

  components:

    brand_wordmark:
      role: "Primary brand identifier displayed at extreme scale"

      info: "Proxima Nova weight 300 at 168px, line-height 0.80, letter-spacing -4.2px (-0.0250em). Color Paper (#ffffff) when overlaid on dark photography, Ink (#000000) on light sections. Functions as the page's hero anchor — its 21:1 size ratio against 15px body text is the single most signature-defining choice in the system."

    navigation_pill:
      role: "Compact dark mode-switcher/trigger in the top-right corner"

      info: "Char (#1c1c1c) background, fully rounded (1584px radius), ~13px padding vertical with brand label \"AKER\" + hamburger icon in Paper. Width fits content, height ~32px. Sits as a floating dark element against both light and dark hero photography."

    navigation_card:
      role: "Menu items revealed from the navigation pill, presented as visual cards"

      info: "Char (#1c1c1c) background, 8px radius, contains a 4:3 image on the left and a text block on the right. Title 15px Proxima Nova weight 400 Paper, description 12px weight 400 Mist (#e5e4e4), right-arrow icon 14px Paper. Two cards per row in the open nav state."

    text_arrow_button:
      role: "Primary action affordance — used for \"Contact us\", \"Let's chat\", \"Our team\""

      ghost_style: "no fill, no border. Label 13–15px Proxima Nova weight 400. Color varies — Paper on dark photography, Ink on light surfaces. Trailing right-arrow (→) at 16px. Contained in a 80px-radius pill outline for emphasized variants, or bare text for inline. Horizontal padding 19px vertical, 16px horizontal in the pill variant."

    filled_dark_button:
      role: "Secondary emphasized action on light surfaces"

      info: "Char (#1c1c1c) fill, 80px radius, Paper text 13px weight 500, 19px vertical padding, 16px horizontal padding. Used sparingly — most actions are ghost/text."

    section_label:
      role: "Overline label preceding section headings (e.g. \"Core business areas\")"

      info: "12px Proxima Nova weight 400, Smoke (#8d8d8d) or Pewter (#666666), letter-spacing 0.12px. Positioned above the heading with 6–8px gap. Sits left-aligned, not centered."

    section_heading:
      role: "Primary heading for content sections"

      info: "Proxima Nova weight 300 or 400, 36–62px, line-height 1.10–1.20, letter-spacing -0.0200em. Ink (#000000) on light sections, Paper on dark. Weight 300 at 62px for the largest section headings is the recurring signature."

    two_column_feature_card:
      role: "Large editorial cards for \"Invest with Aker\" / \"We're open to collaborate\""

      info: "Two equal-width cards in a 2-column grid. Left card: Mist (#e5e4e4) background, 8px radius, small overline label + large heading (Proxima Nova weight 300, 36–48px) + bottom-left text-arrow button + bottom-right decorative brand mark. Right card: full-bleed photo (landscape or cityscape), 8px radius, overline + heading in Paper overlaid on the image."

    full_bleed_hero_section:
      role: "Opening visual statement"

      info: "100vw photography (landscape/cityscape/mountain), no border-radius, occupies full viewport height. Brand wordmark in Paper overlaid bottom-left, small intro paragraph (15px Proxima Nova, Paper, 6–8 line max) top-left, navigation pill top-right. Dark filter implied by subject matter rather than explicit overlay."

    body_text_block:
      role: "Editorial paragraph copy in light sections"

      info: "Proxima Nova weight 400, 15–18px, line-height 1.50, Ink (#000000). Max-width ~600px, left-aligned. For the brand statement, Lora 15–18px is used as the serif variant."

    numbered_list_item:
      role: "Numbered entries for \"What we do\" lists (\"01 Invest\")"

      info: "Two-digit number (01, 02) in Smoke (#8d8d8d) at 12px Proxima Nova, label 18px Proxima Nova weight 400 Ink, positioned with 6px row gap, separated by a 1px Mist (#e5e4e4) hairline divider above each item."

    pill_badge___tag:
      role: "Category labels, overline tags"

      info: "Fully rounded (1584px radius), 6–8px vertical padding, 14px horizontal padding. Mist (#e5e4e4) background with Ink text, or transparent with Paper text on dark. 12px Proxima Nova weight 500."

    image_thumbnail_card:
      role: "Small photo+label tiles within the expanded navigation"

      8px_radius__4: "3 image aspect ratio, dark overlay. Title 15px Paper, subtitle 12px Mist. Functions as a visual menu item — each section gets represented by its hero photograph."

  do_s_and_don_ts:

    do:
      - "Use Proxima Nova weight 300 at 62px+ for any section heading that needs to feel premium — the whisper-weight at large sizes is the system's voice."
      - "Default to text-arrow buttons (no fill, trailing →) for all primary actions; reserve filled dark buttons for moments of high emphasis."
      - "Apply 80px border-radius to any button or pill-shaped container — this is the system's signature curve, not 4px or 8px."
      - "Anchor every section opener with a full-bleed photograph at 100vw, then transition to white-canvas content below."
      - "Use Ember (#b75928) as the sole chromatic accent — for link text, one warm highlight per section maximum."
      - "Set display-size letter-spacing to -0.0250em and body letter-spacing to 0.0100em; the 4.2px negative at 168px is what makes the wordmark feel carved rather than set."
      - "Use the 8px radius for all card surfaces and image containers — do not flatten to 0px or round to 16px."

    don_t:
      - "Do not use weight 600 or 700 at display sizes — the system speaks at weight 300 even when shouting."
      - "Do not introduce additional accent hues beyond Ember; the cool brand colors (Pine, Tide) are for card surfaces, not for text or buttons."
      - "Do not use drop shadows for elevation — depth comes from photography and surface color contrast, not box-shadow."
      - "Do not center-align body paragraphs — editorial sections are strictly left-aligned at ~600px max-width."
      - "Do not use gradients — the system is flat by design, with tone shifts achieved through surface color and photography."
      - "Do not use the 1584px pill radius on cards or images — that radius is reserved exclusively for navigation pills, badges, and tags."
      - "Do not pair Lora with Proxima Nova headings; Lora is a body-text accent only, and should never appear at sizes above 18px."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper | `#ffffff` | Base page canvas for content sections |"
    info: "| 2 | Mist | `#e5e4e4` | Light card surface floating on Paper |"
    info: "| 3 | Pine | `#193f32` | Dark green feature card for tonal variety |"
    info: "| 4 | Tide | `#002934` | Deep teal card surface, darker than Pine |"
    info: "| 5 | Char | `#1c1c1c` | Navigation pill, modal panels, and dark elevated surfaces |"
    info: "| 6 | Midnight | `#070707` | Darkest surface for photography overlays and premium dark cards |"

  elevation:

    info: "Elevation is achieved through photography and surface color layering, never through drop shadows. Dark cards on white canvas, white cards on dark photography, and Mist (#e5e4e4) cards on white create the perception of depth. The only shadow-like effect in the system is the implicit vignette of full-bleed hero photography — the site treats the photograph itself as the elevation tool."

  imagery:

    info: "Photography is the dominant visual element, occupying 50–70% of viewport space in section openers. Style: muted, slightly desaturated landscape and cityscape photography — mountains, coastal terrain, aerial city views, residential community shots. Treatment: full-bleed (100vw), no border-radius in hero contexts, 8px radius in card contexts. Color treatment leans cool and desaturated rather than vibrant, with the terracotta Ember accent occasionally present in subjects (terracotta rooftops, earth tones) to tie the photography into the brand palette. No illustrations, no abstract graphics, no 3D renders — photography is the only imagery language."

  layout:

    page_model: "max-width 1200px centered for content, with full-bleed 100vw sections at section transitions. Hero pattern: full-viewport landscape photograph with massive 168px brand wordmark overlaid bottom-left and small intro paragraph top-left. Section rhythm: alternates between full-bleed dark photography bands and max-width white canvas content sections, with ~80px vertical gaps between bands. Content arrangement: 2-column feature card grids for primary CTAs, left-aligned single-column text blocks (max-width ~600px) for editorial copy, no centered stacks. Navigation: minimal — a single compact dark pill in the top-right corner opens to reveal a 2-column card-based menu with photographic thumbnails."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (on light), #ffffff (on dark photography)"
    - "background: #ffffff (canvas), #1c1c1c (dark surface)"
    - "border: #e5e4e4 (light), #000000 (dark)"
    - "accent: #b75928 (Ember — links, warm highlights only)"
    - "primary action: #494949 (filled action)"

    3_5_example_component_prompts:

    - "**Full-bleed hero section**: Background is a muted landscape photograph at 100vw, full viewport height. Brand wordmark \"AKER\" in Proxima Nova weight 300 at 168px, line-height 0.80, letter-spacing -4.2px, color #ffffff, positioned bottom-left with 40px padding. Intro paragraph top-left: Proxima Nova weight 400, 15px, line-height 1.50, color #ffffff, max-width 400px."

    - "**Section with label + heading + body**: White #ffffff background, max-width 600px left-aligned. Overline label \"Core business areas\" in Proxima Nova weight 400, 12px, color #8d8d8d. Heading \"What we do\" in Proxima Nova weight 300, 36px, line-height 1.20, letter-spacing -0.72px, color #000000. Body paragraph in Proxima Nova weight 400, 15px, line-height 1.50, color #000000. 24px gap between elements."

    - "**Two-column feature card row**: Two equal-width cards in a 2-column grid with 16px gap. Left card: #e5e4e5 background, 8px border-radius, 24px padding. Overline label 12px #8d8d8d. Heading \"Invest with Aker\" in Proxima Nova weight 300, 36px, #000000. Bottom-left ghost button: 15px Proxima Nova weight 400 #000000 text + 16px → arrow. Bottom-right decorative brand mark in #000000. Right card: full-bleed cityscape photograph with no visible border-radius (or 8px), white overline and heading overlaid on the image, same ghost button bottom-left in #ffffff."

    - "**Navigation pill (closed state)**: 32px height, auto width with 13px horizontal padding, 1584px border-radius, background #1c1c1c. Brand text \"AKER\" in Proxima Nova weight 500, 12px, letter-spacing 0.12px, color #ffffff, followed by a hamburger icon (three horizontal lines, 16px, #ffffff). Positioned fixed top-right with 24px margin from viewport edge."

    - "**Numbered list item**: Two-column layout per row with a 1px hairline divider in #e5e4e5 above. Left: two-digit number \"01\" in Proxima Nova weight 400, 12px, color #8d8d8d. Right: label \"Invest\" in Proxima Nova weight 400, 18px, color #000000. 6px row gap, 24px padding vertical."

  similar_brands:

    - "**Aman Resorts** — Same full-bleed muted landscape photography, whisper-weight large display type, and near-monochrome palette with a single warm accent — luxury through restraint"
    - "**Vipp** — Same dark-on-white typographic hierarchy, ghost text-arrow buttons, and 2-column large feature cards with photographic and solid variants"
    - "**Taschen books** — Same editorial-gallery layout — white walls, dramatic full-bleed imagery, and oversized serif-adjacent sans-serif at near-weight-300 for brand voice"
    - "**Patagonia Worn Wear** — Same earth-toned landscape photography strategy, minimalist navigation, and section-by-section full-bleed photo bands"
    - "**Heatherwick Studio** — Same architectural-portfolio language — massive type, photography as the primary content, and minimal UI chrome that lets the work speak"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-char: #1c1c1c;
          --color-midnight: #070707;
          --color-iron: #262626;
          --color-slate: #38464a;
          --color-mist: #e5e4e4;
          --color-smoke: #8d8d8d;
          --color-pewter: #666666;
          --color-ember: #b75928;
          --color-pine: #193f32;
          --color-tide: #002934;
          --color-driftwood: #537179;
          --color-cedar: #776157;
          --color-coral: #df6a6b;
          --color-primary-action-fill: #494949;
        
          /* Typography — Font Families */
          --font-proxima-nova: 'Proxima Nova', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lora: 'Lora', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 15px;
          --leading-body: 1.5;
          --tracking-body: 0.15px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: 0.18px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.44px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.72px;
          --text-heading-lg: 62px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.55px;
          --text-display: 168px;
          --leading-display: 0.8;
          --tracking-display: -4.2px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 3.2px;
          --radius-lg: 8px;
          --radius-full: 80px;
          --radius-full-2: 160px;
          --radius-full-3: 800px;
          --radius-full-4: 1584px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-small: 3.2px;
          --radius-badges: 1584px;
          --radius-images: 8px;
          --radius-buttons: 80px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-mist: #e5e4e4;
          --surface-pine: #193f32;
          --surface-tide: #002934;
          --surface-char: #1c1c1c;
          --surface-midnight: #070707;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-char: #1c1c1c;
          --color-midnight: #070707;
          --color-iron: #262626;
          --color-slate: #38464a;
          --color-mist: #e5e4e4;
          --color-smoke: #8d8d8d;
          --color-pewter: #666666;
          --color-ember: #b75928;
          --color-pine: #193f32;
          --color-tide: #002934;
          --color-driftwood: #537179;
          --color-cedar: #776157;
          --color-coral: #df6a6b;
          --color-primary-action-fill: #494949;
        
          /* Typography */
          --font-proxima-nova: 'Proxima Nova', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lora: 'Lora', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 15px;
          --leading-body: 1.5;
          --tracking-body: 0.15px;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --tracking-subheading: 0.18px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.44px;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --tracking-heading: -0.72px;
          --text-heading-lg: 62px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.55px;
          --text-display: 168px;
          --leading-display: 0.8;
          --tracking-display: -4.2px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-md: 3.2px;
          --radius-lg: 8px;
          --radius-full: 80px;
          --radius-full-2: 160px;
          --radius-full-3: 800px;
          --radius-full-4: 1584px;
        }