Visa

DESIGN.md

---
version: alpha
name: Visa
colors:
  surface: "#FFFFFF"
  secondary: "#5C5C5C"
  text: "#000000"
  primary: "#1A1E73"
  neutral-5: "#CCCCCC"
  accent: "#86BB40"
  text-inverse: "#FFFFFF"
  surface-inverse: "#000000"
typography:
  display:
    fontFamily: Dialect
  body:
    fontFamily: open-sans
rounded:
  sm: 0px
  md: 20px
spacing:
  sm: 5px
  md: 6px
  lg: 7px
  xl: 8px
  2xl: 10px
  step-6: 15px
  step-7: 20px
  step-8: 25px
components:
  button-primary:
    textColor: "#1a1e73"
  button-2:
    backgroundColor: "#86bb40"
    textColor: "#ffffff"
    padding: "7px 10px"
  button-3:
    backgroundColor: "#1a1e73"
    textColor: "#ffffff"
    rounded: 5px
    padding: "2px 10px"
---

## Colors

- **surface (#FFFFFF):** surface role.
- **secondary (#5C5C5C):** secondary role.
- **text (#000000):** text role.
- **primary (#1A1E73):** primary role.
- **neutral-5 (#CCCCCC):** neutral role.
- **accent (#86BB40):** accent role.
- **text-inverse (#FFFFFF):** text-inverse role.
- **surface-inverse (#000000):** surface-inverse role.

## Typography

- **Dialect:** dialect
- **open-sans:** open_sans

## Layout

- Corner radius scale: 0, 20 px
- Spacing scale: 5, 6, 7, 8, 10, 15, 20, 25 px
- Container max-width: 645 px

## Elevation & Depth

- `0 0 3px rgba(0, 0, 0, 0.5)`

## Components

- **button-primary:** text #1a1e73
- **button-2:** background #86bb40, text #ffffff
- **button-3:** background #1a1e73, text #ffffff, radius 5px