BrutalLab UI
en
EnglishEspañol
FoundationStable

Colors

Expressive color with semantic roles and verifiable contrast.

System statusStable

Base palette verified in Figma: coral, lilac, teal, yellow, blue and orange; #FDF2E9 background and #1A1A1A ink. Semantic roles are adapted and checked in light and dark.

Current state

Decisions that already exist and can be observed in the product.

tokens/colors.json generates CSS, registry values and the contrast matrix.

Coral primary, lilac secondary and teal accent. Colored surfaces always use their paired foreground.

Coral is brand and primary action; errors use their own red in both themes and progress uses mint. Text on pastels uses pastel-foreground.

Links have their own darker light-mode and lighter dark-mode token. Coral is not used as text on cream.

Declared pairs reach 4.5:1 for normal text. This does not cover arbitrary consumer combinations.

Coral#FF6B6B
Purple#A388EE
Teal#4ECDC4
Yellow#FFE66D
Blue#45B7D1
Orange#F7A072
Background#FDF2E9
Foreground#1A1A1A

Current tokens

Values present today; documenting them does not make every value final.

TokenValueCurrent use
Ink#1a1a1aPalette primitive; use semantic roles in components.
cream#fdf2e9Palette primitive; use semantic roles in components.
purple#a388eePalette primitive; use semantic roles in components.
yellow#ffe66dPalette primitive; use semantic roles in components.
mint#c4f0adPalette primitive; use semantic roles in components.
sky#b9e6f6Palette primitive; use semantic roles in components.
coral#ff6b6bPalette primitive; use semantic roles in components.
teal#4ecdc4Palette primitive; use semantic roles in components.
blue#45b7d1Palette primitive; use semantic roles in components.
orange#f7a072Palette primitive; use semantic roles in components.

Contrast matrix

Approved background and text pairs verified from the token source.

WCAG 2.2 AA · Minimum 4.5:1 for normal text and 3:1 for large text or meaningful graphical elements.

Light theme

Approved pairValuesContrastNormal textLarge text / UI
background / foreground
#fdf2e9#1a1a1a
15.79:1Passes AAPasses AA
card / card-foreground
#ffffff#1a1a1a
17.40:1Passes AAPasses AA
popover / popover-foreground
#ffffff#1a1a1a
17.40:1Passes AAPasses AA
primary / primary-foreground
#ff6b6b#1a1a1a
6.27:1Passes AAPasses AA
secondary / secondary-foreground
#a388ee#1a1a1a
6.06:1Passes AAPasses AA
muted / muted-foreground
#eee5dc#615954
5.51:1Passes AAPasses AA
accent / accent-foreground
#4ecdc4#1a1a1a
9.00:1Passes AAPasses AA
destructive / destructive-foreground
#b42318#ffffff
6.57:1Passes AAPasses AA
success / success-foreground
#c4f0ad#1a1a1a
13.60:1Passes AAPasses AA
warning / warning-foreground
#ffe66d#1a1a1a
13.92:1Passes AAPasses AA
info / info-foreground
#45b7d1#1a1a1a
7.42:1Passes AAPasses AA
background / link
#fdf2e9#6041a6
6.80:1Passes AAPasses AA
card / link
#ffffff#6041a6
7.49:1Passes AAPasses AA
blue / blue-foreground
#45b7d1#1a1a1a
7.42:1Passes AAPasses AA
orange / orange-foreground
#f7a072#1a1a1a
8.48:1Passes AAPasses AA
mint / pastel-foreground
#c4f0ad#1a1a1a
13.60:1Passes AAPasses AA
sky / pastel-foreground
#b9e6f6#1a1a1a
13.02:1Passes AAPasses AA
purple / pastel-foreground
#a388ee#1a1a1a
6.06:1Passes AAPasses AA
yellow / pastel-foreground
#ffe66d#1a1a1a
13.92:1Passes AAPasses AA
coral / pastel-foreground
#ff6b6b#1a1a1a
6.27:1Passes AAPasses AA
teal / pastel-foreground
#4ecdc4#1a1a1a
9.00:1Passes AAPasses AA
blue / pastel-foreground
#45b7d1#1a1a1a
7.42:1Passes AAPasses AA
orange / pastel-foreground
#f7a072#1a1a1a
8.48:1Passes AAPasses AA
background / destructive
#fdf2e9#b42318
5.97:1Passes AAPasses AA
card / destructive
#ffffff#b42318
6.57:1Passes AAPasses AA
background / grammar-coral
#fdf2e9#b42347
5.82:1Passes AAPasses AA
card / grammar-coral
#ffffff#b42347
6.42:1Passes AAPasses AA
background / grammar-green
#fdf2e9#156b43
5.92:1Passes AAPasses AA
card / grammar-green
#ffffff#156b43
6.53:1Passes AAPasses AA
background / grammar-blue
#fdf2e9#1d5fbf
5.54:1Passes AAPasses AA
card / grammar-blue
#ffffff#1d5fbf
6.10:1Passes AAPasses AA
background / grammar-violet
#fdf2e9#7441a8
6.22:1Passes AAPasses AA
card / grammar-violet
#ffffff#7441a8
6.85:1Passes AAPasses AA
background / grammar-amber
#fdf2e9#805800
5.75:1Passes AAPasses AA
card / grammar-amber
#ffffff#805800
6.34:1Passes AAPasses AA
background / grammar-teal
#fdf2e9#086b78
5.63:1Passes AAPasses AA
card / grammar-teal
#ffffff#086b78
6.20:1Passes AAPasses AA
background / grammar-orange
#fdf2e9#9a4b15
5.62:1Passes AAPasses AA
card / grammar-orange
#ffffff#9a4b15
6.19:1Passes AAPasses AA

Dark theme

Approved pairValuesContrastNormal textLarge text / UI
background / foreground
#191919#fffdf8
17.30:1Passes AAPasses AA
card / card-foreground
#262626#fffdf8
14.89:1Passes AAPasses AA
popover / popover-foreground
#262626#fffdf8
14.89:1Passes AAPasses AA
primary / primary-foreground
#ff6b6b#1a1a1a
6.27:1Passes AAPasses AA
secondary / secondary-foreground
#a388ee#1a1a1a
6.06:1Passes AAPasses AA
muted / muted-foreground
#373330#d0c5bc
7.38:1Passes AAPasses AA
accent / accent-foreground
#4ecdc4#1a1a1a
9.00:1Passes AAPasses AA
destructive / destructive-foreground
#ff4d4f#1a1a1a
5.33:1Passes AAPasses AA
success / success-foreground
#c4f0ad#1a1a1a
13.60:1Passes AAPasses AA
warning / warning-foreground
#ffe66d#1a1a1a
13.92:1Passes AAPasses AA
info / info-foreground
#45b7d1#1a1a1a
7.42:1Passes AAPasses AA
background / link
#191919#c4b1ff
9.28:1Passes AAPasses AA
card / link
#262626#c4b1ff
7.98:1Passes AAPasses AA
blue / blue-foreground
#45b7d1#1a1a1a
7.42:1Passes AAPasses AA
orange / orange-foreground
#f7a072#1a1a1a
8.48:1Passes AAPasses AA
mint / pastel-foreground
#c4f0ad#1a1a1a
13.60:1Passes AAPasses AA
sky / pastel-foreground
#b9e6f6#1a1a1a
13.02:1Passes AAPasses AA
purple / pastel-foreground
#a388ee#1a1a1a
6.06:1Passes AAPasses AA
yellow / pastel-foreground
#ffe66d#1a1a1a
13.92:1Passes AAPasses AA
coral / pastel-foreground
#ff6b6b#1a1a1a
6.27:1Passes AAPasses AA
teal / pastel-foreground
#4ecdc4#1a1a1a
9.00:1Passes AAPasses AA
blue / pastel-foreground
#45b7d1#1a1a1a
7.42:1Passes AAPasses AA
orange / pastel-foreground
#f7a072#1a1a1a
8.48:1Passes AAPasses AA
background / destructive
#191919#ff4d4f
5.38:1Passes AAPasses AA
card / destructive
#262626#ff4d4f
4.63:1Passes AAPasses AA
background / grammar-coral
#191919#ff9cb0
8.90:1Passes AAPasses AA
card / grammar-coral
#262626#ff9cb0
7.66:1Passes AAPasses AA
background / grammar-green
#191919#7ee2a8
11.16:1Passes AAPasses AA
card / grammar-green
#262626#7ee2a8
9.61:1Passes AAPasses AA
background / grammar-blue
#191919#8dbbff
8.95:1Passes AAPasses AA
card / grammar-blue
#262626#8dbbff
7.70:1Passes AAPasses AA
background / grammar-violet
#191919#ceb0ff
9.44:1Passes AAPasses AA
card / grammar-violet
#262626#ceb0ff
8.13:1Passes AAPasses AA
background / grammar-amber
#191919#ffd36a
12.37:1Passes AAPasses AA
card / grammar-amber
#262626#ffd36a
10.65:1Passes AAPasses AA
background / grammar-teal
#191919#78dce8
11.05:1Passes AAPasses AA
card / grammar-teal
#262626#78dce8
9.51:1Passes AAPasses AA
background / grammar-orange
#191919#ffba83
10.55:1Passes AAPasses AA
card / grammar-orange
#262626#ffba83
9.08:1Passes AAPasses AA

What is missing

Gaps that prevent this foundation from being a stable rule.

There are no open gaps in the current scope of this foundation.

Next decisions

Recommended order for turning findings into a stable foundation.

  1. 01

    Run theme:check after palette edits. Use text and symbols as well as color for errors and selection.