Color palette
Theme | Base background | Chrome background | Paper background | Primary Text | Secondary Text | Accent Text | Link | Icon | Mid background | Border | Shadow | Tab bar shadow | HR | Card type background | Card type icon | Secondary action background | Destructive action / error | Warning |
Default | #EAECF0 (Base80) | #FFFFFF (Base100) | #FFFFFF (Base100) | #222222 (Base10) | #72777D (Base30) | #00AF89 (Green50) | #3366CC (Accent50) | #54595D (Base20) | #F8F9FA (Base90) | #C8CCD1 (Base70) | #EAECF0 (Base80) | #000 and 25% opacity | #C8CCD1 (Base70) | varied | varied | #2A4B8D (Accent10) | #DD3333 (Red50) | #FFCC33 (Yellow50) |
Sepia | #E1DAD1 (Amate) | #F8F1E3 (Parchment) | #F8F1E3 (Parchment) | #222222 (Base10) | #646059 (Masi) | #00AF89 (Green50) | #3366CC (Accent50) | #646059 (Masi) | #F0E6D6 (Papyrus) | #CBC8C1 (Kraft) | #CBC8C1 (Kraft) | #CBC8C1 (Kraft) | #CBC8C1 (Kraft) | #E1DAD1 (Amate) | #646059 (Masi) | #2A4B8D (Accent10) | #B32424 (Red30) | #FF9500 (Osage) |
Dark | #222222 (Base10) | #43464A (Mesophere) | #2E3136 (Thermosphere) | #F8F9A (Base90) | #C8CCD1 (Base 70) | #00AF89 (Green50) | #6699FF (Stratosphere) | #C8CCD1 (Base 70) | #27292D (Exosphere) | #43464A (Mesophere) | #43464A (Mesophere) | #43464A (Mesophere) | #C8CCD1 (Base 70) | #43464A (Mesophere) | #C8CCD1 (Base 70) | #2A4B8D (Accent10) | #FF6E6E (Red75) | #ffcc33 (Yellow50) |
Color guides
Sepia | Dark |
Mocks + Redlines in Zeplin
Sepia | Dark |
Zeplin: https://zpl.io/1SxY5X | Zeplin: https://zpl.io/Ir2pQ |