The Remnus look
The colors and type behind the app and this site. Use it as a reference for visuals, decks, and press.
Colors
Every color is a role token in the app, shown in its dark and its light value.
Surfaces
The desk frames everything; content sits on the sheet.
- desk#111316 / #eceef1
- sheet#191b1f / #ffffff
- raised#1f2226 / #f7f8fa
- line#2a2d33 / #e4e6ea
- line-strong#3c4047 / #d2d6dc
Text
Four steps, from headings down to faint icons.
- fg#eceef1 / #15171b
- fg-2#b0b4bc / #454a53
- fg-3#979ca5 / #5f6570
- fg-4#5d626b / #9ba0a9
Ink and signal
Ink is the primary action. Yellow is the one accent: what is live, selected or the next step.
- ink#eceef1 / #15171b
- signal#f0b43c / #f5b300
- signal-text#f0b43c / #5c4600
Semantic
Only for success, warnings and errors.
- red-400#cd4d55 / #d33c3c
- green-400#7fc36d / #1a7f4b
- amber-400#d9914d / #b86a0a
Data colors
Charts and property values. Never interface chrome.
- chart-1#3987e5 / #2a78d6
- chart-2#d95926 / #eb6834
- chart-3#199e70 / #1baf7a
- chart-4#c98500 / #eda100
- chart-5#d55181 / #e87ba4
- chart-6#008300 / #008300
- chart-7#9085e9 / #4a3aa7
- chart-8#e66767 / #e34948
Each swatch shows the dark theme on the left and the light theme on the right.
Typography
Two typefaces: one for everything you read, one for literal machine text.
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789