Zebco

DESIGN.md

---
version: alpha
name: Zebco
colors:
  neutral-1: "#DA291C"
  neutral-2: "#3E4E59"
  primary: "#000000"
  surface: "#FFFFFF"
  neutral-5: "#D9D9D9"
typography:
  display:
    fontFamily: "Trade Gothic Next LT Pro Bold Condensed"
  body:
    fontFamily: Quantico
spacing:
  sm: 6px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 144px
components:
  button-primary:
    backgroundColor: "#231f20"
    textColor: "#ffffff"
    rounded: 0px
    padding: "7px 15px"
    fontWeight: 400
  button-2:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    rounded: 0px
    padding: "7px 15px"
    fontWeight: 400
  button-3:
    backgroundColor: transparent
    textColor: "#000000"
    rounded: 0px
    padding: "0px 0px"
    fontWeight: 400
---

## Colors

- **neutral-1 (#DA291C):** neutral role.
- **neutral-2 (#3E4E59):** neutral role.
- **primary (#000000):** primary role.
- **surface (#FFFFFF):** surface role.
- **neutral-5 (#D9D9D9):** neutral role.

## Typography

- **Trade Gothic Next LT Pro Bold Condensed:** trade_gothic_next_lt_pro_bold_condensed
- **Quantico:** quantico
- **azo-sans-web:** azo_sans_web (weights: 300, 700)
- **trade-gothic:** trade_gothic (weights: 500)

## Layout

- Spacing scale: 6, 16, 24, 32, 144 px

## Elevation & Depth

- `rgba(0, 0, 0, 0.7) 0px 3px 12px 0px`
- `rgb(153, 153, 153) 0px 2px 10px -3px`

## Components

- **button-primary:** background #231f20, text #ffffff, radius 0px
- **button-2:** background #ffffff, text #000000, radius 0px
- **button-3:** background transparent, text #000000, radius 0px