Brand-domain control has been proven through Registry verification.
visual.md
---
bcp_version: "1.1.0"
file_type: visual
parent: /.well-known/brand.md
last_updated: 2026-09-24
---
# Visual
Encoded is clean, structural, and editorial. International Orange (#FF4F00) is the single brand accent against ink, white, and disciplined grays. Dawn is an approved gradient treatment for bounded hero artwork, not a second brand color. The new logomark, visible rules, inset edges, and measured spacing hold the system together across marketing and product surfaces.
## Logo
```yaml
logo:
logomark_ink:
variants:
- format: svg
url: "https://encodedbrands.ai/ds/logo/logomark.svg"
sha256: 463248a23baac37b8573145ecf20a2904c0506a74a66683bbf0241c05bafbfaa
background: "light or white; render currentColor as ink"
purpose: "New logomark on light surfaces and in structural dividers."
logomark_white:
variants:
- format: svg
url: "https://encodedbrands.ai/ds/logo/logomark-white.svg"
sha256: ed3f4600e190a06d9a2085c8e5bec4f3c5ceab46699d2c667fed7f5448382f8c
background: "ink or sufficiently dark solid surface"
purpose: "Reversed new logomark on dark surfaces."
lockup_ink:
variants:
- format: png
url: "https://encodedbrands.ai/ds/logo/logo-lockup-black.png"
sha256: eadbde7de02c31d7fe8c59f1450d10b402c34747bdd1053b7c80d828e4ba8f60
background: "light or white"
purpose: "New full lockup on light surfaces."
lockup_white:
variants:
- format: png
url: "https://encodedbrands.ai/ds/logo/logo-lockup-white.png"
sha256: 2c479955dcfb087ac7a6d0cd3cfdc26de6607a479f22280c256ad1a7e193dbfb
background: "ink or sufficiently dark solid surface"
purpose: "New full lockup on dark surfaces."
```
## Logo usage
```yaml
logo_usage:
placement_rule: "Place the upright logomark in intentional header or full-width divider moments; do not repeat it as a decorative prefix on every eyebrow label."
clear_space:
rule: "Keep clear space around the mark at least equal to the height of its core symbol. Dividers may center the mark between ruled lines without touching it."
machine_value:
unit: x-height
multiplier: 1.0
minimum_size:
digital_px: 24
approved_backgrounds:
- type: solid_color
color_token: surface
note: "Use logomark_ink or lockup_ink."
- type: solid_color
color_token: surface_inverse
note: "Use logomark_white or lockup_white."
- type: solid_color
color_token: primary
note: "Use a white variant only when contrast is sufficient."
- type: gradient
note: "Allowed only on the approved Dawn artwork with sufficient contrast and a quiet area behind the mark."
forbidden_backgrounds:
- 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
- substitute the retired dot-grid mark
```
## Color
```yaml
color:
tokens:
surface:
hex: "#FFFFFF"
role: surface
primary:
hex: "#FF4F00"
role: primary
description: "International Orange; the one dominant brand color."
primary_hover:
hex: "#E64700"
role: secondary
description: "Hover state for the primary action."
primary_pressed:
hex: "#B83900"
role: secondary
description: "Pressed state and deep accent; distinct from hover."
primary_tint:
hex: "#FFF2EB"
role: surface
description: "Tint background only; never body text."
text:
hex: "#1A1A1A"
role: text
text_strong_secondary:
hex: "#292828"
role: text
text_secondary:
hex: "#666666"
role: text
text_caption:
hex: "#8D8D8D"
role: neutral
border_secondary:
hex: "#D6D6D6"
role: neutral
border_hairline:
hex: "#E7E7E7"
role: neutral
surface_subtle:
hex: "#F7F7F7"
role: surface
text_inverse:
hex: "#FFFFFF"
role: text-inverse
surface_inverse:
hex: "#1A1A1A"
role: surface-inverse
dawn:
hex: "#FCA73D"
role: secondary
description: "A supporting swatch within approved Dawn artwork, not a second CTA color."
verified:
hex: "#22A65A"
role: success
description: "Functional Registry verified state only."
approved_pairs:
- { foreground: text, background: surface }
- { foreground: text, background: surface_subtle }
- { foreground: text_inverse, background: surface_inverse }
- { foreground: text_inverse, background: primary }
- { foreground: text, background: primary_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:
aeonik:
family: "Aeonik"
fallback_stack: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
weights: [300, 400, 500, 700, 900]
styles: [normal]
source: "Licensed Encoded Brands font files"
inter:
family: "Inter"
fallback_stack: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
weights: [300, 400, 500, 600, 700]
styles: [normal]
source: "Google Fonts"
geist_mono:
family: "Geist Mono"
fallback_stack: "SFMono-Regular, Menlo, Consolas, monospace"
weights: [400, 500]
styles: [normal]
source: "Google Fonts"
license_note: "Shipped label face; Ingram Mono is not licensed for this site."
roles:
display: aeonik
body: inter
ui: inter
mono: geist_mono
code: geist_mono
```
## Layout and components
```yaml
layout:
density: "calm, information-dense where technical proof is shown"
whitespace: "measured vertical rhythm with asymmetric desktop gutters"
grid: "structured columns, visible rules, and full-width technical panels"
hierarchy: "large Aeonik display type, restrained Inter body copy, uppercase Geist Mono labels"
eyebrow_usage: "Use small mono labels only for meaningful navigation or section metadata; do not place an eyebrow above every hero, card, or module by default."
section_numbering: "Do not number marketing sections or cards for decoration; use ordinals only for literal workflow steps or technical structures where order conveys information."
corner_radius: "10px cards and navigation, 20px shell panels, 5px buttons, 4px status chips"
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 cards with soft drop shadows"
- "centered startup-template grids without structural alignment"
- "unapproved gradients or glass effects"
- "inline serif emphasis inside Aeonik headlines"
spacing:
scale_px: [0, 4, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80, 120]
section_gap_px: 180
components:
buttons:
geometry: "5px corners, clear primary or secondary action, compact sans or uppercase mono label"
padding_px: [12, 24]
font_weight: 500
panels:
geometry: "10px cards and 20px shell panels, inset border rings, aligned to the grid"
shadow: "inset ring only; no offset drop shadow"
code:
family: geist_mono
surface: "#1A1A1A"
dividers:
geometry: "full-width ruled line with the logomark centered where the section requires it"
gradients:
approved_hero: "Dawn artwork, used as a bounded hero treatment behind high-contrast content"
asset: "https://encodedbrands.ai/ds/img/gradient-dawn.png"
```
## Imagery
```yaml
imagery:
photographic_style: "Use approved brand photography where it carries meaning; otherwise prefer product truth, diagrams, files, and infrastructural detail."
illustration_style: "Technical diagrams, file trees, protocol flows, restrained geometric marks, and approved Dawn-gradient artwork."
iconography_style: "Simple line or solid functional icons; never decorative AI symbolism."
forbidden_treatments:
- "unapproved 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"
- "glass cards, soft drop 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."
```