--- bcp_version: "0.8" file_type: visual parent: /.well-known/brand.md last_updated: 2026-09-21 supersedes: "visual.md tree v1.9.9 (Instrument Sans / IBM Plex Mono / #C03614 / 0px radius)" source: "Encoded Brands Design System Origins.fig, pages Marketing and Encoded-Design-System" --- # Visual Encoded is editorial and engineered. A monochrome foundation carries the structure, International Orange carries action, and verification green carries one meaning only. Wide photographic openers, large amounts of quiet grey, one orange event per view. The system reads premium because it withholds. Almost nothing is decorated. Every edge in this system is an inset ring, not a shadow. Depth comes from surface value, never from elevation. ## Logo ```yaml logo: primary_black: variants: - format: svg path: "assets/logomark-black.svg" background: "light or white" purpose: "Default mark on light surfaces." - format: png path: "assets/logomark-black.png" primary_white: variants: - format: svg path: "assets/logomark-white.svg" background: "ink, or a solid surface dark enough to hold it" purpose: "Reversed mark on dark and orange surfaces." - format: png path: "assets/logomark-white.png" lockup_black: variants: - format: png path: "assets/logo-lockup-black.png" purpose: "Mark plus wordmark. The only approved wordmark artwork." lockup_white: variants: - format: png path: "assets/logo-lockup-white.png" geometry: viewbox: "0 0 169.34 195.58" fill: currentColor note: "The mark is a single path and inherits color from its parent. It has exactly two colorways." ``` ## Logo usage ```yaml logo_usage: minimum_size: digital_px: 20 standard_sizes_px: [26, 30, 34, 44] approved_backgrounds: - { type: solid_color, token: "--ec-surface", note: "Use primary_black." } - { type: solid_color, token: "--ec-surface-subtle", note: "Use primary_black." } - { type: solid_color, token: "--ec-surface-strong", note: "Use primary_white." } - { type: solid_color, token: "--ec-surface-accent", note: "Use primary_white." } - { type: photographic, note: "Permitted only inside a solid container, as in the nav capsule over the hero." } forbidden_backgrounds: - { type: gradient, note: "The identity uses no decorative gradients." } - { type: patterned } - { type: photographic_direct, note: "Never place the mark on bare photography." } forbidden_modifications: [stretch, rotate, recolor outside the two colorways, drop shadow, glow, outline, crop, unapproved container shape, animate] wordmark_rule: "There is no drawn wordmark beyond the lockup files. Where a wordmark is needed at a size the PNG cannot serve, set Encoded Brands in Aeonik Medium." presence_rule: "The logo is visible by default on every Encoded-controlled surface. Type and color support the mark, they do not replace it." ``` ## Color International Orange is the aerospace value `#FF4F00`. The pigment red `#BA160C` carried on the original brand board, and the `#C03614` published in the previous visual.md, are both superseded. ```yaml color: neutral_ramp: "--ec-neutral-0": "#FFFFFF" "--ec-neutral-50": "#F7F7F7" "--ec-neutral-100": "#F0F0F0" "--ec-neutral-150": "#E7E7E7" "--ec-neutral-200": "#D6D6D6" "--ec-neutral-300": "#B8B8B8" "--ec-neutral-400": "#8D8D8D" "--ec-neutral-500": "#666666" "--ec-neutral-600": "#4A4A4A" "--ec-neutral-700": "#292828" "--ec-neutral-800": "#1A1A1A" "--ec-neutral-900": "#0D0D0D" "--ec-neutral-1000": "#000000" accent_ramp: "--ec-orange-50": "#FFF2EB" "--ec-orange-100": "#FFE0D1" "--ec-orange-300": "#FF9B6B" "--ec-orange-500": "#FF4F00" "--ec-orange-600": "#E64700" "--ec-orange-700": "#B83900" "--ec-orange-900": "#5C1D00" verification_green: "--ec-green-100": "#DDF8E8" "--ec-green-500": "#22A65A" "--ec-green-700": "#13713B" rule: "Green means one thing: a Registry record whose domain control is proven. Never use it for success toasts, positive deltas, or general affirmation." named_brand_swatches: BLACK: "#000000" WHITE: "#FFFFFF" INTERNATIONAL_ORANGE: "#FF4F00" DAWN: "#FCA73D" SANTA_MONICA: "#C6CFCC" SILVER: "#EEEEEE" note: "DAWN, SANTA MONICA, and SILVER are board swatches, not interface color." deprecated: "--ec-international-orange-legacy": "#BA160C" removed_from_previous_system: ["#C03614", "#922810", "#F4E8E4", "#2C3E2D protocol moss", "#E4EBE4 protocol tint", "#B87A1A live state amber"] note: "Protocol state and live state are carried by the trust ladder, not by additional brand colors." semantic: surface: "--ec-bg-page": "#FFFFFF" "--ec-surface": "#FFFFFF" "--ec-surface-subtle": "#F7F7F7" "--ec-surface-muted": "#F0F0F0" "--ec-surface-strong": "#1A1A1A" "--ec-surface-accent": "#FF4F00" "--ec-surface-accent-subtle": "#FFF2EB" text: "--ec-text-primary": "#1A1A1A" "--ec-text-secondary": "#666666" "--ec-text-tertiary": "#8D8D8D" "--ec-text-inverse": "#FFFFFF" "--ec-text-inverse-muted": "rgba(255,255,255,.8)" "--ec-text-accent": "#FF4F00" "--ec-text-on-accent": "#FFFFFF" line: "--ec-border-hairline": "rgba(26,26,26,.03)" "--ec-border-subtle": "rgba(26,26,26,.1)" "--ec-border-default": "#E7E7E7" "--ec-border-strong": "#D6D6D6" "--ec-divider": "rgba(26,26,26,.2)" action: "--ec-action-primary": "#FF4F00" "--ec-action-primary-hover": "#E64700" "--ec-action-primary-press": "#B83900" "--ec-action-on-primary": "#FFFFFF" "--ec-action-secondary": "#F0F0F0" "--ec-action-secondary-hover": "#E7E7E7" "--ec-action-on-secondary": "#1A1A1A" "--ec-focus-ring": "#FF4F00" review_state: pending: { bg: "#FFF2EB", fg: "#FF4F00", face: mono } confirmed: { bg: "#E7E7E7", fg: "#1A1A1A", face: "body 600" } trust_ladder: available: { bg: "#F7F7F7", fg: "#8D8D8D", face: mono, note: "A free handle, not yet published. Not a trust_level." } claimed: { bg: "#E7E7E7", fg: "#1A1A1A", face: "body 600", note: "Published and integrity-signed. Domain control unproven." } verified: { bg: "#DDF8E8", fg: "#13713B", dot: "#22A65A", face: "body 600", note: "DNS TXT proves domain control. official_brand_source true." } certified: { bg: "#1A1A1A", fg: "#FFFFFF", face: "body 600", note: "Paid entitlement. Orthogonal to the ladder, never rendered inside it." } integrity_signed: { face: mono, fg: "#8D8D8D", note: "Plain metadata, never a chip. It is not a rung." } code_surface: "--ec-code-bg": "#1A1A1A" "--ec-code-fg": "rgba(255,255,255,.88)" "--ec-code-key": "#FF9B6B" "--ec-code-string": "#FFFFFF" "--ec-code-value": "#22A65A" "--ec-code-punct": "rgba(255,255,255,.4)" "--ec-code-comment": "rgba(255,255,255,.35)" "--ec-code-heading": "#FF4F00" rule: "Syntax color carries meaning. Keys and paths in orange-300, values in white, booleans and trust levels in verification green, punctuation and comments dropped back, markdown headings in International Orange. Nothing else is colored." approved_pairs: - { foreground: "--ec-text-primary", background: "--ec-surface" } - { foreground: "--ec-text-primary", background: "--ec-surface-subtle" } - { foreground: "--ec-text-primary", background: "--ec-surface-muted" } - { foreground: "--ec-text-inverse", background: "--ec-surface-strong" } - { foreground: "--ec-text-on-accent", background: "--ec-surface-accent" } - { foreground: "#13713B", background: "#DDF8E8" } forbidden_pairs: - { foreground: "--ec-action-primary", background: "--ec-surface", reason: "International Orange is not a body-copy color. Use it for display emphasis, rules, states, and bounded actions." } - { foreground: "--ec-orange-600", background: "--ec-orange-500", reason: "Insufficient functional distinction." } - { foreground: "--ec-green-500", background: "--ec-surface", reason: "Green is a state color, not a text color." } dark_mode: scope: ":root[data-theme='dark'], .ec-dark" note: "A full semantic override ships. Primitives do not change, only the semantic layer." ``` ## Typography ```yaml typography: families: aeonik: family: "Aeonik" role: "display and all headings" weights: [200, 300, 400, 500, 700, 900] styles: [normal, italic] source: "licensed, shipped in assets/fonts" token: "--ec-font-display" inter: family: "Inter" role: "all body copy and interface text" weights: [300, 400, 500, 600, 700] source: "Google Fonts" token: "--ec-font-body" geist_mono: family: "Geist Mono" role: "labels, eyebrows, button text, metadata, code" weights: [400, 500] source: "Google Fonts" token: "--ec-font-mono" substitution_note: "The design file specifies Ingram Mono, which is not licensed. Geist Mono is the shipped substitute and is already used in the source file for the CANONICAL pill, the editorial stat figures, and article metadata." serif: none display_scale: display_xl: { size: 86, line_height: 86, tracking: -3.44, weight: 500 } display_lg: { size: 56, line_height: 60, tracking: -2.24, weight: 700 } h1: { size: 54, line_height: 59.4, tracking: -2.16, weight: 500 } h2: { size: 43, line_height: 43, tracking: -2, weight: 500 } h3: { size: 32, line_height: 33, tracking: -1, weight: 500 } h4: { size: 24, line_height: 24, tracking: -0.5, weight: 500 } h5: { size: 20, line_height: 28, tracking: -0.4, weight: 500 } h6: { size: 18, line_height: 18, tracking: -0.2, weight: 700 } numbered_accordion: { size: 18, line_height: 19.8, tracking: -0.72, weight: 500 } body_scale: body_lg: { size: 18, line_height: 28, weight: 300 } body: { size: 16, line_height: 24, weight: 300 } body_md: { size: 15, line_height: 22.5, weight: 400 } body_sm: { size: 14, line_height: 21, weight: 300 } body_xs: { size: 14, line_height: 19.6, tracking: 0.28, weight: 400 } caption: { size: 12, line_height: 16.8, tracking: 0.12, weight: 300 } micro: { size: 11, line_height: 11, tracking: 0.5, weight: 500, transform: uppercase } mono_scale: label: { size: 12, line_height: 19.2, transform: uppercase } label_sm: { size: 11, line_height: 11, tracking: 1, transform: uppercase } label_xs: { size: 10, line_height: 16, tracking: 1, transform: uppercase } stat: { size: 32, line_height: 32, tracking: -2 } code: { size: 12, line_height: 19.2 } rules: - "Tracking is negative on every display and heading size, and scales with the size." - "Headlines are sentence case and end in a full stop." - "Uppercase is only ever mono." - "A card statistic is Aeonik 43 on a colored tile. An editorial statistic is mono 32 bare on the page. Mono says measurement, Aeonik says headline. Do not swap them." - "The article standfirst is the one place body copy is set in Aeonik rather than Inter." - "Minimum body size is 12px. Minimum mono label size is 10px." ``` ## Layout and shape ```yaml layout: density: "calm, information-dense where technical proof is shown" hierarchy: "large Aeonik display type, restrained Inter body, uppercase mono eyebrows" page_gutter_px: 64 shell_inset_px: 12 section_gap_px: 180 editorial_text_column_px: 600 standfirst_column_px: 460 card_module: { column_px: 279, row_px: 315, gutter_px: 16 } grid_note: "Content cards size in whole units of the card module. A card declares span and rows, never a hand-set pixel size. A row of four 1x1 cards is the marketing default; the editorial card is 2x2." forbidden_compositions: - "decorative gradients, glass, or blur effects" - "drop shadows of any kind" - "centered startup-template grids without structural alignment" - "numbered sections outside the workflow steps and the dark accordion" - "stacked eyebrows above a headline" spacing: scale_px: [0, 4, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80, 120] base: 4 radius: none: 0 xs: 5 status: 4 sm: 6 md: 10 lg: 14 xl: 20 "2xl": 30 round: 60 full: 1000 house_radius: 10 note: "10px is the house radius: cards, nav, media crops, status panels. 5px for controls, 14px for inner wells, 20px for full-width shell panels, 4px for status chips, 100 to 1000 for pills and circular buttons. The previous system's 0px square geometry is retired." edges: method: inset_ring "--ec-ring-subtle": "inset 0 0 0 1px rgba(26,26,26,.1)" "--ec-ring-default": "inset 0 0 0 1px #E7E7E7" "--ec-ring-strong": "inset 0 0 0 1px #D6D6D6" "--ec-ring-inverse": "inset 0 0 0 1px rgba(255,255,255,.14)" shadow: none controls: height_sm_px: 34 height_md_px: 44 height_lg_px: 51 icon_sizes_px: [16, 20, 24, 30] focus: "2px solid #FF4F00 at 2px offset" ``` ## Components ```yaml components: primary_button: height_px: 51 radius_px: 5 padding: "3px 24px 3px 3px" min_width_px: 200 background: "--ec-action-primary" label: "mono 12/19.2, uppercase, --ec-action-on-primary" hover: "--ec-action-primary-hover" border: none rule: "At most one per view. Never stretched to container width." secondary_button: height_px: 51 radius_px: 5 padding: "12px 16px" background: "--ec-action-secondary" label: "mono 12, uppercase, --ec-action-on-secondary" status_chip: radius_px: 4 padding: "4px 10px" size_px: 11 transform: uppercase tones: [pending, confirmed, available, claimed, verified, certified, neutral] section_label: composition: "monogram, 1px rule filling the remaining width, uppercase mono caption" gap_px: 20 rule: "The only eyebrow the brand uses. Mirrors on dark sections: caption left, mark right." card: footprint_px: "279 x 315, or whole multiples of the card module" radius_px: 10 padding_px: 24 background: "--ec-surface or --ec-surface-accent" edge: "--ec-ring-default on light cards, none on accent cards" content: "icon tile 60px at radius 16 top, content anchored to the bottom edge with space-between" insight_card: span: "2 x 2 of the card module" composition: "370px grey text panel above a 260px image panel, 20px gap" affordance: "49px circular ink button, turns International Orange on hover" faq_item: background: "--ec-surface-strong" radius_px: 10 padding_px: 20 title: "Aeonik Medium 20/28 at -0.4, 90% white" body: "Inter Light 16/24 at 80% white" glyph: "one X, rotated 45 degrees when closed" rule: "Never inverts. Stays dark on light and dark grounds alike." numbered_accordion: ground: "place on --ec-surface-strong" padding_px: 30 gutter: "// 01 in Inter Light 14/21 at 40% white, orange when open" title: "Aeonik Medium 18/19.8 at -0.72" badge: "white pill, radius 100, mono 10/16 uppercase, 20% white inset ring" open_state: "3% white wash and a 3% inset ring; closed rows are bare" rule: "One row open at a time. This and the workflow steps are the only numbered patterns in the system." site_nav: height_px: 48 radius_px: 10 padding: "5px 26px 5px 5px" background: "--ec-surface" edge: "--ec-ring-subtle" links: "Inter 400 14/19.6 at 0.28 tracking, 65% opacity, 100% on hover or active" rule: "Sized to content and floated over the hero. Never full width. Carries no CTA." step_indicator: counter: "mono 11, International Orange when active" label: "Aeonik Bold 13 at 1px tracking, uppercase" active_rule: "80 x 2 px, International Orange" claim_card: radius_px: 10 padding_px: 24 gap_px: 16 statement: "Inter 400 15/22.5" edge: "--ec-ring-default pending, --ec-ring-strong confirmed" rule: "A confirmed card swaps its action row for the confirmation footnote and an orange underlined Change Response link." trust_badge: radius_px: 10 padding_px: 20 rule: "Always states what the signature proves. Only a verified record may show official_brand_source true. Certified renders beside the ladder, never inside it." file_tree: row: "leaf name in mono 12, leader rule, plain-language note in Inter Light 12" active: "leaf name in International Orange" default_contents: "brand.md plus voice, voice/anti-ai, values, boundaries, claims, representation, visual, and the optional commerce handoff" code_block: surface: "--ec-code-bg, or --ec-code-bg-light inside white cards" radius_px: 10 type: "mono 12/19.2" caption: "mono 11 uppercase at 55% white, above a 10% white rule" languages: [markdown, yaml, http, text] markdown_view: rule: "Frontmatter renders as a mono key/value plate on --ec-surface-subtle so metadata never reads as body copy. Headings map to the Aeonik scale. Bullets take an orange em-rule instead of a disc. Blockquotes take a 2px orange inset rule." article_header: padding: "50px 40px 40px 40px" gap_px: 30 title: "Aeonik Medium 86/86 at -3.44" standfirst: "Aeonik Regular 16/24 at 80% ink, capped at 540px" meta: "mono 10/16 uppercase label with a trailing hyphen, Inter 400 14/19.6 value" stat: value: "mono 32/32 at -2px" body: "Inter Light 14/21 at 0.28 tracking" rule: "Runs three or four across beneath a text block. Bare on the page, never on a tile." ``` ## Motion and states ```yaml motion: duration_fast_ms: 120 duration_base_ms: 180 duration_slow_ms: 320 ease_standard: "cubic-bezier(.2,0,0,1)" ease_out: "cubic-bezier(0,0,.2,1)" policy: "Functional and restrained. Color transitions, a 45 degree glyph rotation, and a slow linear marquee. No ambient AI animation, no bounce, no scale-in, no parallax." states: hover: "color only. Orange darkens to #E64700, grey goes #F0F0F0 to #E7E7E7, nav links rise from 65 to 100 percent opacity, the insight card arrow turns orange." press: "color only. Nothing shrinks, nothing shadows." focus: "2px #FF4F00 outline at 2px offset." disabled: "background --ec-neutral-200, text --ec-neutral-400." selection: "background #FF4F00, text #FFFFFF." link: "--ec-text-primary, hovering to --ec-action-primary. Underline only on inline body links and the Change Response action." ``` ## Imagery and iconography ```yaml imagery: photographic_style: "Cool, desaturated, wide. Architectural and atmospheric rather than people-first; where people appear they are small in frame." crop: "10px radius, or 13px for the full-bleed editorial panel." placement: "Full-bleed for heroes and section openers. Never behind body copy." overlay_pattern: "assets/img/pattern-overlay.png, the monogram tile, laid over imagery to protect type." forbidden_treatments: - "synthetic gradients suggesting AI or neural activity" - "generic abstract technology imagery" - "stock photography of teams at laptops" - "glowing blue or purple lighting" - "terracotta or rust substitutions for International Orange" - "warm filters, grain, or duotone" - "rounded glass cards, soft shadows, inflated three-dimensional icons" iconography: system: none rule: "No icon library, no icon font, no emoji, no unicode glyph substitutes. Every glyph is a drawn vector, single-color, inheriting currentColor." glyphs: monogram: "the Encoded E. Nav, section labels, footer, app header." arrow: "45 degree arrow in the insight card's circular button." close: "one X, rotated to read as a plus when the accordion is closed." trend: "the metric card icon tile, swappable." stroke_weight: "matches the drawn source, approximately 1.1px at 16px" sizes_px: [16, 20, 24, 30] new_glyph_rule: "Draw to match the four existing glyphs rather than importing a library. Never fall back to emoji." ``` ## Asset index ```yaml assets: stylesheet_entry: "styles.css" tokens: ["tokens/fonts.css", "tokens/colors.css", "tokens/typography.css", "tokens/spacing.css", "tokens/shape.css", "tokens/motion.css", "tokens/base.css"] fonts: "assets/fonts, fifteen Aeonik faces" logos: ["assets/logomark-black.svg", "assets/logomark-white.svg", "assets/logomark-black.png", "assets/logomark-white.png", "assets/logo-lockup-black.png", "assets/logo-lockup-white.png", "assets/wordmark-black.svg", "assets/wordmark-white.svg", "assets/e-mark.svg", "assets/wordmark-footer.svg"] imagery: "assets/img" components: 21 component_groups: ["core", "cards", "disclosure", "navigation", "registry", "editorial"] ui_kits: ["marketing site", "editorial page", "Encode review workspace"] specimen_cards: 29 design_guide: "readme.md" agent_skill: "SKILL.md" ``` ## Change log - 2026-09-22: Components renamed to product vocabulary. PrimaryButton, SecondaryButton, MetricCard, InsightCard, QuoteCard, ClaimCard (was StatementCard), BrandTile (was CompanyLogoTile), FaqItem (was AccordionItem), NumberedAccordion (was AccordionRow), SiteNav (was MarketingNav), WorkflowSteps (was StepIndicator), Stat (was StatFigure). The Figma file is a starting point, not the naming authority. - 2026-09-21: Replaced the previous visual system. International Orange moved from the pigment `#C03614` to the aerospace `#FF4F00`. Instrument Sans and Instrument Serif replaced by Aeonik and Inter; IBM Plex Mono replaced by Geist Mono. Square 0px geometry replaced by a 10px house radius. Moss and amber retired in favor of the trust ladder plus verification green. Drop shadows replaced by inset rings throughout. Added the card module, the trust ladder, the code and markdown surfaces, and the editorial figures. ## Animated logomark Two loops in `assets/motion/`, rebuilt from the original GIFs as transparent frame sheets (250px frames, 12 per row) in black, white and orange. - Slow, 4.8s loop (120 frames at 40ms): `logomark-slow-{ink|white|orange}-sprite.png`. Ambient: page loaders, splash, empty states. - Fast, 2.67s loop (89 frames at 30ms): `logomark-fast-{ink|white|orange}-sprite.png`. Active work: an encode in progress, publishing, an agent reading. - React: ``. Plain HTML: load `assets/motion/encoded-mark.js`, then ``. Both step through the sheet in time; nothing else to wire. - Also kept: the original GIFs (white background), frame timings in `logomark-motion.json`, and a still of the fully formed mark (`*-rest.png`). Orange (#FF4F00) on white or ink surfaces only, never on photography or the Dawn gradient. The static mark stays black or white. One animated mark per screen. Under `prefers-reduced-motion: reduce` it holds on the fully formed frame. Display at 250px or smaller.