Journeys

visual.md

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

# Visual

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

## Color

```yaml
color:
  tokens:
    text:
      hex: "#000000"
      role: text
      description: "colors extracted from customer source material."
    surface:
      hex: "#FFFFFF"
      role: surface
      description: "colors extracted from customer source material."
    primary:
      hex: "#8BC43E"
      role: primary
      description: "colors extracted from customer source material."
    secondary:
      hex: "#AAAAAA"
      role: secondary
      description: "colors extracted from customer source material."
    neutral_5:
      hex: "#CCCCCC"
      role: neutral
      description: "colors extracted from customer source material."
    accent:
      hex: "#1D4ED8"
      role: accent
      description: "primaryColor extracted from customer source material."
    text_inverse:
      hex: "#FFFFFF"
      role: text-inverse
      description: "Derived text inverse extracted from customer source material."
    surface_inverse:
      hex: "#000000"
      role: surface-inverse
      description: "Derived surface inverse extracted from customer source material."
  approved_pairs:
    - foreground: text
      background: surface
      context: Default body text.
    - foreground: text_inverse
      background: surface_inverse
      context: Inverse layouts.
    - foreground: text_inverse
      background: primary
      context: Primary actions when contrast is sufficient.
  forbidden_pairs:
    - foreground: primary
      background: surface
      reason: Use only if contrast testing passes for the actual type size.
```

## Typography

```yaml
typography:
  families:
    roboto_condensed:
      family: "Roboto Condensed"
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [400, 500, 700]
      styles: ["normal"]
      source: "Google Fonts or public web font"
    roboto:
      family: Roboto
      fallback_stack: ["Helvetica Neue", "Arial", "sans-serif"]
      weights: [400, 500, 700]
      styles: ["normal"]
      source: "Google Fonts or public web font"
  roles:
    display: roboto_condensed
    body: roboto
    ui: roboto
```

## Layout and components

```yaml
layout:
  container_max_width_px: 767
  uses_grid: true
radius:
  scale_px: [0, 4, 16]
elevation:
  shadows:
    - "0 0 0 1px #FFFFFF, 0 0 0 4px #3699F1"
    - "none !important"
    - "0 0 0 2px #8BC43E !important"
    - "0 0 0 2px rgba(59, 130, 246, .5) !important"
spacing:
  scale_px: [10, 15]
components:
  buttons:
    - background: "#8bc43e"
    - background: "#ffffff"
      radius_px: 9999
    - background: "#aaaaaa"
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
```