Michelob ULTRA

DESIGN.md

---
version: alpha
name: "Michelob ULTRA"
colors:
  surface: "#FFFFFF"
  text: "#000000"
  neutral-3: "#3860BE"
  neutral-4: "#D8D8D8"
  neutral-5: "#6CC04A"
  color: "#555555"
  color-2: "#333333"
  accent: "#FF0010"
typography:
  display:
    fontFamily: "ULTRA Serif Regular"
    fontWeight: 700
  body:
    fontFamily: "Work Sans"
spacing:
  sm: 2px
  md: 14px
  lg: 24px
  xl: 38px
  2xl: 54px
components:
  button-primary:
    backgroundColor: "#ff0010"
    textColor: "#ffffff"
    rounded: 512px
    padding: "24px 16px"
    fontWeight: 500
  button-2:
    backgroundColor: transparent
    textColor: "#000000"
    rounded: 512px
    padding: "24px 16px"
    fontWeight: 500
  button-3:
    backgroundColor: transparent
    textColor: "#000000"
    rounded: 0px
    padding: "0px 0px"
    fontWeight: 400
---

## Colors

- **surface (#FFFFFF):** surface role.
- **text (#000000):** text role.
- **neutral-3 (#3860BE):** neutral role.
- **neutral-4 (#D8D8D8):** neutral role.
- **neutral-5 (#6CC04A):** neutral role.
- **color (#555555):** neutral role.
- **color-2 (#333333):** neutral role.
- **accent (#FF0010):** primary role.

## Typography

- **Work Sans:** work_sans
- **Barlow:** barlow
- **ULTRA Serif Regular:** ultra_serif_regular (weights: 700)
- **Oswald:** oswald (weights: 600, 700)
- **ULTRA Sans Regular:** ultra_sans_regular (weights: 400)

## Layout

- Spacing scale: 2, 14, 24, 38, 54 px

## Elevation & Depth

- `rgba(66, 73, 96, 0.4) 0px 0px 15px 0px`
- `rgb(153, 153, 153) 0px 2px 10px -3px`

## Components

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