Gula Båten

DESIGN.md

---
version: alpha
name: "Gula Båten"
colors:
  neutral-1: "#000000"
  text: "#FFFFFF"
  neutral-3: "#DFE6E9"
  neutral-4: "#116DFF"
  neutral-5: "#282626"
  accent: "#FFDE00"
  background: "#121212"
typography:
  display:
    fontFamily: "helvetica-w 01-roman"
  body:
    fontFamily: "wf_a 6c 4bbdcf 4e 9485f 9dda 13e 6c"
spacing:
  sm: 6px
  md: 20px
  lg: 40px
  xl: 56px
  2xl: 76px
components:
  button-primary:
    backgroundColor: "#ffffff"
    textColor: "#121212"
    rounded: 4px
    padding: "8px 16px"
    fontWeight: 400
  button-2:
    backgroundColor: transparent
    textColor: "#ffffff"
    rounded: 4px
    padding: "8px 16px"
    fontWeight: 400
  button-3:
    backgroundColor: transparent
    textColor: "#ffffff"
    rounded: 0px
    padding: "0px 0px"
    fontWeight: 400
---

## Colors

- **neutral-1 (#000000):** neutral role.
- **text (#FFFFFF):** text role.
- **neutral-3 (#DFE6E9):** neutral role.
- **neutral-4 (#116DFF):** neutral role.
- **neutral-5 (#282626):** neutral role.
- **accent (#FFDE00):** primary role.
- **background (#121212):** surface role.

## Typography

- **helvetica-w 01-roman:** helvetica_w_01_roman
- **wf_a 6c 4bbdcf 4e 9485f 9dda 13e 6c:** wf_a_6c_4bbdcf_4e_9485f_9dda_13e_6c
- **din-next-w 01-light:** din_next_w_01_light
- **wfont_47913a_a 6c 4bbdcf 4e 9485f 9dda 13e 6c 96aadb 9:** wfont_47913a_a_6c_4bbdcf_4e_9485f_9dda_13e_6c_96aadb_9
- **wf_bffbc 71366954ed 5bb 5fadf 9d:** wf_bffbc_71366954ed_5bb_5fadf_9d
- **Arial:** arial (weights: 700)
- **wfont_47913a_a6c4bbdcf4e9485f9dda13e6c96aadb9:** wfont_47913a_a6c4bbdcf4e9485f9dda13e6c96aadb9 (weights: 400)
- **helvetica-w01-roman:** helvetica_w01_roman (weights: 400)

## Layout

- Spacing scale: 6, 20, 40, 56, 76 px

## Components

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