Design System · v2 · Kintsugi

Brass & Indigo
by candlelight.

A reference catalog of the Secure Pride visual language. Kintsugi — the practice of repairing what's broken with gold — runs through brand, color, type, and component decisions.

01 Brand

Logos, motifs, material studies, and pattern foundations.

Primary lockup, monograms, and brand mark treatments across surfaces.

brand-logos.html

Kintsugi Motif →

The fracture-and-gold visual signature — generative variants and usage rules.

brand-kintsugi-motif.html

Material Motif →

Surface texture studies — brass, indigo, and the bridges between.

brand-material-motif.html

Repeating geometric and organic patterns derived from the kintsugi grammar.

brand-patterns.html

02 Color

The brass-and-indigo duet, gem tones, status states, and surface ramps.

Brand Palette →

Primary kintsugi spectrum: brass, indigo, fire opal, and gem tone accents.

colors-brand.html

Background, surface, and elevated layer ramps for dark-first UI.

colors-surfaces.html

Protected, warning, info, and danger semantic colors.

colors-status.html

Citrine, Emerald, Sapphire, Amethyst, Tourmaline — jewel-bright accents, not neons.

colors-gems.html

03 Typography

Rajdhani for headings, Inter for prose, JetBrains Mono for code and metadata.

Modular scale from caption to display, with line-height and tracking specs.

type-scale.html

Each typeface in context — weights, italics, and real-prose examples.

type-specimens.html

04 Spacing & Layout

The 4-px-base spacing system, radius scale, and elevation shadows.

Spacing Tokens →

From space-1 to space-24 — the rhythm grid.

spacing-tokens.html

Radius & Shadow →

Corner rounding and elevation shadows tuned for the dark-first surface.

spacing-radius-shadow.html

05 Components

Production-ready building blocks with kintsugi tokens applied.

Primary, secondary, ghost, danger — all sizes and states.

components-buttons.html

Surface containers — tier, project, callout, and feature variants.

components-cards.html

Status pills, tags, and inline labels.

components-badges.html

Landing-page hero treatments with motif integration.

components-hero.html

06 System & Source

Token sources, identity assets, and reference docs.

Favicon System →

Browser, device, and PWA icons across sizes and contexts.

favicon-system.html

colors_and_type.css →

Authoritative CSS custom properties — the token source of truth.

CSS · token source

design-system-v2.jsx →

The T object — JS-side token definitions for React consumers.

JSX · token source

Project overview, conventions, and integration notes.

Markdown · docs

iTerm2 Theme ↓

Terminal theme drawing from the kintsugi palette — fire opal cursor, brass highlights, gem-tone ANSI.

.itermcolors · download