Hero Group

DESIGN.md

---
version: alpha
name: "Hero Group"
colors:
  accent: "#00328C"
  background: "#F5F5F5"
typography:
  display:
    fontFamily: ff-din-round-web-pro
    fontWeight: 400
spacing:
  sm: 8px
  md: 16px
  lg: 32px
  xl: 56px
  2xl: 80px
components:
  button-primary:
    backgroundColor: "#003e8f"
    textColor: "#ffffff"
    rounded: 9999px
    padding: "12px 32px"
    fontWeight: 700
  button-2:
    backgroundColor: transparent
    textColor: "#00328c"
    rounded: 9999px
    padding: "12px 32px"
    fontWeight: 700
  button-3:
    backgroundColor: transparent
    textColor: "#00328c"
    rounded: 0px
    padding: "0px 0px"
    fontWeight: 400
---

## Colors

- **accent (#00328C):** primary role.
- **background (#F5F5F5):** surface role.

## Typography

- **ff-din-round-web-pro:** ff_din_round_web_pro (weights: 400, 500, 700)

## Layout

- Spacing scale: 8, 16, 32, 56, 80 px

## Elevation & Depth

- `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`

## Components

- **button-primary:** background #003e8f, text #ffffff, radius 9999px
- **button-2:** background transparent, text #00328c, radius 9999px
- **button-3:** background transparent, text #00328c, radius 0px