Style

Color Token System, Typography, Symbology, Spacing & Radii

Color

Typography

Symbology

Space

Color Token System

Loosely based on Material Design naming patterns with some modifications to match my style and system. All colors have been carefully selected by me. Currently there’s only a light theme since WordPress doesn’t support multiple color sets yet. I’m also trying to build the most minimal color system I can without restricting myself too much. It’s an experiment and I’ll keep refining.

Colors

Primary

#FFB22E

On Primary

#32F800

WCAG Contrast

7.69:1

AAA

Primary Container

#FFCF98

On Primary Container

#562E00

WCAG Contrast

8.18:1

AAA

Tertiary

#FC86FE

On Tertiary

#380039

WCAG Contrast

8.13:1

AAA

Tertiary Container

#F3B8F4

On Tertiary Container

#6A006B

WCAG Contrast

7.1:1

AAA

Secondary

#BE92FF

On Secondary

#18003D

WCAG Contrast

7.9:1

AAA

Secondary Container

#D7C7F0

On Secondary Container

#3A1576

WCAG Contrast

8.59:1

AAA

Victory

#00D165

On Victory

#002C14

WCAG Contrast

7.52:1

AAA

Victory Container

#C7F2D7

On Victory Container

#004017

WCAG Contrast

9.8:1

AAA

Beware

#ED3C10

On Beware

#F1EAFD

WCAG Contrast

7.67:1

AAA

Beware Container

#FFFD9E

On Beware Container

#515000

WCAG Contrast

7.92:1

AAA

Calamity

#FF6D48

On Calamity

#1A0400

WCAG Contrast

7.09:1

AAA

Calamity Container

#FED4C0

On Calamity Container

#612103

WCAG Contrast

8.91:1

AAA

Surfaces

Surface Bright

#FFF9F0

On Surface

#241700

WCAG Contrast

16.75:1

AAA

Surface Bright

#FFF9F0

On Surface Dim

#57482D

WCAG Contrast

8.46:1

AAA

Surface

#FFF3E3

On Surface

#241700

WCAG Contrast

16.01:1

AAA

Surface

#FFF3E3

On Surface Dim

#57482D

WCAG Contrast

8.09:1

AAA

Surface Mid

Surface Medium

#FFEEDA

On Surface

#241700

WCAG Contrast

15.44:1

AAA

Surface Medium

#FFEEDA

On Surface Dim

#57482D

WCAG Contrast

7.8:1

AAA

Surface Dark

Surface Medium

#FFE3BF

On Surface

#241700

WCAG Contrast

14.18:1

AAA

Surface Medium

#FFE3BF

On Surface Dim

#57482D

WCAG Contrast

7.16:1

AAA

Decor

Outline

#FFF9F0

Surface Bright

#241700

WCAG Contrast

8.91:1

AAA

Outline

#FFF9F0

Surface Dark

#57482D

WCAG Contrast

8.91:1

AAA

Shadow

#FFF3E3

Surface Bright

#241700

WCAG Contrast

8.91:1

AAA

Shadow

#FFF3E3

Surface Dark

#57482D

WCAG Contrast

8.91:1

AAA

*All contrast checks were done in 2025 with the WebAIM Contrast Checker found here.

Typography/Glyphs

Still working on the typography system details, but there are currently 4 fonts being tested in the Simulacra. Originally there were 2, but to allow for a bit more customization and differentiation between certain styles, I’m exploring Chicle and Londrina Solid as well. This will continue to evolve.

Fonts

Caprasimo

Loud

Playful

Serif

Vintage

Whimsy

View On Google Fonts

Chicle

Used for headings 3-6

Condensed

Playful

Vintage

Whimsy

Label

View On Google Fonts

Londrina Solid

Used for labels

Grotesque

Rugged

Sans Serif

Condensed

Label

View On Google Fonts

Gabarito

Scale

This section could highlight the fonts applied to their different elements highlighting size, weight, color, style, or other factors. Here’s a decent starting point

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Content

Label

Symbology

Details about how I’m using the Phosphor icons (open source) font library. What is it, why I chose it, how it matches the brand and other details like that might be interesting to include.

Vibe

Style

Bits