WASSUP Deck Design SystemLegacy format

A confident, light-first design system built for a car-care brand that feels smart, reliable, and energetic. WASSUP Deck uses WASSUP Green as the single high-energy accent against Warm White content surfaces and Matte Black cover/dark sections, with Earth Brown and Warm Gold as supporting warmth. The aesthetic is clean and geometric — soft 8–12px corners everywhere, generous white space, short scannable copy, and data-forward statements instead of vague adjectives.

Primary#A2C62C
Primary Pressed#8AAA22
Matte Black#1A1A1A
Earth Brown#594026
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Hero / H1Lexend ExtraBold · 48–64px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Page Title / H2Lexend Bold · 32–40px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Section Title / H3Lexend Bold · 24–28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Card TitleLexend Bold · 16–18px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter Regular · 16–18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallInter Regular · 13–14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

LabelInter Medium · 11–12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionInter Regular · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

A confident, light-first design system built for a car-care brand that feels smart, reliable, and energetic. WASSUP Deck uses WASSUP Green as the single high-energy accent against Warm White content surfaces and Matte Black cover/dark sections, with Earth Brown and Warm Gold as supporting warmth. The aesthetic is clean and geometric — soft 8–12px corners everywhere, generous white space, short scannable copy, and data-forward statements instead of vague adjectives.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

FilterSuccessNeutralCautionErrorPremium

Elevation & Depth

Subtle
Medium
Large
Overlay
Level 0
Level 1
Level 2

Do's & Don'ts

Do

Design light-first — Warm White is default canvas; Matte Black for headers and dark docs
Use WASSUP Green as an accent and bold full-surface fill on featured surfaces like Main Card
Use Matte Black text on light surfaces and white text on dark surfaces for maximum contrast
Keep copy short with specific numbers instead of vague adjectives

Don't

Stretch, distort, or recolor WASSUP logo
Use serif fonts or mix more than 2 typefaces in one document
Use edge-to-edge content on slides — leave clear space
Use more than 3 colors in a single piece
Use pill-shaped buttons/cards (only 16px radius — Status Badges are exception)
Use ALL CAPS for paragraphs (only labels and overlines)
Download .md
Ho Tong Ho Tong @tigert0ng
License MIT
Uploaded 2 weeks ago
Version v1
File size 12.9 KB
Downloads 17
Copies 1
bold dark light minimal saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/tigert0ng/wassup-deck-design-system and implement it in my code

Don't have the MCP? Install it here