BRUTnoir / Tokens

Design Token Reference

Every value in the BRUTnoir system. Colors, typography, shadows, spacing, z-index — documented with live renders and copy-to-clipboard.

import { colors, fonts, shadows, spacing, zIndex } from "@/components/tokens";
// 01 Colors

Color Palette

Noir (Background)
noir
#0a0a0b
colors.noir
noirLight
#111114
colors.noirLight
noirMid
#1a1a1f
colors.noirMid
noirSurface
#22222a
colors.noirSurface
noirBorder
#333340
colors.noirBorder
noirBorderLight
#44445a
colors.noirBorderLight
Cream (Text)
cream
#f5f0e8
colors.cream
creamDim
#d4cfc6
colors.creamDim
creamMuted
#8a8577
colors.creamMuted
Accent
acid
#c8f53c
colors.acid
acidDim
#9ab82d
colors.acidDim
crimson
#e8233a
colors.crimson
amber
#f5a623
colors.amber
ice
#7eb8d4
colors.ice
// 02 Typography

Font Families

fonts.display
DM Serif Display
Aa Bb Cc 01 02 03
'DM Serif Display', 'Georgia', serif
fonts.mono
DM Mono
0123456789 @#$%&
'DM Mono', 'Courier New', monospace
fonts.sans
DM Sans
The quick brown fox jumps over the lazy dog.
'DM Sans', 'Helvetica Neue', sans-serif
Font Sizes
AafontSizes.xs
11px
AafontSizes.sm
12px
AafontSizes.base
14px
AafontSizes.md
16px
AafontSizes.lg
18px
AafontSizes.xl
24px
AafontSizes.xxl
32px
AafontSizes.xxxl
48px
// 03 Shadows

Box Shadows

shadowSm
shadows.shadowSm
shadow
shadows.shadow
shadowDark
shadows.shadowDark
shadowInset
shadows.shadowInset
modal
shadows.modal
// 04 Spacing

Spacing Scale

xs
4px
sm
8px
md
12px
lg
16px
xl
24px
xxl
32px
// 05 Transitions

Timing

fast
0.1s ease
transitions.fast
base
0.15s ease
transitions.base
slow
0.3s ease
transitions.slow
// 06 Border Radius

Radius

BRUTnoir defaults to zero radius. Soft corners make soft commitments. The sm value exists for extreme edge cases only.

none
0px
radius.none
sm
2px
radius.sm
// 07 Z-Index

Stacking Order

TokenNameValueCopy
zIndex.basebase1
zIndex.dropdowndropdown1000
zIndex.overlayoverlay5000
zIndex.modalmodal8000
zIndex.notificationnotification9000
← Back to BRUTnoirComponents →Philosophy →