Meet Our BRand
About Icalia Labs
Values
Foundations
Typography
Colors
Writing
Colors
-
🎨
Brand Main Colors
‍Warrior Red is the most Icalia color of all, but we also love Space Black (who doesn’t?).
  • Lead with Warrior Red for big brand hero, titles or accent color elements.
  • Use Space black as a second option for secondary pages, elements or ctas.
Warrior Red
HEX: EE3A43
Base Variable: red-60
Space Black
HEX: 1B1C26
Base Variable: n-100
Main Palette
Text, backgrounds, panels, form controls — almost everything in an interface is NEUTRAL.
Neutral
Text, backgrounds, panels, form controls — almost everything in an interface is NEUTRAL.
Space Black
HEX: #1B1C26
Base Variable: n-100
n-90
HEX: #2D2F40
Base Variable: n-90
n-80
HEX: #585C78
Base Variable: n-80
n-70
HEX: #888B9F
Base Variable: n-70
n-60
HEX: #B0B3CE
Base Variable: n-60
n-50
HEX: #C3C7E5
Base Variable: n-50
n-40
HEX: #D5D8ED
Base Variable: n-40
n-30
HEX: #E1EF2
Base Variable: n-30
n-20
HEX: #EFF0FB
Base Variable: n-20
n-10
HEX: #F9F9FF
Base Variable: n-10
White
HEX: #FFFFFF
Base Variable: n-0
Red
Use Warrior Red for primary actions, active navigation elements, etc. These are the colors that determine the overall look of a site.Ultra-light shades can be useful as a tinted background for things like alerts, while Bright shades work great for text and backgrounds too.
r-100
HEX: #471114
Base Variable: r-100
r-90
HEX: #5f171b
Base Variable: r-90
r-80
HEX: #7f1d1d
Base Variable: r-80
n-70
HEX: #d6343c
Base Variable: r-70
Warrior Red
HEX: #ee3a43
Base Variable: r-60
MAIN
r-50
HEX: #f16169
Base Variable: r-50
r-40
HEX: #f5898e
Base Variable: r-40
r-30
HEX: #f8b0b4
Base Variable: r-30
r-20
HEX: #fcd8d9
Base Variable: r-20
r-10
HEX: #fdebec
Base Variable: r-10
Secondary Palette
Be mindful of the specificities of our secondary palette; Should be used in very small quantities throughout the UI.
Blue 60
HEX: #2f3ca0
Base Variable: b-60
Teal 40
HEX: #5EEAD4
Base Variable: t-40