Visual Identity v2
Kredal Style Guide
The living reference for Kredal's design system — warm ink/cream tokens, typography, spacing, and components. Source of truth: design.md.
Color System
Brand palette extracted from the design system. Click any swatch to copy the hex value.
Color tokens
Typography Specimen
display
2.8rem / 700 / 1.04
The quick brown fox
heading h1
2rem / 700 / 1.1
The quick brown fox jumps
heading h2
1.5rem / 600 / 1.15
The quick brown fox jumps over
heading h3
1.125rem / 600 / 1.2
The quick brown fox jumps over the lazy
body
1rem / 400 / 1.5
The quick brown fox jumps over the lazy dog
small / caption
0.75rem / 400 / 1.35
The quick brown fox jumps over the lazy dog and sat down.
monospace
const primary = "#26251e";
Layout & Spacing Tokens
Spacing scale
Border radius
Elevation & shadow
Components
Buttons are pills at weight 400–500. Cards use the tint ladder, never shadow-only. Risk colours always pair with an icon and label.
Tint ladder
card
Tint ladder
muted
Tint ladder
card-02
Tint ladder
card-warm
Logo
Six quadrilaterals pinwheeling around a hollow centre. The mark is free-standing — no container square — and inherits the text colour, so one component serves both themes. Clearspace of half the mark width; minimum 16px; never recolour it orange.