Colors
63 tokens · 4 themes
Semantic / Brand
13 colours · .theme-semantic
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-caramel-1
#242115
color-white
#fff
report-green
oklch(52% 0.155 145)
report-green-bg
oklch(96% 0.04 145)
report-orange
oklch(65% 0.16 55)
report-orange-bg
oklch(96% 0.04 55)
report-red
oklch(52% 0.19 25)
report-red-bg
oklch(96% 0.04 25)
Caramel Clean
16 colours · .theme-caramel-clean
color-0
#020201
color-1
#242115
color-2
#3b341d
color-3
#524726
color-4
#6f5f33
color-5
#8b7640
color-6
#b9a062
color-65
#d6c188
color-7
#eadcb3
color-75
#faf4e0
color-8
#fdfade
color-9
#fffffa
keycolor-5
#257fb7
keycolor-6
#367aa7
keycolor-7
#1c3549
keycolor-8
#0f151b
Caramel
17 colours · .theme-caramel
color-0
#fffffa
color-1
#fdfade
color-2
#faf4e0
color-3
#eadcb3
color-4
#d6c188
color-5
#b9a062
color-6
#8b7640
color-65
#6f5f33
color-7
#524726
color-75
#3b341d
color-8
#242115
color-9
#020201
color-background
#fffefa
keycolor-5
#257fb7
keycolor-6
#367aa7
keycolor-7
#1c3549
keycolor-8
#0f151b
Codey
17 colours · .theme-codey
color-0
#eef6fe
color-1
#c8e2fc
color-2
#9fcef9
color-3
#6fbaf6
color-4
#1fa7f3
color-5
#257fb7
color-6
#23597e
color-65
#204a66
color-7
#1c3549
color-75
#172c3b
color-8
#0f151b
color-background
#1c3549
color-text
#c8e2fc
keycolor-5
#257fb7
keycolor-6
#23597e
keycolor-7
#1c3549
keycolor-8
#0f151b
Typography
6 families · 9-step element scalehow quickly daft jumping zebras vex!
how quickly daft jumping zebras vex!
how quickly daft jumping zebras vex!
how quickly daft jumping zebras vex!
how quickly daft jumping zebras vex!
how quickly daft jumping zebras vex!
Type scale — HTML elements
Codey
Codey
Codey
Codey
Codey
Codey
Codey
Codey
Codey
Spacing
20 values| Token | Value | Scale |
|---|---|---|
| 1 | clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem) | |
| 1-2xs | clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem) | |
| 2 | clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem) | |
| 2-xs | clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem) | |
| 3 | clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem) | |
| 3-s | clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem) | |
| 4 | clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem) | |
| 4-m | clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem) | |
| 5 | clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem) | |
| 5-l | clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem) | |
| 6 | clamp(2rem, 1.913rem + 0.4348vw, 2.25rem) | |
| 6-xl | clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem) | |
| 7 | clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem) | |
| 7-2xl | clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem) | |
| 8 | clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem) | |
| 9 | clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem) | |
| 10 | clamp(7rem, 6.6957rem + 1.5217vw, 7.875rem) | |
| 11 | clamp(8rem, 7.6522rem + 1.7391vw, 9rem) | |
| 12 | clamp(9rem, 8.6087rem + 1.9565vw, 10.125rem) | |
| 16 | clamp(13rem, 12.4348rem + 2.8261vw, 14.625rem) |
Layouts
9 grid patterns · 6 themes1/1
1/1
1/2, 1/2
1/2
1/2
1/3, 1/3, 1/3
1/3
1/3
1/3
1/6, 3/6, 1/6, 1/6
1/6
3/6
1/6
1/6
1/6, 4/6, 1/6
1/6
4/6
1/6
1/12, 5/12, 6/12
1/12
5/12
6/12
2/12, 6/12, 4/12
2/12
6/12
4/12
3/12, 7/12, 2/12
3/12
7/12
2/12
4/12, 3/12, 5/12
4/12
3/12
5/12
Layout themes
plain-blocks
Plain Grid - no background or padding
plain-blocks-padded
Plain Grid - with padding
card-blocks
Cards Grid - with background and padding
full-bleed-grid
Full bleed - explains it all.
frame-inset
Framed - capped to the content measure
bleed
Full bleed - edge to edge
Codey Architecture
Layout foundation & design systemTwo-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 sizessm
40rem
md
48rem
lg
64rem
xl
80rem
2xl
96rem