Design Library

Sizing/Spacing

  1. var(--sp-0) 0px

  2. var(--sp-px) 1px

  3. var(--sp-0_5) 0.125rem // 2px

  4. var(--sp-1) 0.25rem // 4px

  5. var(--sp-1_5) 0.375rem // 6px

  6. var(--sp-2) 0.5rem // 8px

  7. var(--sp-2_5) 0.625rem // 10px

  8. var(--sp-3) 0.75rem // 12px

  9. var(--sp-3_5) 0.875rem // 14px

  10. var(--sp-4) 1rem // 16px

  11. var(--sp-4_5) 1.125rem // 18px

  12. var(--sp-5) 1.25rem // 20px

  13. var(--sp-5_5) 1.375rem // 22px

  14. var(--sp-6) 1.5rem // 24px

  15. var(--sp-6_5) 1.625rem // 26px

  16. var(--sp-7) 1.75rem // 28px

  17. var(--sp-7_5) 1.875rem // 30px

  18. var(--sp-8) 2rem // 32px

  19. var(--sp-8_5) 2.125rem // 34px

  20. var(--sp-9) 2.25rem // 36px

  21. var(--sp-9_5) 2.375rem // 38px

  22. var(--sp-10) 2.5rem // 40px

  23. calc(var(--sp-1) * 100) 0.25rem * 100 = 25rem // 400px

  24. var(--br-sm) 3px

  25. var(--br) 5px

  26. var(--br-lg) 8px

  27. var(--br-xl) 12px

Colors

Typography

No need to ever set font-size/weight/family, letter-spacing, etc. Just colors and margins.

The easiest and preferred method for using typography styles is to just use the css class.

h2

<span className="type-h2">Text here</span>

h3

<span className="type-h3">Text here</span>

h4

<span className="type-h4">Text here</span>

h5

<span className="type-h5">Text here</span>

h6

<span className="type-h6">Text here</span>

article-headline

<span className="type-article-headline">Text here</span>

subtitle1

<span className="type-subtitle1">Text here</span>

subtitle2

<span className="type-subtitle2">Text here</span>

body1

<span className="type-body1">Text here</span>

body2

<span className="type-body2">Text here</span>

caption

<span className="type-caption">Text here</span>

caption--bold

<span className="type-caption--bold">Text here</span>

overline

<span className="type-overline">Text here</span>

mini

<span className="type-mini">Text here</span>

form--button

<span className="type-form--button">Text here</span>

form--tab

<span className="type-form--tab">Text here</span>

form--sortcut

<span className="type-form--sortcut">Text here</span>

Usage

Extended styles with styled components/goober.

import styled from 'styled-components';

const Text = styled.p`
  color: var(--shade2);
`;

const Component = () => (
  <Text className="type-caption">Text here</Text>
)