Codezero Design System

A design system for Codezero — the missing credential containment layer. Codezero intercepts outbound requests and injects credentials just-in-time so agents, applications, and pipelines never see a secret.

Product context

Codezero is a developer-infrastructure / security product. The primary surface represented here is the marketing website (codezero.io) — a dark-themed, Next.js 16 site that explains a fairly technical idea (credential containment) to security and platform engineers. Adjacent surfaces referenced (but not yet materialised as kits) are docs.codezero.io, hub.codezero.io, and demo.codezero.io/compare.

The brand leans technical and calm, not "cybersecurity scary." The visual language tells a three-beat story using three accents: orange = problem / danger / CTA, teal = solution / safety, blue = informational / neutral. Everything from the particle hero to the stat cards to the terminal syntax is keyed to this triad.

Sources used

• Codebase (attached via File System Access API): codezero-www/ — Next.js 16 marketing site
• Existing design doc: codezero-www/docs/design-system.md → preserved at reference/design-system-original.md
• Original Tailwind tokens: codezero-www/app/globals.css → reference/globals.css
• Logos & partner marks: codezero-www/public/*.svg → assets/

No Figma, slide decks, or additional brand documents were provided.

---

Content fundamentals

Voice. Calm, declarative, technically literate. Writes to platform and security engineers who already know what a vault is. Never scolds, never sells fear. The brand is comfortable with long explanatory paragraphs when the idea is new — the problem statement on the homepage runs ~60 words without an image in between.

Tense & pronouns. Present tense, second person ("your credentials", "your code never saw the credential"). "We" is rare; the product is the subject most of the time ("Codezero intercepts…", "Codezero augments…"). No "I".

Casing.

• Sentence case everywhere: headings, buttons, nav. Not Title Case.
• Section-divider pills on the Solutions page are the one exception and use ALL CAPS WIDE TRACKING (e.g. AI AGENTIC DEVELOPMENT TOOLS).
• Product nouns are capitalised: Codezero, Cordon (the CLI), Gateway.

Punctuation. Oxford comma. Em dashes for asides (— they never enter your runtime). No exclamation points. Numbers are written as digits even when small (3 steps, 10+ credentials).

Signature rhetorical move. Short, declarative "fragment stack" — a sentence, then a fragment for emphasis. Examples from the homepage:

• "Your credentials. Wrong place. Wrong time."

• "Your credentials are showing."

• "There's nothing in memory, nothing in logs, nothing to steal."

Headline structure. Almost always a noun phrase with one accented word/phrase embedded:

• "The missing credential containment layer"
• "Your credentials are showing."
• "Wrong place. Wrong time."

The accented phrase is coloured --orange-200 (for problem/risk) or --teal-200 (for solution).

CTAs. Two stock phrasings: Get Started (orange filled button → docs) and View Solutions / View Demo / Book Demo (teal outline). Never "Try it free!", "Sign up now!", or exclamations. Buttons are always sentence-case, two words max.

Emoji & exclamations. None. The only "decorative" glyph used in body copy is the em dash.

Numbers and stats. Stats are cited. 82% of breaches involve credentials → Source: Verizon DBIR in --fg-muted. Never floating stats without attribution.

---

Visual foundations

Backgrounds

• Dark mode only. The HTML root literally carries className="dark"; a light theme exists in the Tailwind config but is never used.
• Page background is #020202 (near-black, not pure black). Section backgrounds step to #0A0A0A (--bg-subtle) for alternating bands, and cards sit on #191919 (--bg-card).
• No hand-drawn illustrations, no photography, no repeating patterns, no gradients on cards. The one "texture" used is a 1px grid at 64px × 64px with 0.03 opacity, in teal, behind the Solutions hero.
• Ambient glow blobs (rgba(216,90,48,0.04) orange / rgba(45,180,140,0.04) teal) with blur-[150px] sit behind hero sections. They are always ≤5% opacity — the dark stays dark.
• The homepage hero has one bespoke visual: an animated particle sphere (3500 points, Fibonacci distribution, 3D noise deformation) rendered on <canvas>, coloured from the full three-accent palette.

Color

• Three accents — orange / teal / blue — each has explicit semantic territory (see reference/design-system-original.md). Never introduce a fourth accent (no purple, amber, pink).
• On dark backgrounds, text uses the 200 stop, not the 400. #EB9474 not #D85A30 for orange text, etc. The 400 is reserved for filled CTAs and icon glyphs.
• Never use #FFFFFF for text — always #F0EDE8 (warm off-white). This is the single biggest "tell" of the brand.
• Tinted surfaces follow strict minimums: bg ≥ 12% opacity, border ≥ 30% opacity. Anything less washes out on #020202.
• When three stat cards sit in a row and the content supports it, they should use different accents by meaning — orange for the problem stat, blue for info, teal for solution.

Type

• Geist Sans (400 / 500 / 600 / 700) for everything, Geist Mono (400 / 500 / 700) for code, terminals, and step numbers.
• Three weights in practice:
  • 700 (bold) — H1 (hero) and H2 (section heads). Pair font-bold with tracking-tight.
  • 600 (semibold) — H3 / card titles / accent tokens on tinted surfaces.
  • 500 (medium) — pill labels, step labels, "How It Works" connector text.
  • 400 — everything else (lead, body, captions).
• The site uses Tailwind's type scale directly: text-7xl (72px) for hero H1, text-4xl (36px) for section H2, text-lg (18px) for card H3, text-xl (20px) for lead copy, text-base (16px) for body, text-sm (14px) for secondary body, text-xs (12px) for captions and meta.
• Headings set tracking-tight (~-0.025em). The hero goes further with -0.02em inline.
• Inline code is 1px smaller than the surrounding body text (13 vs 16).

Spacing

• Tailwind default scale (4px base), but the site heavily uses a small set of steps: py-20 for section padding, gap-6 / gap-8 for card grids, px-4 for container padding, py-2 / px-3 for pills.
• container mx-auto px-4 + max-w-5xl or max-w-4xl is the canonical content column.

Borders, corners, cards

• Radii are modest: 6px chips, 10px default, 12px cards, 16px on the hero's flow surface. Nothing is fully rounded except pills and avatars.
• Card borders are not solid brand colors — they use rgba(255, 255, 255, 0.08) (1px) on neutral cards, or rgba(<accent>, 0.30) on tinted cards. On hover, neutral borders step to rgba(255, 255, 255, 0.15).
• No colored left-border accents, no drop-caps, no "ribbon" decorations.

Shadow & elevation

• Shadows are dark on dark — 0 10px 15px -3px rgba(0,0,0,0.45) — not lifted-paper whites. For highlighted flow nodes, a coloured shadow is added at 0.10 opacity of the node's accent.
• The only inner-shadow pattern is on deployment icon tiles: inset 0 0 0 1px rgba(<accent>, 0.30) — a hairline inner ring.

Animation

• Transitions are subtle and fast: Tailwind's default transition-all (~150ms, ease). Links and buttons fade opacity / translate 4px on arrow icons only.
• The one persistent animation is the hero particle sphere: 60fps, continuous rotation (~0.3 rad/s), noise-driven deformation. It never "bounces" or "pops."
• No page-enter animations, no scroll-triggered reveals, no number counters.

Hover & press

• Hover — button: opacity: 0.9; card: border goes to rgba(255,255,255,0.15); link: foreground brightens to #F0EDE8; arrow icon translates 4px right via group-hover:translate-x-1.
• Press / active — not explicitly styled; the button's opacity drop carries through.
• Focus — 3px ring at rgba(255,255,255,0.15) outside the element (shadcn default).

Transparency & blur

• Header uses bg-background/80 backdrop-blur-md — one of the few places blur appears. Mobile nav overlay uses bg-background/95.
• All the "tinted card" backgrounds are transparent color over #020202 — that's how they read as coloured without turning into solid blocks.

Imagery

• Essentially none. Partner logos (clawd.svg, codex.svg, cursor.svg, nous-logo.png) are the only bitmap/SVG art on the site. No stock photos, no screenshots of the app (there is no app screenshot yet), no hero photography.
• When imagery is needed, the convention is: monochrome, dark-field, no gradients on the asset itself.

Layout rules

• Header is fixed top-0 at h-16, with a 1px bottom border and the logo baseline-aligned to the nav items.
• All sections begin with border-t border-border — this 1px hairline between sections is the site's strongest structural cue.
• Nothing is truly full-bleed except the hero canvas and the footer.

---

Iconography

System. lucide-react at stroke-width 1.5–2, with icons sized h-4 w-4, h-5 w-5, or h-6 w-6 depending on context. Lucide is a CDN-available open set, so UI kits here load it via unpkg rather than re-bundling.

Placement. Icons are always inside a 10–12px square tile with a 10% tint of an accent color as background and the 200-stop of the same color as the glyph:

<div class="icon-tile teal">  <!-- bg: rgba(45,180,140,.20); inset ring .30 -->
  <Shield stroke-width=2 />   <!-- color: #2DB48C -->
</div>

That tile pattern is the single most-used component on the site after the card.

Partner / tool marks. clawd.svg (Claude Code), codex.svg, cursor.svg, and nous-logo.png — these are treated as full-color product marks, not re-tinted. They sit on neutral #191919 cards.

Logo. assets/codezero-logo.svg is the canonical wordmark — always used at 32px height in the header and footer, never re-coloured.

Emoji, unicode. None. The arrow → in CTAs is drawn via Lucide's <ArrowRight />, not a glyph. The only non-Lucide "icons" on the site are the three coloured dots in the TerminalBlock chrome (red / yellow / green at 70% opacity).

Custom SVGs drawn inline. One — the wavy divider above the "Wrong place. Wrong time." explainer. Organic sine curve, currentColor with --orange-400, opacity .20.

---

Index — what's in this folder

README.md                     ← you are here
SKILL.md                      ← entry point when used as an Agent Skill
colors_and_type.css           ← CSS variables + semantic selectors (import this)

assets/
  codezero-logo.svg           ← wordmark
  clawd.svg / codex.svg /     ← partner product marks (full color)
  cursor.svg / nous-logo.png

reference/
  design-system-original.md   ← verbatim copy of the codebase design doc
  globals.css                 ← original Tailwind @theme tokens (for diffing)

preview/                      ← cards populating the Design System tab
  colors-*.html
  type-*.html
  spacing-*.html
  components-*.html
  brand-*.html

ui_kits/
  codezero-www/               ← marketing site recreation
    index.html                ← click-thru prototype (home → solutions)
    README.md
    *.jsx                     ← Header, Hero, Card, Button, TerminalBlock, CredentialFlow, …

Open questions / caveats

• Fonts. Geist + Geist Mono are loaded from Google Fonts (same source the Next.js site uses via next/font/google). No TTFs shipped locally — the pages all have an @import at the top of colors_and_type.css.
• No Figma, no decks. Everything here is derived from the codebase. If the company maintains a separate Figma file, it should be linked so the kit can be re-verified against it.
• One product surface. Only codezero-www was attached. A kit for hub.codezero.io (the dashboard) or docs.codezero.io would need the respective codebase.