---
version: alpha
name: Semanti
description: >-
  Brand and interface system for an AI advisory, labs, and assurance firm
  built for regulated, high-stakes environments. Editorial, flat, typographic.
  No floating cards, no icons-as-furniture, no bluish-purple gradients. Every
  element is designed to pass a ten-second credibility test.

colors:
  # ── Raw palette ──────────────────────────────────────────
  ink:              "#161615"
  ink-2:            "#242021"
  slate:            "#2F3A3E"
  sand:             "#E0D7D2"
  bone:             "#FCF9F7"
  muted:            "#7A7D6D"
  ember:            "#D27148"
  ember-hover:      "#BD6340"
  amber:            "#E1B37D"
  forest:           "#2F5D3A"
  forest-hover:     "#274E31"

  # ── Semantic foreground ──────────────────────────────────
  fg-1:             "{colors.ink}"
  fg-2:             "{colors.slate}"
  fg-3:             "{colors.muted}"
  fg-inverse-1:     "{colors.sand}"
  fg-inverse-2:     "#E0D7D2B8"      # sand @ 72%
  fg-inverse-3:     "{colors.muted}"

  # ── Semantic background ──────────────────────────────────
  bg-page:          "{colors.sand}"
  bg-surface:       "{colors.sand}"
  bg-dark:          "{colors.ink}"
  bg-dark-2:        "{colors.ink-2}"

  # ── Semantic border ──────────────────────────────────────
  border-on-light:  "#7A7D6D40"      # muted @ 25%
  border-on-dark:   "#E0D7D233"      # sand  @ 20%

  # ── Accent & focus ───────────────────────────────────────
  accent:           "{colors.ember}"
  accent-hover:     "{colors.ember-hover}"
  accent-2:         "{colors.amber}"
  focus-ring:       "{colors.ember}"

typography:
  hero:
    fontFamily: Satoshi
    fontSize: 5.5rem
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.02em
  h1:
    fontFamily: Satoshi
    fontSize: 3.75rem
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.01em
  h2:
    fontFamily: Satoshi
    fontSize: 3rem
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.01em
  h3:
    fontFamily: Satoshi
    fontSize: 2rem
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.01em
  lead:
    fontFamily: Work Sans
    fontSize: 1.375rem
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: Work Sans
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
  small:
    fontFamily: Work Sans
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  meta:
    fontFamily: Work Sans
    fontSize: 0.75rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  eyebrow:
    fontFamily: Work Sans
    fontSize: 0.75rem
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em

rounded:
  none: 0px
  sm: 2px

spacing:
  1: 4px
  2: 8px
  3: 16px
  4: 24px
  5: 32px
  6: 48px
  7: 64px
  8: 96px
  9: 128px
  10: 160px
  11: 200px

components:
  # ── Button: primary ──────────────────────────────────────
  button-primary:
    backgroundColor: "{colors.forest}"
    textColor:       "{colors.bone}"
    typography:      "{typography.body}"
    rounded:         "{rounded.sm}"
    padding:         14px 28px
  button-primary-hover:
    backgroundColor: "{colors.forest-hover}"
    textColor:       "{colors.bone}"
    typography:      "{typography.body}"
    rounded:         "{rounded.sm}"
    padding:         14px 28px

  # ── Button: ghost (secondary) ────────────────────────────
  button-ghost:
    backgroundColor: "#00000000"
    textColor:       "{colors.ink}"
    typography:      "{typography.body}"
    rounded:         "{rounded.sm}"
    padding:         14px 28px
  button-ghost-hover:
    backgroundColor: "#1616150A"      # ink @ 4%
    textColor:       "{colors.ink}"
    typography:      "{typography.body}"
    rounded:         "{rounded.sm}"
    padding:         14px 28px

  # ── Link ─────────────────────────────────────────────────
  link:
    backgroundColor: "#00000000"
    textColor:       "{colors.ink}"
    typography:      "{typography.body}"
  link-on-dark:
    backgroundColor: "#00000000"
    textColor:       "{colors.sand}"
    typography:      "{typography.body}"

  # ── Nav ──────────────────────────────────────────────────
  nav:
    backgroundColor: "{colors.sand}"
    textColor:       "{colors.ink}"
    typography:      "{typography.small}"
    height:          64px
  nav-on-dark:
    backgroundColor: "{colors.ink}"
    textColor:       "{colors.sand}"
    typography:      "{typography.small}"
    height:          64px
---

## Overview

Semanti is the brand and interface system for an AI advisory, labs, and assurance firm working in regulated, high-stakes contexts. The visual vocabulary is typography on flat color, sitting in disciplined negative space. There are no icons as UI furniture, no floating cards, no drop shadows, no bluish-purple gradients, no rounded hero panels. The aesthetic is editorial — closer to a broadsheet than a SaaS dashboard.

Everything in this file is authoritative for agents producing Semanti artefacts. Three canonical mirrors stay in lockstep:

- `llms.txt` — full human- and agent-readable rules: voice, banned vocabulary, and a paste-ready brand-agent system prompt. Covers what `DESIGN.md` does not.
- `colors_and_type.css` — the CSS implementation. Every token declared here resolves to a CSS variable of the same name.
- `index.html` — browseable visual reference at <https://semanti-core.ampdlabs.io>.

If `DESIGN.md` and one of those files disagree, the agreement between `colors_and_type.css` and `index.html` wins — this file is the reflection.

## Colors

Eleven raw hex values, grouped by role. Every UI surface resolves to one of them at 100% or to a semantic alias. Alpha is encoded as 8-digit hex.

**Primary neutrals.** `ink` is the dominant dark — page backgrounds on dark sections and body copy on light. `sand` is the dominant light — page backgrounds on light sections and body copy on dark. `bone` (`#FCF9F7`) is reserved for elevated surfaces inside sand regions.

**Secondary neutrals.** `ink-2` is one step warmer than `ink`, used to separate adjacent dark sections without introducing a border. `slate` is an alternative deep neutral for long-form dark blocks. `muted` carries borders, metadata, and tertiary text.

**Accent.** `ember` is the only signal colour — CTAs, focus rings, ember dividers, highlighted words inside hero quotes. **One ember instance per visible region, maximum.** `amber` appears only inside the signature conic gradient. `forest` is reserved for the primary button.

**Semantic aliases.** Agents should reference these rather than raw hexes when the role is known: `fg-1` through `fg-3` for text on light; `fg-inverse-1` through `fg-inverse-3` for text on dark; `bg-page`, `bg-surface`, `bg-dark`, `bg-dark-2` for canvases; `border-on-light` and `border-on-dark` for hairlines.

**Signature gradient.** Not a Design.md primitive — a single named CSS value. Definition:

```css
conic-gradient(
  from 180deg at 50% 50%,
  #7A7D6D 0%, #D27148 7%, #E1B37D 34%, #7A7D6D 87%, #E0D7D2 100%
)
```

Used at the hero right-panel and as a subtle wash behind the Lineage section. Never as a field. Never more than once in a visible region.

**Ramps.** Each base colour has an implicit 0%→100%→200% lightness ramp on the `oklch` axis — 0% = black, 100% = base, 200% = white, 20% steps. Snap to these values for hover states, borders, and mutes instead of inventing intermediates. The canonical ramp table lives in `index.html` (Color chapter) and in `llms.txt`.

## Typography

Two families, both self-hosted as variable TTFs in `/fonts`. No runtime font swap, no webfont fallback beyond system sans.

- **Satoshi** (Fontshare) carries display — Hero, H1, H2, H3. Medium weight (500). Tight tracking that tightens further as size grows.
- **Work Sans** (SIL OFL via Google Fonts) carries Lead, body, small, meta, and eyebrow. Regular weight (400) by default, medium (500) on Lead and Eyebrow.

Sizes in the frontmatter reflect the **maximum (desktop) size** of each role. On mobile each role clamps down. Concretely:

| Role    | Mobile min | Desktop max | Scale                            |
|---------|------------|-------------|----------------------------------|
| hero    | 2.5rem     | 5.5rem      | `clamp(2.5rem, 6vw, 5.5rem)`     |
| h1      | 2rem       | 3.75rem     | `clamp(2rem, 4.5vw, 3.75rem)`    |
| h2      | 1.75rem    | 3rem        | `clamp(1.75rem, 3.2vw, 3rem)`    |
| h3      | 1.375rem   | 2rem        | `clamp(1.375rem, 2.2vw, 2rem)`   |
| lead    | 1.125rem   | 1.375rem    | `clamp(1.125rem, 1.4vw, 1.375rem)` |
| body    | 1rem       | 1rem        | fixed                            |
| small   | 0.875rem   | 0.875rem    | fixed                            |
| meta    | 0.75rem    | 0.75rem     | fixed                            |

**Rules.**

- Sentence case always. Never Title Case. Never ALL CAPS except on the `eyebrow` role.
- One Hero per page, ever.
- Periods on declarative headings — the period is a stop, a finality.
- Paragraph max-width is 60ch. Line length over 90ch fails readability.
- Never bold inside body copy for emphasis. Use italic, or rewrite.

## Layout

The spacing scale is an 8pt grid seeded at 4px, running `1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11` → `4, 8, 16, 24, 32, 48, 64, 96, 128, 160, 200`. Steps 7, 8, 9 are the standard section gaps on desktop; 3 and 4 are the standard intra-component gaps.

**Content widths.**

- `max-content: 1280px` — main column for the visual reference.
- `max-wrapper: 1440px` — outer page wrapper.
- `max-paragraph: 60ch` — hard ceiling on body-text line length.
- `gutter: clamp(24px, 5vw, 96px)` — page-edge padding.

**Breakpoints.**

- `≤ 1100px` — 2-column `cardgrid` collapses to single column.
- `≤ 1000px` — the brand-brain attribute grid collapses to 2-up.
- `≤ 900px` — most other grids collapse to 1-up; do/don't stacks vertically.
- `≤ 860px` — sidebar becomes an off-canvas drawer; mobile topbar appears.
- `≤ 480px` — color swatch grid collapses to 6 columns.

## Elevation & Depth

**There is no elevation system.** The system is intentionally flat.

- No `box-shadow`, ever. Including on buttons, cards, nav, and modals.
- No raised / pressed skeuomorphism.
- No scrim gradients as depth cues.
- Separation between regions is done with flat colour change (`ink` next to `ink-2`, or `sand` next to `bone`) or with a 1px hairline (`border-on-light` / `border-on-dark`).

Active states move, they do not lift. A primary button on `:active` uses `transform: translateY(1px)` with no scale.

## Shapes

Radii are zero almost everywhere. Two values exist:

- `rounded.none` → `0px` — the default for every surface: cards, nav, hero panels, images, iframes.
- `rounded.sm` → `2px` — reserved for the primary CTA button, the ghost button, and the focus ring on interactive elements.

No other radius values are defined. No `rounded-md`, no pill buttons, no circular avatars. If a surface needs softening, the answer is usually more negative space, not a radius.

The S-mark is the only decorative glyph in the system. Two mirrored half-S shapes resolve into one. Source SVGs fill `#E0D7D2` so they sit naturally on dark; apply `filter: invert(1)` on light surfaces. Never recolour, outline, rotate, or wrap the mark.

## Components

A deliberately small kit. Components are typographic primitives on flat colour — never floating, never skeuomorphic. All transitions are `150ms` with `cubic-bezier(0.2, 0.6, 0.2, 1)`.

### Button

- **Primary** (`button-primary`) — `forest` on `bone`, Satoshi Medium 1rem, `letter-spacing: -0.01em`, radius `sm`, no border, no shadow. Hover: `forest-hover`. Active: `translateY(1px)`. **Maximum one primary CTA per page.**
- **Ghost** (`button-ghost`) — transparent background, `ink` text, 1px border at `#16161566` (ink @ 40%). Hover: border goes solid `ink`, background becomes `#1616150A` (ink @ 4%).
- **Focus ring** — 2px `ember` outline, 2px offset. Always visible. Applies to every interactive element, not just buttons.

### Link

- Inline links inherit the surrounding text colour (`ink` on light, `sand` on dark).
- No underline at rest. Underline appears on hover with `text-underline-offset: 4px` and decoration colour `muted`.
- Focus state is always visible (the 2px ember outline above).

### Nav

- Sticky horizontal lockup. Logo on the left, two contact links on the right, tagline as a quiet italic tail.
- Background: `sand` on light pages, `ink` on dark.
- Bottom border: 1px `border-on-light` on light, `border-on-dark` on dark.
- Height: `64px`.

### Not-a-component

- **Icons** — Semanti is almost iconless. The visual vocabulary is type + colour + space. If a UX icon is unavoidable, use Lucide at stroke `1.5`, colour `currentColor`, and flag it as a substitution. No icon font, no sprite sheet, no emoji, no unicode glyphs as icons.
- **Modals, toasts, tooltips** — not defined. If you need one, it inherits the flat-surface + 1px-hairline treatment from the nav, with radius `0`.

## Do's and Don'ts

**Do**

- Reference design tokens (`{colors.ink}`, `{typography.body}`) instead of hardcoding values.
- Load `colors_and_type.css` before any other stylesheet.
- Use real Semanti logo SVGs from `/assets/`. Never recreate the mark as text or inline `<path>`.
- Use `ember` as a signal — CTA, focus, one highlighted word per hero. One instance per visible region.
- Use the signature conic gradient at most once per visible region, as a wash.
- Leave more negative space than you think you need.
- Use sentence case and end declarative headings with a period.

**Don't**

- Don't introduce new colours, fonts, or radii.
- Don't recolour, outline, rotate, or wrap the S-mark.
- Don't substitute Inter, Helvetica, SF Pro, or Arial for Satoshi / Work Sans.
- Don't add box-shadows, gradients-as-fields, or rounded-corner cards.
- Don't use emoji. Don't use exclamation marks.
- Don't bold words inside body copy for emphasis — use italic or rewrite.
- Don't place more than one primary CTA on a page.
- Don't use the internal audience term "leveraged" in any external artefact (see `llms.txt`).