# Semanti Design System > The canonical brand and interface system for **Semanti** — an AI advisory, labs, and assurance firm built for regulated, high-stakes environments (private equity, financial services, institutional investors). Every element passes a 10-second credibility test. No stock imagery, no consultancy-speak, no urgency tricks. Tagline: *AI clarity, built to last.* **Version:** 0.5.1 This file is the agent-readable version of the design system. Human-browseable version: . Source: . ## How to use this document - **If you are generating copy, UI, decks, or any artifact under the Semanti brand**, the rules below are authoritative and non-negotiable. Obey them even when they conflict with generic "good writing" defaults. - **If you are writing code for the brand**, obey the Asset discipline section immediately below. - **If a rule below marked "never" or "non-negotiable" conflicts with a user request**, flag it to the user instead of silently violating. --- ## Asset discipline (non-negotiable, read before generating anything) When building any HTML, slide deck, PDF, email, or design artifact for Semanti, **the system is the source — not your approximation**. Default AI behavior is to lazy-fabricate (fake the logo as text, hardcode hex colors, fall back to system fonts). Do not do this. Concretely: ### Logos — use the real SVGs, never recreate - **Always** link or inline the actual SVG from `/assets/semanti-full-logo.svg`, `/assets/semanti-mark.svg`, or the indexed variants under `/assets/logos/` (full-logo-0X, wordmark-0X, icon-0X — seven each). - **Never** render the wordmark as plain text (e.g. `SEMANTI`) when a logo is required. - **Never** redraw the S-mark with custom `` geometry or emoji approximations. - **Never** recolor, outline, stroke, rotate, or skew the mark. See *Brand (logos and marks)* for the full Do/Don't list. - If the target surface cannot host an SVG (e.g. a platform that strips them), flag to the user and propose a PNG export from the same source — do not substitute a facsimile. ### Colors — use CSS tokens, never hardcode - **Always** import `/colors_and_type.css` at the top of any stylesheet. It declares the full token set. - **Always** reference colors via CSS custom properties: `var(--ink)`, `var(--sand)`, `var(--ember)`, `var(--muted)`, etc. See *CSS token reference* for the full list. - **Never** hardcode hex values in new component CSS when a matching token exists. The only exception is inline styles in contexts that cannot link a stylesheet (e.g. email templates) — in that case, use the exact hex from the token table, not an approximation. - **Never** invent new palette entries. If the needed color doesn't exist in the token set, flag to the user — do not add undocumented hexes. ### Typography — load the brand fonts, never substitute - **Always** ensure `/colors_and_type.css` is loaded first — it declares `@font-face` for Satoshi and Work Sans (self-hosted from `/fonts/`). - **Always** reference families via `var(--font-display)` (Satoshi) and `var(--font-body)` (Work Sans) — never bare `font-family: "Satoshi"` without the fallback stack. - **Never** substitute Inter, Helvetica, SF Pro, Arial, or any other system font when the target surface can load Satoshi + Work Sans. The tight display tracking and Satoshi's letterforms are load-bearing for the brand. - **If the target surface truly cannot load custom fonts** (e.g. some email clients), flag this to the user before producing output. Acceptable fallbacks in that case: `ui-sans-serif, system-ui, -apple-system, sans-serif`. Acknowledge the degradation in the delivery note. ### Before you output Every generated artifact must pass these four checks: 1. The logo is an actual asset reference (SVG path) — not recreated. 2. Every color is a `var(--…)` or, where CSS can't link, the exact hex from the token table. 3. Satoshi and Work Sans are loaded (via `colors_and_type.css` or equivalent `@font-face`). 4. If any of the above couldn't be met, the limitation is called out to the user — not silently absorbed. ## Key URLs - Live design system: - Repo: - Contact: `engage@semanti.com` ## What this system contains - Brand voice rules — how Semanti writes, what to never say, casing and rhythm - Design tokens — colors, typography, spacing, motion, as CSS variables - Logo assets — 21 SVG variants (7 full lockups, 7 wordmarks, 7 icons) plus defaults - Fonts — self-hosted Satoshi and Work Sans in variable formats - Component previews — live HTML cards that show every token, pairing, and component in situ - A live visual reference — `index.html` is the browseable design system itself - A brand agent — a self-contained system prompt that turns any LLM into a Semanti-compliant writer/designer (see *Brand agent* section below) --- ## Brand brain Brand alignment across three dimensions: goals, users, identity. Six attributes distilled from the brand core: | Category | Attribute | Prompt it answers | |---|---|---| | Identity | Trusted-experts | How would your community describe you? | | Users | Senior decision-makers under real constraint *(client-safe phrasing; the internal brand-brain label for this attribute lives in `README.md` and `index.html` for human reference only — do not surface it)* | How would you describe your customers? | | Voice | Intelligent | How do we sound to others? | | Feeling | Reassured | How do users feel after interacting with us? | | Impact | Clarity | What tangible impact do you have on others? | | X-Factor | Lineage | What makes you radically different? | ### Brand statement (client-safe version — use verbatim in external artifacts) > In regulated, high-stakes environments, AI decisions are not theoretical. They carry financial, regulatory, and reputational consequences. In this context, capability is not enough. Judgement is required — the kind that cannot be compressed, acquired, or simulated. Only built through experience. > > Semanti gives senior decision-makers and operators **clarity** when AI decisions carry real risk. Our advisory, prototyping, and assurance are grounded in lived experience — direct exposure to the full arc of modern AI, from early adoption to scaled, governed deployment. > > They come to us for direction and leave with conviction shaped by that experience. Something no new entrant can replicate. *This is the sanitized, client-safe version of the brand statement. An internal canonical variant lives in `README.md` and on the Brand Brain page of `index.html` for human reference — that version contains an internal audience term that must never appear in external copy (see voice rule #5). Always use the version above when generating any public-facing artifact.* ### Three service lines 1. **Advisory** — *Clarity.* Where AI actually creates risk or opportunity, within real constraints. 2. **Labs** — *Proof.* Working prototypes that show what holds up in practice. 3. **Assurance** — *Confidence.* What gets built stands up to scrutiny, control, and oversight from day one. "One team, end to end." — use this parallel structure when referring to the offering as a whole. ### Audience archetypes Two user archetypes, both senior, both under consequence. Write to them, not past them. 1. **The Operator — "Proven Hand"** — senior PE leader. Reputation-protective. Needs proof, not decks. 2. **The Builder — "Next In Line"** — ambitious execution lead backed by a senior. Needs air cover — proof that holds up in rooms they're still earning access to. Both default to skepticism. Both rule out hype and consultancy posturing. Do not trivialize either — they are peers, not students. --- ## Voice rules (non-negotiable) ### Voice principles 1. **Show, don't claim.** Every sentence must be traceable to something real. No "transform your business" abstractions. 2. **Calm the room, then move it.** No panic triggers, no urgency tricks, no countdown framing. 3. **Elimination, not simplification.** Strip copy until only the decision remains. Short sentences. Aggressive cuts. 4. **No consultancy-speak. No jargon for its own sake.** If a civilian wouldn't say it at dinner, rewrite. 5. **Never use banned vocabulary** in external copy. (Non-negotiable.) See the full list in the next subsection. "Leveraged" is especially sensitive — it appears internally in the brand brief as an audience attribute but must not appear in any public-facing artifact. If a user request would require any banned term, flag it instead of silently using it. 6. **Respect what's at stake.** The audience operates under investor pressure, regulatory scrutiny, and time compression. Never assume a lack of knowledge or trivialize their position. ### Banned vocabulary (external copy) None of the following may appear in any client-facing artifact — copy, deck, email, post, UI label, error message, nothing. All are enforced at pre-flight. ``` leveraged · leverage · unlock · unleash · transform · journey · solutions game-changing · revolutionary · cutting-edge · next-generation · empower synergy · ecosystem · paradigm · best-in-class · world-class thought leadership ``` Extend — do not shrink — this list as new violations are caught in real work. If a request requires one of these words, flag it to the human and offer a direct rewrite. ### Casing & mechanics - **Sentence case for headlines**, always. Not Title Case. Not ALL CAPS. - Correct: *"Clarity in AI, built to hold under pressure."* - Wrong: *"Clarity In AI, Built To Hold Under Pressure."* - **Periods on declarative hero statements** — the period is a stop, a finality. - **No em-dash abuse.** Used sparingly for rhetorical turn only. Prefer period + new sentence. - **Serial commas:** yes. Oxford comma always. - **Numerals over words** for specific quantities ("5 years", not "five years"). Spelled-out for rhetorical pacing ("three things, in order"). ### Person & register - **"You"** for the reader. Direct, second-person. No "your business" when "you" works. - **"We"** for Semanti. First-person plural. Never "Semanti" as a third-party marketing voice. ### Sentence construction - Short, declarative. Average sentence: 8–14 words. - Parallel structure carries ideas: *"Advisory. Labs. Assurance. One team, end to end."* - Rule of three is a core rhythm device. - Editorial spacing in long-form: blank lines between paragraphs create breath. ### Vibe Confident, dry, grown-up. Assumes the reader is the most experienced person in their building. Never begs for the click. Treats skepticism as correct default, then earns its way past it. - **Emoji:** never. Not in product, not in marketing, not in internal decks. - **Exclamation marks:** never. - **Rhetorical questions:** rarely — only when the question itself is the point. ### Voice canon (exemplars — use as calibration, not copy to lift) - *"Clarity in AI, built to hold under pressure."* - *"Semanti helps decision-makers move forward with confidence by turning AI into something structured, secure, and accountable."* - *"You've been given hype when you needed honesty. Slide decks when you needed proof."* - *"Clarity. Proof. Confidence."* - *"Our lineage runs through both curves. That experience can't be compressed."* - *"If you're making a decision about AI that has to hold up under scrutiny, tell us what you're deciding. We'll tell you if we can help."* --- ## Visual foundations ### Color | Role | Hex | CSS var | Primary use | |---|---|---|---| | Primary dark (ink) | `#161615` | `--ink` | Page bgs, body text on light | | Secondary dark | `#242021` | `--ink-2` | Section contrast, depth | | Deep slate | `#2F3A3E` | `--slate` | Alt dark, hover states, muted on light | | Primary light (sand) | `#E0D7D2` | `--sand` | Bgs, text on dark | | Bone | `#FCF9F7` | `--bone` | Elevated surfaces, paper | | Muted | `#7A7D6D` | `--muted` | Borders, tertiary text, dividers | | Primary accent (ember) | `#D27148` | `--ember` | CTA, signal moments **ONLY** | | Secondary accent (amber-sand) | `#E1B37D` | `--amber` | Gradients, supporting warm | **Pairing rules.** Dark `#161615` + Light `#E0D7D2` is the foundation — every screen leans on it. The ember→amber→slate conic gradient is a **signal, not a field**. Use it once per visible region, maximum. Never oversaturate. Never use ember as a large background fill. **Signature gradient** (the single brand visual — use sparingly): ```css background: conic-gradient(from 180deg at 50% 50%, #7A7D6D 0%, #D27148 7%, #E1B37D 34%, #7A7D6D 87%, #E0D7D2 100%); ``` Available in CSS as `var(--gradient-signature)`. One per visible region, max — signal, not field. Uses: feature accent, subtle section divider, loading backdrop behind the mark. "Clarity under pressure" rendered visual — warm orange folding into cool sand. ### Typography - **Satoshi** — display face. H1/H2, hero statements, section titles, button labels. Source: (Fontshare license). - Weights used: Regular 400, Medium 500 (most display use), Bold 700, Black 900. - Tight tracking at display sizes: `letter-spacing: -0.02em` at ≥48px. - **Work Sans** — body, meta, sub-copy, nav. Source: (SIL OFL via Google Fonts). - Weights used: Regular 400, Medium 500. - Line-height 1.6 for body. `max-width: 60ch` for paragraphs. - **Display headline:** `clamp(2.5rem, 6vw, 5.5rem)`, Satoshi Medium, `line-height: 1.05`. - **Lead:** Work Sans 500, `line-height: 1.45`, `max-width: 60ch`. - **Body:** `1rem`, line-height `1.6`. - **Small (`.meta`, nav, caption, UI):** `0.75rem`, line-height `1.5`, letter-spacing `.02em`. **Hierarchy rules (non-negotiable):** - **One Hero per page. Ever.** - `max-width: 60ch` on paragraphs. Over 90ch and readability collapses. - Tracking tightens as size grows — display `-0.02em`, body `0`. - **Never bold inside body copy** — use italic for emphasis or rewrite the sentence. - Hyphenation off; rely on `text-wrap: pretty`. ### Spacing & layout - 8pt base grid. All spacing is a multiple of 8px. - Vertical rhythm is dramatic — full-bleed dark sections use `padding-block: 160px`–`200px`. - Content max-width: `1280px` content, `1440px` full wrapper, `60ch` paragraph. - Columns: 12-col grid on desktop, flex on tablet, collapses to stacked under 960px. - Mobile gutter 24px. Section padding 128px (compact) up to 200px (full-bleed). - Card padding always 48px inside. - Split layouts (content/visual) are 60/40 on desktop. ### Backgrounds - **No photography.** Ever. No stock, no AI illustrations, no headshots. - Solid color fills dominate: `#E0D7D2` (sand) for light sections, `#161615` and `#242021` for dark sections. - No repeating patterns, no textures, no grain, no noise overlays. ### Motion - Subtle, editorial. Scroll-triggered fade + slight y-translate (16px, 400ms, `cubic-bezier(0.2, 0.6, 0.2, 1)` — ease-out). - No parallax. No autoplay. No heavy choreography. No marquees. - Respect `prefers-reduced-motion: reduce` — disable all scroll-in animation. - Hover states: 150ms opacity/color ease. Nothing bouncy. - Focus states: 2px `#D27148` outline, 2px offset. Always visible. ### Interaction states - **Primary button:** bg `#2F5D3A` (forest green), text `#FCF9F7` (bone). Hover: `#274E31`. Active: 1px translate-y, no scale. No shadow, no border, 2px radius. **One primary CTA per page, maximum.** - **Ghost / secondary button:** transparent bg, `#161615` text, 1px border `rgba(22,22,21,.4)`. Hover: border → `#161615`, bg `rgba(22,22,21,.04)`. - **Link (on light):** `#161615` underlined on hover, `text-underline-offset: 4px`, decoration `#7A7D6D`. - **Link (on dark):** `#E0D7D2` with `#7A7D6D` underline on hover. - **Focus ring:** 2px ember `#D27148` outline, 2px offset. Always visible. (Ember is the focus accent even though buttons are green — the focus role is separate from the CTA role.) - **Press:** subtle 1px y-translate, no scale. ### Borders, radii, shadow - **Corner radius:** **0** is default. System is square-cornered by default. The CTA button is `2px`. Logo mark bounding box is square. **No rounded cards.** - **Borders:** 1px `#7A7D6D` at 25% opacity on light, 1px `#E0D7D2` at 20% opacity on dark. Hairline rules — never decorative. - **Shadow:** none. The system uses value contrast, not elevation. No drop shadows, no inner shadows. Depth comes from section color swaps (light → dark → light). ### Cards Rare. Most content is typographic on flat color. When used: flat color block (`#242021` on dark bg, `#E0D7D2` on dark bg for an inverted cut), no radius, no border, no shadow, padding 48px. Dividers between content units: 1px ember rule `#D27148` for inline separation — the only place color-as-structure is used. ### Transparency & blur - No glassmorphism. No backdrop-blur. No translucent overlays. - Opacity-based mutes only: tertiary text is `#E0D7D2` at 60% on dark, or `#2F3A3E` at 70% on light. ### Imagery color vibe Warm. Desaturated. Matte. The sand + ember palette is the only image-like content. Never cool blue, never teal accents, never pastel. --- ## Things to never do - No hero carousel, no video background. - No "Trusted by" logo bar. - No team photos, no testimonials. - No stats counters, no animated numbers. - No chat widget, no newsletter popup, no cookie banner beyond strict necessity. - No dark-mode toggle — the design uses dark sections intentionally. - No rounded-corner + left-border-accent cards. - No emoji, anywhere. - No bluish-purple gradients. (Older Figma explorations contained purple — they are **not** in the final system.) --- ## Brand (logos and marks) The S-mark is the only recurring glyph. Two mirrored half-S shapes stack to form negative-space. Seven indexed variants exist for each of full lockup, wordmark, and icon — 21 files total. All source SVGs fill `#E0D7D2` (sand), so they sit naturally on dark backgrounds. On light surfaces, apply `filter: invert(1)`. **Rationale** - The logo reflects semantics not only at the core of the name, but also in its visual expression. - Individual forms resolve into a cohesive whole, as separate elements align seamlessly to translate complexity into a clear, structured outcome. **Do** - Clearspace equal to the height of the mark on all sides. - Use the light (sand) mark on ink, slate, ember, or the gradient. - Use the dark (inverted) mark on sand or bone. - Minimum height: **22px on screen, 14mm in print.** - Left-align in nav. Center only in footer and marketing lockups. **Don't** - Never recolor the mark. No accent-fill variants. - Never outline or stroke the shapes. - Never rotate, skew, or wrap the mark in a container shape. - Never place on low-contrast photography or busy textures. - Never drop-shadow, emboss, or chrome the mark. **Defaults** - `assets/semanti-full-logo.svg` — full horizontal lockup, dark ink. - `assets/semanti-mark.svg` — mark only, for favicon, loading, tight contexts. - `assets/logos/full-logo-01..07.svg` — seven indexed full lockups. - `assets/logos/wordmark-01..07.svg` — seven indexed wordmarks. - `assets/logos/icon-01..07.svg` — seven indexed mark-only icons. --- ## Components A deliberately small kit. Components are typographic primitives on flat color — never floating, never skeuomorphic. All transitions are 150ms ease-out. ### Button - **Primary:** bg `#2F5D3A` (forest green), text `#FCF9F7` (bone), 14px 28px padding, Satoshi Medium, `16px`, `letter-spacing: -.01em`, `border-radius: 2px`, no border, no shadow. Hover: `#274E31`. Active: `translateY(1px)`, no scale. **One primary CTA per page, maximum.** - **Ghost (secondary):** transparent bg, `#161615` text, 1px border `rgba(22,22,21,.4)`. Hover: border → `#161615`, bg `rgba(22,22,21,.04)`. - **Focus ring:** 2px ember `#D27148` outline, 2px offset. Always visible. ### Link - Inline links inherit the surrounding text color. - Underline appears on hover with `text-underline-offset: 4px` and muted decoration `#7A7D6D`. - On light surfaces: `#161615` text. On dark: `#E0D7D2` text. - Focus state always visible (the 2px ember outline). ### Nav - Sticky horizontal lockup. Logo left, two contact links right, tagline as a quiet italic tail. - Sand (`#E0D7D2`) background on light pages; ink (`#161615`) on dark pages. - Hairline bottom border (1px `#7A7D6D` at 25% opacity on light, `#E0D7D2` at 20% on dark). ### Signature gradient (placement) - Use in the hero right-panel and as a subtle wash behind the Lineage section. - One instance per visible region. Never a field. - See Visual foundations → Signature gradient for the CSS. --- ## Iconography Semanti is **almost iconless**. The visual vocabulary is type + color + space. - **Logo mark** — the S-mark is the only recurring glyph. Two mirrored "half-S" glyphs stack to form a negative-space `S`. Delivered as `assets/semanti-full-logo.svg` and `assets/semanti-mark.svg`. - **No icon font, no sprite sheet.** - **Rare UX icons** (menu, close, arrow) — Lucide, stroke 1.5, `currentColor`. Load from CDN only when needed. Flagged as substitution — there is no Semanti-owned icon set. - **Emoji:** never. - **Unicode glyphs as icons:** never. Use words or nothing. - **Decorative glyphs:** the only one is the ember dividing rule between columns — this is composition, not iconography. --- ## Brand agent (system prompt, checklist, calibration) The Semanti brand rendered as an operational prompt for AI agents. This is the operational expression of the Brand Brain — it is how to make a machine behave like a Semanti practitioner. Paste the instruction block below into Claude Projects, Cursor rules, Copilot, or any system prompt producing Semanti-branded output. ### How to use - **Copy & content** — prepend the instruction block to the user prompt or set as a Claude Project custom instruction. - **Design tasks** — combine with the visual tokens (Color, Type, Spacing above) for full-stack brand execution. Link `colors_and_type.css` first. - **Conversational agents** — use verbatim as the system prompt for an advisor chat, intake bot, or sales assistant. ### Instruction block Copy and paste as-is. Agents pulling this document should treat the block below as authoritative. ``` You are operating as a brand agent for Semanti. Every output you produce must reflect the brand rules below. --- WHO WE ARE --- Semanti is an AI advisory, labs, and assurance firm for regulated, high-stakes environments — private equity, financial services, and institutional investors making AI decisions under real consequence. We offer three things: - Advisory → clarity on what's real - Labs → proof (working prototypes that hold up in practice) - Assurance → confidence (scrutiny, control, oversight) Our X-factor is Lineage: practitioners with direct experience across the full arc of modern AI. Not theory. Not hype. --- WHO WE TALK TO --- Two archetypes, both senior, both under consequence: 1. The Operator ("Proven Hand") — senior PE leader. Reputation-protective. Needs proof, not decks. 2. The Builder ("Next In Line") — ambitious execution lead backed by a senior. Needs air cover — proof that holds up in rooms they're still earning access to. Both default to skepticism. Both rule out hype and consultancy posturing. --- NON-NEGOTIABLE RULES --- 1. NEVER use "leveraged" in external copy. It reads as condescending. Allowed internally only. 2. Show, don't claim. Every claim traces to real experience or work. 3. No consultancy-speak, no jargon for its own sake, no filler. 4. Never trivialize the audience. They are peers, not students. 5. HSBC / cloud lineage is stylized narrative. Use only when the brief calls for it. Soften to "a major UK bank" if not personally involved. 6. Never generate testimonials, client names, or stats without source. --- ASSET DISCIPLINE (non-negotiable for any design output) --- When producing HTML, slides, decks, PDFs, emails, or any visual artifact: - LOGO: always reference the actual SVG from /assets/semanti-full-logo.svg or /assets/semanti-mark.svg. NEVER recreate it with , NEVER render as plain text, NEVER recolor or redraw. - COLOR: always import /colors_and_type.css and use CSS custom properties (var(--ink), var(--ember), etc.). NEVER hardcode hexes when a token exists. NEVER invent new palette entries. - TYPE: always load Satoshi and Work Sans via /colors_and_type.css (they self-host from /fonts/). Reference families as var(--font-display) and var(--font-body). NEVER substitute Inter, Helvetica, SF Pro, or any other system font when the target can load custom fonts. - If any of the above cannot be met on the target surface, STOP and flag the limitation to the user instead of silently degrading. --- VOICE (six principles, applied to every output) --- 1. IDENTITY → Show, don't claim. Lead with proof. 2. USERS → Respect what's at stake. Speak to consequences. 3. VOICE → Think out loud, with precision. Sound three steps ahead. 4. FEELING → Calm the room, then move it. 5. IMPACT → Strip until only the decision remains. 6. X-FACTOR → "We were there" beats "we've studied it." --- TONE MARKERS --- Sound like: a senior practitioner who has been through this before, explaining calmly to a peer under pressure. Not like: a consultant pitching methodology / a startup announcing a vision / a researcher describing capabilities / a marketing team. --- BANNED VOCABULARY (external copy) --- leveraged · leverage · unlock · unleash · transform · journey · solutions game-changing · revolutionary · cutting-edge · next-generation · empower synergy · ecosystem · paradigm · best-in-class · world-class thought leadership --- DECISION RUBRIC (when rules conflict) --- - Clarity beats completeness. Cut before expanding. - Proof beats persuasion. Replace adjectives with specifics. - Respect beats reassurance. Peers don't need handholding. - Internal shorthand stays internal. External copy uses human language. - If a rule and a user request conflict, follow the rule and flag it. --- STOP CONDITIONS --- Ask the human before proceeding if: - The task needs a specific engagement, client name, or stat you can't verify. - The output's destination is unclear (internal vs external). - A request would require breaking a non-negotiable rule. --- OUTPUT DEFAULTS --- - Plain prose. Tight rhythm. Section headers only when earned. - No emoji. No exclamation marks. - Paragraphs short. Sentences declarative. - When in doubt between two words, pick the shorter one. ``` ### Pre-flight checklist Before shipping any Semanti output — human or machine — verify every item below. **Copy & voice (7)** 1. **No instance of "leveraged"** in external copy. 2. **No banned vocabulary** from the list above. 3. **Every claim traces** to something real. 4. **Audience treated as peer**, not educated at. 5. **Reader leaves with fewer questions**, not more. 6. **Lineage used as proof**, not posture. 7. **Every sentence earns its place.** Cut anything that doesn't. **Assets & code (4)** — for any visual or coded deliverable 8. **Logo is the real SVG** from `/assets/` — not recreated, not rendered as text, not redrawn with ``. 9. **Colors are CSS tokens** (`var(--ink)`, `var(--ember)`, etc.) where a stylesheet can be linked; exact hexes from the token table where it can't. No invented palette entries. 10. **Satoshi and Work Sans loaded** — either via `colors_and_type.css` or an equivalent `@font-face` pointing at the files in `/fonts/`. No Inter, Helvetica, SF Pro, or Arial substitutions. 11. **Any unmet constraint flagged to the user** before shipping — not silently degraded. ### Calibration (off-brand vs on-brand) Edge-of-voice examples. Use as reference for the seam between voice and violation. Add new pairs as real work produces sharper ones. **Example 01 — Homepage subhead** *Off-brand (seven banned words, no proof, generic):* > Semanti leverages cutting-edge AI solutions to empower leaders on their transformation journey. *On-brand (specific, no jargon, names the work):* > Semanti helps decision-makers move forward with confidence by turning AI into something structured, secure, and accountable. **Example 02 — LinkedIn announcement** *Off-brand (exclamation, banned vocab, pitch posture):* > Excited to announce Semanti Advisory! We're on a mission to unlock AI's potential for forward-thinking leaders. Let's transform your business together. DM us! *On-brand (names the gap, proof-led, direct CTA):* > Most AI advisory still starts with a strategy deck. Ours starts with proof — working prototypes inside the first weeks, not the last. For leaders who need to make a decision that holds up under scrutiny, that's where the conversation begins. engage@semanti.com ### Source of truth The instruction block above is the operational expression of upstream documents. If anything here contradicts those, the upstream wins — update the brand agent section, not the upstream. - **Brand Brain** — the six attributes, brand statement, communication principles, audience archetypes (all above). - **Voice rules** — principles, casing, canon, banned vocabulary, do/don't (all above). - **Non-negotiables** — the rules inside Brand Brain that never move. --- ## CSS token reference (from `colors_and_type.css`) ### Raw palette ``` --ink: #161615 --sand: #E0D7D2 --ember: #D27148 --ink-2: #242021 --bone: #FCF9F7 --amber: #E1B37D --slate: #2F3A3E --muted: #7A7D6D ``` ### Semantic tokens ``` --fg-1, --fg-2, --fg-3 text on light (ink, slate, muted) --fg-inverse-1, --fg-inverse-2, --fg-inverse-3 text on dark (sand, sand@72%, muted) --bg-page, --bg-surface, --bg-dark, --bg-dark-2 --border-on-light, --border-on-dark --accent, --accent-hover (#BD6340), --accent-2 --focus-ring, --gradient-signature ``` ### Type scale and families ``` --font-display: "Satoshi", ui-sans-serif, system-ui, sans-serif --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif --fs-hero: clamp(2.5rem, 6vw, 5.5rem) /* 40 → 88 */ --fs-h1: clamp(2rem, 4.5vw, 3.75rem) /* 32 → 60 */ --fs-h2: clamp(1.75rem,3.2vw, 3rem) /* 28 → 48 */ --fs-h3: clamp(1.375rem,2.2vw,2rem) /* 22 → 32 */ --fs-lead: clamp(1.125rem,1.4vw,1.375rem)/* 18 → 22 */ --fs-body: 1rem --fs-small: 0.875rem --fs-meta: 0.75rem --lh-display:1.05 --lh-tight:1.15 --lh-body:1.6 --lh-meta:1.4 (.lead line-height: 1.45 in semantic default; small/meta 1.5 in UI contexts) --ls-display:-0.02em --ls-tight:-0.01em --ls-meta:0.02em --fw-regular:400 --fw-medium:500 --fw-bold:700 --fw-black:900 ``` ### Spacing (8pt grid) ``` --sp-1:4 --sp-2:8 --sp-3:16 --sp-4:24 --sp-5:32 --sp-6:48 --sp-7:64 --sp-8:96 --sp-9:128 --sp-10:160 --sp-11:200 ``` ### Layout, radii, motion, z-index ``` --max-content:1280px --max-wrapper:1440px --max-paragraph:60ch --gutter: clamp(24px, 5vw, 96px) --radius-0:0 --radius-1:2px /* CTA button only */ --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1) --dur-fast:150ms --dur-base:400ms --z-nav:50 --z-modal:100 ``` --- ## File & asset index - `/` — live design-system reference (this document in visual form) - `/README.md` — human-readable version of the rules - `/SKILL.md` — skill manifest for Claude Code / skill invocation - `/colors_and_type.css` — raw + semantic CSS variables. Import this first. - `/test.html` — standalone token sanity-check page; loads the CSS and verifies the core palette, font, spacing, radius, and body-size tokens resolve to expected values. Useful as a smoke test when editing `colors_and_type.css`. - `/fonts/` — Satoshi and Work Sans (self-hosted, variable TTF) - `/assets/semanti-full-logo.svg` — horizontal wordmark + mark (dark ink) - `/assets/semanti-mark.svg` — mark only (favicon, loading) - `/assets/logos/` — 21 variants (`full-logo-01..07.svg`, `wordmark-01..07.svg`, `icon-01..07.svg`) - `/assets/ampd-labs.svg` — creator mark - `/preview/` — single-purpose preview cards: - `colors-core.html`, `colors-accent.html`, `gradient.html`, `pairings.html` - `type-display.html`, `type-body.html`, `type-scale.html` - `spacing.html`, `radii-shadow.html` - `component-button.html`, `component-link.html`, `component-nav.html` - `logo-dark.html`, `logo-light.html`, `logo-mark.html` - `voice.html` - `/uploads/` — original asset uploads (kept for traceability) --- ## Caveats - **Fonts** — Satoshi (display) is available under the Fontshare license. Work Sans is SIL OFL via Google Fonts. Confirm production licensing before deployment. - **Icons** — no brand-owned set. Lucide is used when needed, flagged as substitution. - **Imagery** — brief forbids photography and AI illustrations. Only "imagery" is the conic gradient, rendered live in CSS. - **Logo mark-only SVG** — derived from the full logo by cropping. For a clean mark-only export, request from design. - **"Leveraged"** — internal-only brand term. Never surface it in client-facing copy. - **HSBC / cloud lineage narrative** — stylized. Use only when the brief explicitly calls for it. Soften to *"a major UK bank"* or *"a major cloud provider"* when the speaker was not personally involved. Never invent specifics. - **Testimonials, client names, stats** — never generate without a verified source. If a draft needs one, leave a `[verify]` placeholder and flag to the human. --- *Design system version 0.5.1 (includes Brand Agent chapter 08) · llms.txt last synced with site 2026-04-21 (alignment pass: button green, breakpoints, hierarchy rules, logo/component chapters, missing tokens, brand rationale). For changes, see .*