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

# Visual

Encoded is clean, structural, and editorial. International Orange is the single dominant color against black, white, and disciplined grays. Moss and amber are functional secondary signals for protocol and live-state surfaces. The system uses square geometry, visible rules, asymmetric whitespace, and a clear split between human-facing type and machine-facing code.

## Logo

```yaml
logo:
  primary_black:
    variants:
      - format: svg
        url: "https://encodedbrands.ai/assets/logos/mark-black.svg"
        sha256: e992dc2d7e2cac6db55ac01777d2089a992bcf910da673f4557e0c9f8b48d62d
        background: "light or white"
        purpose: "Default mark on light surfaces."
  primary_white:
    variants:
      - format: svg
        url: "https://encodedbrands.ai/assets/logos/mark-white.svg"
        sha256: 382df66f217bf1dc2e2332a231ac29e62de2252de096c4b4713755d197bfc4a8
        background: "black or sufficiently dark solid surface"
        purpose: "Reversed mark on dark surfaces."
  contained_red:
    variants:
      - format: svg
        url: "https://encodedbrands.ai/assets/logos/mark-contained-red.svg"
        sha256: 4756a28450f3f8fc51fa15e8d6bebf0ec9f74f165df24877ff92b0c1061112ca
        background: "any approved high-contrast surface"
        purpose: "Approved contained mark for compact or bounded contexts."
```

## Logo usage

```yaml
logo_usage:
  clear_space:
    rule: "Keep clear space around the mark at least equal to the height of its core symbol."
    machine_value:
      unit: x-height
      multiplier: 1.0
  minimum_size:
    digital_px: 24
  approved_backgrounds:
    - type: solid_color
      color_token: surface
      note: "Use primary_black."
    - type: solid_color
      color_token: surface_inverse
      note: "Use primary_white."
    - type: solid_color
      color_token: primary
      note: "Use primary_white only when contrast is sufficient."
  forbidden_backgrounds:
    - type: gradient
      note: "The identity does not use decorative gradients."
    - type: patterned
      note: "Patterns interfere with the mark's infrastructural clarity."
    - type: photographic
      note: "Do not place the mark directly over photography."
  forbidden_modifications:
    - stretch
    - rotate
    - recolor outside approved variants
    - drop shadow
    - glow
    - outline
    - crop
    - add an unapproved container shape
    - animate
```

## Color

```yaml
color:
  tokens:
    surface:
      hex: "#FFFFFF"
      role: surface
    primary:
      hex: "#C03614"
      role: primary
      description: "International Orange; the one dominant brand color."
    primary_pressed:
      hex: "#922810"
      role: secondary
      description: "Hover, pressed, and deep accent state."
    primary_tint:
      hex: "#F4E8E4"
      role: surface
      description: "Tint background only; never body text."
    text:
      hex: "#0A0A0A"
      role: text
    text_strong_secondary:
      hex: "#333333"
      role: text
    text_secondary:
      hex: "#6B6B6B"
      role: text
    text_caption:
      hex: "#9C9C9C"
      role: neutral
    border_secondary:
      hex: "#D4D4D4"
      role: neutral
    border_hairline:
      hex: "#EBEBEB"
      role: neutral
    surface_subtle:
      hex: "#F6F6F6"
      role: surface
    text_inverse:
      hex: "#FFFFFF"
      role: text-inverse
    surface_inverse:
      hex: "#0A0A0A"
      role: surface-inverse
    protocol:
      hex: "#2C3E2D"
      role: secondary
    protocol_tint:
      hex: "#E4EBE4"
      role: surface
    live_state:
      hex: "#B87A1A"
      role: warning
  approved_pairs:
    - { foreground: text, background: surface }
    - { foreground: text, background: surface_subtle }
    - { foreground: text_inverse, background: surface_inverse }
    - { foreground: text_inverse, background: primary }
    - { foreground: protocol, background: protocol_tint }
  forbidden_pairs:
    - foreground: primary
      background: surface
      reason: "International Orange is not body-copy color; use it for display emphasis, rules, states, and bounded actions."
    - foreground: primary_pressed
      background: primary
      reason: "Insufficient functional distinction."
```

## Typography

```yaml
typography:
  families:
    instrument_sans:
      family: "Instrument Sans"
      fallback_stack: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
      weights: [400, 500, 600]
      styles: [normal]
      source: "Google Fonts"
    instrument_serif:
      family: "Instrument Serif"
      fallback_stack: "Iowan Old Style, Georgia, serif"
      weights: [400]
      styles: [normal, italic]
      source: "Google Fonts"
      license_note: "Editorial accent only. Never mix inline with sans text or use as a general UI face."
    ibm_plex_mono:
      family: "IBM Plex Mono"
      fallback_stack: "SFMono-Regular, Menlo, Consolas, monospace"
      weights: [400, 500, 600]
      styles: [normal]
      source: "Google Fonts"
  roles:
    display: instrument_sans
    body: instrument_sans
    ui: instrument_sans
    mono: ibm_plex_mono
    code: ibm_plex_mono
```

## Layout and components

```yaml
layout:
  density: "calm, information-dense where technical proof is shown"
  whitespace: "generous vertical rhythm with asymmetric desktop gutters"
  grid: "structured columns, visible rules, and full-width technical panels"
  hierarchy: "large sans display type, restrained body copy, uppercase mono eyebrows"
  corner_radius: "0px; square by default"
  motion: "functional and restrained; no ambient AI animation"
  container_max_width_px: 1300
  narrow_container_max_width_px: 1060
  desktop_padding_px: { left: 100, right: 56 }
  mobile_padding_px: { left: 20, right: 20 }
  forbidden_compositions:
    - "floating rounded cards with soft shadows"
    - "centered startup-template grids without structural alignment"
    - "decorative gradients or glass effects"
    - "inline serif emphasis inside sans headlines"
spacing:
  scale_px: [4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 72, 100]
components:
  buttons:
    geometry: "square corners, visible border, compact sans or uppercase mono label"
    padding_px: [11, 22]
    font_weight: 500
  panels:
    geometry: "square, ruled, flush to the grid"
    shadow: "none"
  code:
    family: ibm_plex_mono
    surface: "#1A1714"
```

## Imagery

```yaml
imagery:
  photographic_style: "No default photography system is established. Prefer product truth, diagrams, files, and infrastructural detail over generic lifestyle imagery."
  illustration_style: "Technical diagrams, file trees, protocol flows, and restrained geometric marks."
  iconography_style: "Simple line or solid functional icons; never decorative AI symbolism."
  forbidden_treatments:
    - "synthetic gradients suggesting AI or neural activity"
    - "generic abstract technology imagery"
    - "stock photography of teams at laptops"
    - "glowing blue or purple lighting effects"
    - "terracotta or rust substitutions for International Orange"
    - "rounded glass cards, soft shadows, or inflated three-dimensional icons"
  logo_presence_rule: "The logo is visible by default on every Encoded-controlled surface. Type and color support the mark; they do not replace it."
```