v
vibeusers — design system
Tokens & components for the daily launch board · v1.0
← Back to app
01 — COLOR

Palette

Brand & signal
Primary
#1769FF
CTAs, links, focus
Green
#1E7E55
perks, freebies
Amber
#E8A400
ratings
Purple
#5B3FD6
editorial / chat
Ink
#191919
text, dark UI
Neutrals & surfaces
White
#FFFFFF
Paper
#FAFAF9
Surface
#F4F4F3
Chip
#F2F2F0
Line
#ECECEC
Muted
#6E6E6E
Cover tiles — product cards rotate through these
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
02 — TYPE

Typography

DISPLAY · Bricolage Grotesque 800
Get users.
Get freebies.
TEXT · Hanken Grotesk 400–700
Built for vibe-coding founders.

The daily board for vibe-coded AI tools — paid clicks for founders, perks & discounts for members. Body copy stays at 15–19px with a 1.45–1.55 line-height.

Display / H1
40–78px · 800
The quick brown fox
H2
28–48px · 800
The quick brown fox
Panel title
16px · 800
The quick brown fox
Body
15–19px · 400–500
The quick brown fox
Label
13–14px · 600
The quick brown fox
Caption
11–12px · 600
The quick brown fox
03 — ACTIONS

Buttons

+ Add ProjectGET FREEBIES →DarkGhost / outlineTab pill
Primary #1769FF → hover #0D5AE8 · Green #1E7E55 → #176A47 · radius 999px · weight 700–800.
04 — CHIPS & TAGS

Tags, badges & icon tiles

Category tagAI ToolsTemplates
Cursor★ 30% off★ MEMBER PERK5 online
✦For You
★Trending
✓Staff Pick
💬Chat
05 — COMPONENTS

Building blocks

PRODUCT CARD · cover-top
Cursor
Promptly
★ 30% off Pro
Turn rough ideas into clean, reusable prompts
by Mara Velez
★ 4.9◉ 412▲ 38
CHAT BUBBLE
M
Mara3m
first paid click came in within the hour 😮
Message #vibe-launches…
➤
PANEL HEADER
✦
For You
Curated for vibe builders
⋯
STAT · cycles every 2.6s
300K
Monthly Visitors
06 — FOUNDATIONS

Radius, spacing & elevation

Radius
6 tag
12 card
20 panel
999 pill
Spacing scale
8px
14px
20px
28px
40px
Elevation
card
cta glow
07 — INTERACTIVE

Controls & overlays

SEGMENTED CONTROL · tabs, sort, switchers
ActiveOptionOption
Active = white pill + soft shadow.
TOGGLE SWITCH
On
Off
DROPDOWN / MENU · filter, account
Menu itemMenu item
Destructive
MODAL · login / dialog
v
Log in
you@studio.com
Send magic link
Two-tone step icons — ink line + one blue accent