Implementation

Tokens

Source of truth for product is still workloop/src/index.css and the mobile theme. Campaign blue is extra until a migration.

CSS

:root {
  --brand-indigo: #3525CD;   /* shipped email + mobile */
  --brand-violet: #7B5CF7;   /* shipped dashboard */
  --brand-blue: #0078FC;       /* campaign / logo — additional */
  --brand-navy: #000C24;
  --primary: 252 80% 65%;              /* #7B5CF7 */
  --background: 240 6% 6%;             /* #0E0E10 */
}

JSON

{
  "shipped": {
    "indigo": "#3525CD",
    "violet": "#7B5CF7"
  },
  "campaign": {
    "blue": "#0078FC",
    "navy": "#000C24"
  }
}

Download brand.json

Motion

--dur-fast

--dur-base

--dur-slow

--ease-out

--ease-in-out

--ease-spring

8pt spacing

--sp-0

0px

--sp-1

4px

--sp-2

8px

--sp-3

12px

--sp-4

16px

--sp-5

20px

--sp-6

24px

--sp-8

32px

--sp-10

40px

--sp-12

48px

--sp-16

64px

--sp-20

80px