Gula Båten

visual.md

---
bcp_version: "0.7"
file_type: visual
parent: /.well-known/brand.md
last_updated: 2026-08-17
---

# Visual

The brand's visual identity is preserved below as machine-readable tokens and practical usage rules.

## Color

```yaml
color:
  tokens:
    neutral_1:
      hex: "#000000"
      role: neutral
      description: "colors extracted from customer source material."
    text:
      hex: "#FFFFFF"
      role: text
      description: "colors extracted from customer source material."
    neutral_3:
      hex: "#DFE6E9"
      role: neutral
      description: "colors extracted from customer source material."
    neutral_4:
      hex: "#116DFF"
      role: neutral
      description: "colors extracted from customer source material."
    neutral_5:
      hex: "#282626"
      role: neutral
      description: "colors extracted from customer source material."
    accent:
      hex: "#FFDE00"
      role: primary
      description: "accent extracted from customer source material."
    background:
      hex: "#121212"
      role: surface
      description: "background extracted from customer source material."
  approved_pairs:
    - foreground: text
      background: background
      context: Default body text.
  forbidden_pairs:
    - foreground: accent
      background: background
      reason: Use only if contrast testing passes for the actual type size.
```

## Typography

```yaml
typography:
  families:
    helvetica_w_01_roman:
      family: "helvetica-w 01-roman"
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [400, 500, 700]
      styles: ["normal"]
      source: "customer site extraction"
    wf_a_6c_4bbdcf_4e_9485f_9dda_13e_6c:
      family: "wf_a 6c 4bbdcf 4e 9485f 9dda 13e 6c"
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [400, 500, 700]
      styles: ["normal"]
      source: "customer site extraction"
    din_next_w_01_light:
      family: "din-next-w 01-light"
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [400, 500, 700]
      styles: ["normal"]
      source: "customer site extraction"
    wfont_47913a_a_6c_4bbdcf_4e_9485f_9dda_13e_6c_96aadb_9:
      family: "wfont_47913a_a 6c 4bbdcf 4e 9485f 9dda 13e 6c 96aadb 9"
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [400, 500, 700]
      styles: ["normal"]
      source: "customer site extraction"
    wf_bffbc_71366954ed_5bb_5fadf_9d:
      family: "wf_bffbc 71366954ed 5bb 5fadf 9d"
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [400, 500, 700]
      styles: ["normal"]
      source: "customer site extraction"
    arial:
      family: Arial
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [700]
      styles: ["normal"]
      source: "customer site extraction"
    wfont_47913a_a6c4bbdcf4e9485f9dda13e6c96aadb9:
      family: wfont_47913a_a6c4bbdcf4e9485f9dda13e6c96aadb9
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [400]
      styles: ["normal"]
      source: "customer site extraction"
    helvetica_w01_roman:
      family: helvetica-w01-roman
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [400]
      styles: ["normal"]
      source: "customer site extraction"
  roles:
    display: arial
    body: wf_a_6c_4bbdcf_4e_9485f_9dda_13e_6c
    ui: wf_a_6c_4bbdcf_4e_9485f_9dda_13e_6c
```

## Layout and components

```yaml
spacing:
  scale_px: [6, 20, 40, 56, 76]
components:
  buttons:
    - background: "#ffffff"
      color: "#121212"
      radius_px: 4
      padding_px: [8, 16]
      font_weight: 400
    - background: "transparent"
      color: "#ffffff"
      radius_px: 4
      padding_px: [8, 16]
      font_weight: 400
    - background: "transparent"
      color: "#ffffff"
      radius_px: 0
      padding_px: [0, 0]
      font_weight: 400
source: Observed from the site's live CSS, not a declared design system. Verify against your canonical tokens.
```

## Imagery

```yaml
imagery:
  photographic_style: |
    Use concrete, brand-owned imagery when available. Avoid generic stock,
    abstract AI motifs, and visuals that contradict the extracted identity.
  illustration_style: |
    Keep illustration subordinate to the brand system. Use only when it
    clarifies the message better than photography or product evidence.
  iconography_style: |
    Follow the brand's existing mark, stroke, and geometry cues. Do not invent
    decorative symbols without a human-approved precedent.
  forbidden_treatments:
    - generic AI iconography
    - decorative gradients behind text
    - stock business-meeting photography
```