Chroma
A color token system, by One Quest
Thoughtfully crafted color system ensuring visual consistency, contrast, and accessibility. Loosely based on Material Design’s color system with tweaks for simplicity and vibe.
Mana
Surface: #FFB22E
Ink: #3F2800
7.69:1
AAA
Faint Mana
Surface: #FFCF98
Ink: #562E00
8.18:1
AAA
Whisp
Surface: #BE92FF
Ink: #18003D
7.90:1
AAA
Faint Whisp
Surface: #D7C7F0
Ink: #3A1576
8.59:1
AAA
Glimmer
Surface: #FC86FE
Ink: #380039
8.13:1
AAA
Faint Glimmer
Surface: #F3B8F4
Ink: #6A006B
7.10:1
AAA
Guide
Surface: #00D8DF
Ink: #00322C
7.96:1
AAA
Faint Guide
Surface: #A1EAEC
Ink: #004749
7.75:1
AAA
Victory
Surface: #00D165
Ink: #002C14
7.52:1
AAA
Faint Victory
Surface: #C7F2D7
Ink: #004017
9.80:1
AAA
Beware
Surface: #F0EC10
Ink: #484700
7.67:1
AAA
Faint Beware
Surface: #FFFD9E
Ink: #515000
7.92:1
AAA
Calamity
Surface: #FF6D48
Ink: #1A0400
7.09:1
AAA
Faint Calamity
Surface: #FED4C0
Ink: #612103
8.91:1
AAA
Bright with Ink
Surface: #FFF9F0
Ink: #241700
16.75:1
AAA
Bright with Dim Ink
Surface: #FFF9F0
Ink: #57482D
8.46:1
AAA
Mid with Ink
Surface: #FFEEDA
Ink: #241700
15.44:1
AAA
Mid with Dim Ink
Surface: #FFEEDA
Ink: #57482D
7.80:1
AAA
Deep with Ink
Surface: #FFE3BF
Ink: #241700
14.18:1
AAA
Deep with Dim Ink
Surface: #FFE3BF
Ink: #57482D
7.16:1
AAA
Dark Mana
Surface: #FFF9F0
Ink: #C74B00
4.52:1
AA
Dark Whisp
Surface: #FFF9F0
Ink: #5706D1
8.52:1
AAA
Dark Glimmer
Surface: #FFF9F0
Ink: #98009B
7.14:1
AAA
Dark Guide
Surface: #FFF9F0
Ink: #005F62
7.13:1
AAA
Edge Dim
Surface: #FFF9F0
Ink: #B79F7A
Edge Deep
Surface: #FFF9F0
Ink: #593900
*All contrast checks completed in 2025 & 2026 with the WebAIM Contrast Checker found here.
Runes
Typography & Symbology
Fonts
Each font in the Simulacra has been hand selected by me as a system of styles that support each other.
Caprasimo
Used for
Headings 1-2
A soft-serif transitional typeface that cleverly hearkens back to the early 20th-century Cooper Series. With its expressive, vintage charm, Caprasimo supports Latin scripts. Designed by The DocRepair Project, Phaedra Charles, Flavia Zimbardi.
Chicle
Used for
Headings 3-6
With a vintage and playful vibe, this font supports Latin and extended Latin scripts. True to its name—you guessed it—Chicle means bubble gum, delivering a sweet design fix that’s irresistibly fun. Designed by Sudtipos.
Londrina Solid
Used for
Labels and Titles
Part of a playful typeface family inspired by the bustling streets of São Paulo. Known for its urban and informal style, it’s a neo-grotesque font that carries expressive and rugged traits. Designed by Marcelo Magalhães.
Gabarito
Used for
Content
With a striking blend of expressive, stiff, and calm traits, it supports Latin and Latin-extended scripts. Its clean, geometric structure makes it ideal for diverse applications, capturing a modern yet versatile essence. Designed by Leandro Assis, Álvaro Franca, and Felipe Casaprima at Naipe Foundry.
Scale
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Content
Label
Label
Label
Powered by Phosphor Icons
Phosphor Icons is an incredible open source library of symbols! A passion project by Helena Zhang and Tobias Fried, it’s free and open-source, licensed under MIT.
Showcase
Currently the Simulacra uses the Duotone and Filled styles. Here’s a few great symbols in both styles.
Duotone Style
Duotone is the primary symbol style for the Simulacra and is used in all sorts of locations and scenarios.
Filled Style
Filled style is used when symbols need higher emphasis. For example, when a button with a symbol is active.
WordPress Symbol Void
WordPress doesn’t natively support symbols/icons yet, and I’m using the Icon Block by Nick Diego to fill this void. It’s very solid and allows me to import SVG snippets for all the Phosphor symbols I use.
