Therabody

DESIGN.md

---
version: alpha
name: Therabody
colors:
  neutral-1: "#FFFFFF"
  text: "#252525"
  primary: "#000000"
  neutral-4: "#B03730"
  neutral-5: "#D8D8D8"
  color: "#555555"
  color-2: "#333333"
  background: "#FFFCF5"
typography:
  display:
    fontFamily: Assistant
  body:
    fontFamily: "Suisse Intl"
spacing:
  sm: 2px
  md: 10px
  lg: 18px
  xl: 26px
  2xl: 40px
components:
  button-primary:
    backgroundColor: "#ffffff"
    textColor: "#252729"
    rounded: 9px
    padding: "12px 10px"
    fontWeight: 600
  button-2:
    backgroundColor: transparent
    textColor: "#252525"
    rounded: 9px
    padding: "12px 10px"
    fontWeight: 600
  button-3:
    backgroundColor: transparent
    textColor: "#252525"
    rounded: 0px
    padding: "0px 0px"
    fontWeight: 400
---

## Colors

- **neutral-1 (#FFFFFF):** neutral role.
- **text (#252525):** text role.
- **primary (#000000):** primary role.
- **neutral-4 (#B03730):** neutral role.
- **neutral-5 (#D8D8D8):** neutral role.
- **color (#555555):** neutral role.
- **color-2 (#333333):** neutral role.
- **background (#FFFCF5):** surface role.

## Typography

- **Assistant:** assistant
- **Suisse Intl:** suisse_intl
- **ABC Arizona Text Variable:** abc_arizona_text_variable (weights: 440)
- **Open Sans:** open_sans
- **Suisse Int'l:** suisse_intl_2 (weights: 400, 440)

## Layout

- Spacing scale: 2, 10, 18, 26, 40 px

## Elevation & Depth

- `rgba(0, 0, 0, 0.2) 0px 26px 80px 0px`

## Components

- **button-primary:** background #ffffff, text #252729, radius 9px
- **button-2:** background transparent, text #252525, radius 9px
- **button-3:** background transparent, text #252525, radius 0px