Portal®

DESIGN.md

---
version: alpha
name: "Portal®"
colors:
  surface: "#C5BBAE"
  neutral-2: "#27272A"
  neutral-3: "#0071CE"
  neutral-4: "#EB001B"
  neutral-5: "#F79E1B"
  accent: "#000000"
  text: "#4B3D33"
typography:
  display:
    fontFamily: "Portal HH"
    fontWeight: 400
  mono:
    fontFamily: "SF Mono"
spacing:
  sm: 10px
  md: 20px
  lg: 28px
  xl: 48px
  2xl: 64px
components:
  button-primary:
    backgroundColor: "#bbb1a4"
    textColor: "#4b3d33"
    rounded: 13px
    padding: "10px 13px"
    fontWeight: 400
  button-2:
    backgroundColor: transparent
    textColor: "#1c1c1c"
    rounded: 13px
    padding: "10px 13px"
    fontWeight: 400
  button-3:
    backgroundColor: transparent
    textColor: "#4b3d33"
    rounded: 0px
    padding: "0px 0px"
    fontWeight: 400
---

## Colors

- **surface (#C5BBAE):** surface role.
- **neutral-2 (#27272A):** neutral role.
- **neutral-3 (#0071CE):** neutral role.
- **neutral-4 (#EB001B):** neutral role.
- **neutral-5 (#F79E1B):** neutral role.
- **accent (#000000):** primary role.
- **text (#4B3D33):** text role.

## Typography

- **SF Mono:** sf_mono
- **Portal HH:** portal_hh (weights: 400, 700)

## Layout

- Spacing scale: 10, 20, 28, 48, 64 px

## Elevation & Depth

- `rgba(28, 28, 28, 0.15) 0px 2px 10px 0px`

## Components

- **button-primary:** background #bbb1a4, text #4b3d33, radius 13px
- **button-2:** background transparent, text #1c1c1c, radius 13px
- **button-3:** background transparent, text #4b3d33, radius 0px