DESIGN.md@packs/bergside-awesome-design-skills/vibrant · git:20260921.cdae51f · 2026-09-21 · sha256 76a386e5a20494b9
DESIGN.md@packs/bergside-awesome-design-skills/vibrant git:20260921.cdae51fA
Immutable. This exact content never changes and is served at /api/v1/blob/76a386e5a20494b9.
---
name: Vibrant
colors:
primary: "#7C61D4"
secondary: "#EAAE87"
success: "#16A34A"
warning: "#D97706"
danger: "#DC2626"
surface: "#FFFFFF"
text: "#2F281D"
neutral: "#FFFFFF"
typography:
h1:
fontFamily: "Fascinate"
fontSize: 2.5rem
body-md:
fontFamily: "Noto Sans"
fontSize: 1rem
label-caps:
fontFamily: "Fira Code"
fontSize: 0.875rem
sourceScale: "14/16/18/24/32/40"
weights: "Noto Sans 100/200/300/400/500/600/700/800/900; Fascinate 400; Fira Code 300/400/500/600/700"
rounded:
sm: 4px
md: 8px
spacing:
sm: 2px
md: 4px
sourceScale: "2/4/8/12/16/24/32/48"
---
## Overview
Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.
## Style Foundations
- **Visual style:** modern, clean, bold, playful
- **Typography scale:** 14/16/18/24/32/40
- **Typography fonts:** primary=Noto Sans, display=Fascinate, mono=Fira Code
- **Typography weights:** Noto Sans 100/200/300/400/500/600/700/800/900; Fascinate 400; Fira Code 300/400/500/600/700 (as shipped on Google Fonts, checked 2026-09-20)
- **Color palette:** primary, secondary, neutral, success
- **Spacing scale:** 2/4/8/12/16/24/32/48
## Colors
- **Primary (#7C61D4):** Token from style foundations.
- **Secondary (#EAAE87):** Token from style foundations.
- **Success (#16A34A):** Token from style foundations.
- **Warning (#D97706):** Token from style foundations.
- **Danger (#DC2626):** Token from style foundations.
- **Surface (#FFFFFF):** Token from style foundations.
- **Text (#2F281D):** Token from style foundations.
- **Neutral (#FFFFFF):** Derived from the surface token for official format compatibility.