Colors

38 tokens · 3 themes
Semantic / Brand 13 colours · .theme-semantic
ahover
#ff9405
alink
#e3ae4b
bone
#f6f2e6
color-6RGB
rgb(134, 124, 115)
color-active-1
oklch(87.60% 0.1525 90.09)
color-active-2
oklch(84.11% 0.1587 87.20)
color-active-3
oklch(73.53% 0.1516 80.60)
color-active-4
oklch(63.14% 0.1309 78.42)
color-black
#000
color-prose-body
#534741
color-white
#fff
gold
rgb(227, 174, 77)
kPersimmon
rgb(187,59,60)
Codey 14 colours · .theme-codey
color-0
oklch(19.24% 0.0153 248.63)
color-1
oklch(30.44% 0.0462 246.91)
color-15
oklch(36.04% 0.0616 246.04)
color-2
oklch(41.64% 0.0771 245.18)
color-25
oklch(47.24% 0.0925 244.32)
color-3
oklch(52.83% 0.1080 243.46)
color-4
oklch(64.03% 0.1388 241.73)
color-5
oklch(72.66% 0.1387 241.66)
color-6
oklch(78.73% 0.1074 243.24)
color-7
oklch(84.80% 0.0762 244.81)
color-8
oklch(90.87% 0.0449 246.39)
color-9
oklch(96.94% 0.0137 247.97)
color-background
oklch(41.64% 0.0771 245.18)
color-text
oklch(90.87% 0.0449 246.39)
Brand 11 colours · .theme-brand
color-0
oklch(8.47% 0.0000 48.23)
color-1
oklch(15.66% 0.0043 48.23)
color-2
oklch(22.85% 0.0085 48.23)
color-3
oklch(30.04% 0.0128 48.23)
color-4
oklch(37.23% 0.0170 48.23)
color-5
oklch(46.96% 0.0189 53.04)
color-6
oklch(59.25% 0.0183 62.67)
color-7
oklch(71.53% 0.0176 72.30)
color-8
oklch(83.81% 0.0170 81.92)
color-9
oklch(96.10% 0.0164 91.55)
color-95
oklch(100.00% 0.0000 96.37)

Typography

9 families · 9-step element scale
fallback system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
how quickly daft jumping zebras vex!
body "Vollkorn", ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif
how quickly daft jumping zebras vex!
body-medium "Vollkorn", ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif
how quickly daft jumping zebras vex!
subhead "Vollkorn", ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif
how quickly daft jumping zebras vex!
italic "Vollkorn", ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif
how quickly daft jumping zebras vex!
head "Requiem", serif, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif
how quickly daft jumping zebras vex!
sans "HelveticaNowTextRegular", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
how quickly daft jumping zebras vex!
mono ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
how quickly daft jumping zebras vex!
display "YourBrandDisplay", serif
how quickly daft jumping zebras vex!

Type scale — HTML elements

extra-small 0.84rem → 0.9383rem
Codey
small 1.05rem → 1.0556rem
Codey
p 1.1875rem → 1.3125rem
Codey
h5 1.3359rem → 1.6406rem
Codey
h4 1.5029rem → 2.0508rem
Codey
h3 1.6908rem → 2.5635rem
Codey
h2 1.9021rem → 3.2043rem
Codey
h1 2.1399rem → 4.0054rem
Codey
extra-big 2.4074rem → 5.0068rem
Codey

Spacing

31 values
Token Value Scale
4xs clamp(0.25rem, 0.25rem + 0vw, 0.25rem)
4xs-3xs clamp(0.25rem, 0.2236rem + 0.1111vw, 0.3125rem)
1 clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem)
1-2xs clamp(0.3125rem, 0.1542rem + 0.6667vw, 0.6875rem)
2 clamp(0.625rem, 0.5986rem + 0.1111vw, 0.6875rem)
2-xs clamp(0.625rem, 0.4667rem + 0.6667vw, 1rem)
3 clamp(0.875rem, 0.8222rem + 0.2222vw, 1rem)
3-s clamp(0.875rem, 0.6903rem + 0.7778vw, 1.3125rem)
4 clamp(1.1875rem, 1.1347rem + 0.2222vw, 1.3125rem)
4-m clamp(1.1875rem, 0.8444rem + 1.4444vw, 2rem)
5 clamp(1.8125rem, 1.7333rem + 0.3333vw, 2rem)
5-l clamp(1.8125rem, 1.4694rem + 1.4444vw, 2.625rem)
6 clamp(2.375rem, 2.2694rem + 0.4444vw, 2.625rem)
6-xl clamp(2.375rem, 1.7153rem + 2.7778vw, 3.9375rem)
7 clamp(3.5625rem, 3.4042rem + 0.6667vw, 3.9375rem)
7-2xl clamp(3.5625rem, 2.85rem + 3vw, 5.25rem)
8 clamp(4.75rem, 4.5389rem + 0.8889vw, 5.25rem)
8-3xl clamp(4.75rem, 3.4306rem + 5.5556vw, 7.875rem)
9 clamp(7.125rem, 6.8083rem + 1.3333vw, 7.875rem)
9-4xl clamp(7.125rem, 6.2542rem + 3.6667vw, 9.1875rem)
10 clamp(8.3125rem, 7.9431rem + 1.5556vw, 9.1875rem)
10-5xl clamp(8.3125rem, 7.3889rem + 3.8889vw, 10.5rem)
11 clamp(9.5rem, 9.0778rem + 1.7778vw, 10.5rem)
11-6xl clamp(9.5rem, 8.5236rem + 4.1111vw, 11.8125rem)
12 clamp(10.6875rem, 10.2125rem + 2vw, 11.8125rem)
12-7xl clamp(10.6875rem, 9.6583rem + 4.3333vw, 13.125rem)
13 clamp(11.875rem, 11.3472rem + 2.2222vw, 13.125rem)
13-8xl clamp(11.875rem, 10.7931rem + 4.5556vw, 14.4375rem)
14 clamp(13.0625rem, 12.4819rem + 2.4444vw, 14.4375rem)
14-9xl clamp(13.0625rem, 11.9278rem + 4.7778vw, 15.75rem)
15 clamp(14.25rem, 13.6167rem + 2.6667vw, 15.75rem)

Layouts

12 grid patterns · 7 themes
1/1
1/1
1/2, 1/2
1/2
1/2
1/3, 1/3, 1/3
1/3
1/3
1/3
1/4, 1/4, 1/4, 1/4
1/4
1/4
1/4
1/4
2/3, 1/3
2/3
1/3
1/3, 2/3
1/3
2/3
1/12, 3/12, 5/12, 4/12
1/12
3/12
5/12
4/12
4/12, 5/12, 3/12, 1/12
4/12
5/12
3/12
1/12
2/12, 3/12, 4/12, 3/12
2/12
3/12
4/12
3/12
3/12, 4/12, 3/12, 2/12
3/12
4/12
3/12
2/12
3/12, 7/12, 2/12
3/12
7/12
2/12
2/12, 7/12, 3/12
2/12
7/12
3/12
Layout themes
grid-plain Plain grid — no background or padding
grid-plain-padded Plain grid — with padding
grid-cards Cards grid — background + padding
grid-bleed Full bleed — edge to edge, auto-fit columns
spread-frame Framed — capped to the content measure
spread-wide Wide — reaches ~30% toward the edges (780px and up)
spread-bleed Full bleed — edge to edge

Codey Architecture

Layout foundation & design system
Two-Axis Model
Vertical (header/main/footer rows) and horizontal (full/content tracks) axes compose independently — they don't compete.
Skeleton Axis (Vertical)
Vertical document landmarks: header (top), main (fill), footer (bottom) stacked as CSS grid rows.
body { display: grid; grid-template-rows: auto 1fr auto; } header { grid-row: 1; } main { grid-row: 2; } footer { grid-row: 3; }
💡 This axis is independent from horizontal layout — every page has this vertical structure.
Track Axis (Horizontal)
Named CSS Grid tracks (full-start, content-start, content-end, full-end) with subgrid propagation for alignment inheritance.
.layout { grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--measure)) [content-end] minmax(var(--gutter), 1fr) [full-end]; } .layout > * { grid-column: content; } /* framed */ .layout > .bleed { grid-column: full; } /* full-width opt-out */
💡 Subgrid propagates these tracks down to all children, keeping horizontal alignment coherent across nesting levels.
Layout Modes
Five layout modes express different ways to use the track axis. Switch modes via data-layout attribute.
frame
Frame (Centered)
Current 80% case refactored; symmetric gutter owned by grid (not body padding), centered max-measure track.
✦ Default framed layout with centered content and symmetric margins.
bleed
Bleed (Edge-to-edge)
Full-screen edge-to-edge; --gutter: 0, content supplies local padding.
✦ Full-width backgrounds, hero sections, break-out media.
spread
Spread (Hybrid)
Hybrid; framed by default with per-block .bleed opt-outs. Resolves the mode-switch problem on a single page.
✦ Most flexible: frame by default, opt individual blocks into bleed.
inset
Inset (Content-defines)
Content-defines-margin; gutter derived from content (asymmetric rail / sidebar / image sets the column).
✦ Asymmetric layouts with fixed side panels or weighted columns.
rail
Rail / Split (Multi-region)
Multi-region asymmetric shells (fixed side + fluid main). Enables two-panel layouts.
✦ Account dashboard, docs with sidebar, split-view interfaces.
Composition Rule
The skeleton axis (vertical) and track axis (horizontal) compose, they don't compete. Every page is the intersection of one skeleton mode and one track mode.
page = skeleton + tracks (independent axes) Example: account.php skeleton: header/main/footer tracks: spread (frame by default, bleed opt-outs) → data-layout="spread" data-pad="narrow" Example: un-map.php (full-bleed map) skeleton: header/main/footer tracks: bleed (everything edge-to-edge) → data-layout="bleed"
💡 This orthogonal design means adding new layout modes or skeleton variants doesn't force refactoring the other axis.

Breakpoints

5 screen sizes
sm
40rem
md
48rem
lg
64rem
xl
80rem
2xl
96rem