Aira

DESIGN.md

---
version: alpha
name: Aira
colors:
  neutral-1: "#000000"
  primary: "#FFFFFF"
  neutral-3: "#3D3D41"
  neutral-4: "#EBEBEB"
  neutral-5: "#9A958F"
  neutral-6: "#058A5E"
  background: "#121212"
typography:
  display:
    fontFamily: airaDisplay
    fontWeight: 400
  body:
    fontFamily: airaText
    fontWeight: 400
spacing:
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 78px
components:
  button-primary:
    backgroundColor: "#ffffff"
    textColor: "#121212"
    rounded: 4px
    padding: "8px 16px"
    fontWeight: 400
  button-2:
    backgroundColor: transparent
    textColor: "#29292d"
    rounded: 4px
    padding: "8px 16px"
    fontWeight: 400
  button-3:
    backgroundColor: transparent
    textColor: "#222226"
    rounded: 0px
    padding: "0px 0px"
    fontWeight: 300
---

## Colors

- **neutral-1 (#000000):** neutral role.
- **primary (#FFFFFF):** primary role.
- **neutral-3 (#3D3D41):** neutral role.
- **neutral-4 (#EBEBEB):** neutral role.
- **neutral-5 (#9A958F):** neutral role.
- **neutral-6 (#058A5E):** neutral role.
- **background (#121212):** surface role.

## Typography

- **airaText:** airatext (weights: 400)
- **airaDisplay:** airadisplay (weights: 400)

## Layout

- Spacing scale: 8, 16, 24, 40, 78 px

## Elevation & Depth

- `rgba(0, 0, 0, 0.66) 0px 0px 0px 973px`

## Components

- **button-primary:** background #ffffff, text #121212, radius 4px
- **button-2:** background transparent, text #29292d, radius 4px
- **button-3:** background transparent, text #222226, radius 0px