Quivvi · Design System

One source of truth.
For every surface.

The Quivvi design system covers the marketing website, the live quiz app, and brand artifacts. Every token, component, and pattern defined here is canonical — don't introduce ad-hoc values.

Plus Jakarta Sans Monochromatic purple 8px grid Floating 3D objects

Colors / Palette

Monochromatic purple + neutrals. Purple must appear on every screen. No greens, blues, reds, or yellows — except the semantic check green used only in comparison cards.

Primary Purple
Bright#7B3FF2
Hover, accent line 2
Primary#6C3CE9
CTAs, buttons, highlights
Active#5A2ED4
Pressed state
Deep#3A1FB8
Hero bg, 3D shadows
Lavender
Light#E8E1FF
Input borders, pill bg
Pale#D8CFFB
Step connectors, dividers
BG#F7F4FF
Page background — never pure white
BG Alt#FAF8FF
Alternate section bg
Neutrals & Semantic
Near Black#1A1A2E
Text primary, footer bg
Muted#6B6B80
Subtitles, meta text
Surface#FFFFFF
Cards, inputs — not page bg
Check#1F9D6B
Comparison ✓ only

Typography / Plus Jakarta Sans

Geometric-humanist. Headlines 800, subheads 700, labels 600, body 400. Tight line-height on display text (1.0–1.05), airy on body (1.6).

Signature: Two-line accent headline
Your next live quiz.
Starts right now.

Line 1 white, Line 2 in #7B3FF2. This two-line pattern is the single most recognizable type move.

Type scale
Hero / H164px · 800 · -0.02em
Quivvi
H236px · 800 · -0.02em
Three steps to live.
H324px · 800 · -0.01em
Create your quiz
H4 / Subhead20px · 700
Share the PIN and you're live.
Body LG18px · 400 · 1.6lh
Create it, share the PIN, go live. Starting at $1.
Body16px · 400 · 1.6lh
Real-time scoring. Everyone sees results instantly.
Body SM14px · 400
© 2026 Stormflows LLC · quivvi.app
Pill / Label13px · 700 · 0.04em
Unlimited players · Reusable quizzes
Price72px · 800 · -0.03em
$1

Spacing & Shape

8px base unit. All spacing values are multiples. Section rhythm: 96px desktop, 64px mobile.

Spacing scale
--space-14px
--space-28px
--space-312px
--space-416px
--space-624px
--space-832px
--space-1248px
--space-1664px
--space-2496px
Corner radii
--radius-pill
100px
--radius-card
20px
--radius-input
16px
50%
circle

Shadows / Purple-tinted

All shadows use purple tint — never black. This keeps them on-brand even in light mode.

Card
--shadow-card
0 2px 16px rgba(58,31,184,.08)
Card hover
--shadow-card-hover
0 8px 32px rgba(58,31,184,.14)
CTA button
--shadow-cta
0 4px 20px rgba(108,60,233,.35)

Motion / Purposeful & Fast

Users are running a live event. Keep it snappy. No bounces, spins, or attention-seeking loops. The 3D float is the signature animation — everything else defers to it.

Button hover150ms ease — brighten + deepen shadow
Card lift200ms ease — translateY(-2px) + larger shadow
Page transition300ms ease-in-out
Focus ring150ms ease
3D float4–6s ease-in-out infinite alternate — translateY(-12 to -16px) + slight rotate. Varied delay per object so they don't sync.
PIN morph260ms cubic-bezier(.2,.8,.2,1) — opacity + translateX + scaleX
Modal enter180ms ease fade + 220ms scale/slide

All float animations are wrapped in @media (prefers-reduced-motion: no-preference).

Buttons / Components

All buttons are fully pill-shaped (border-radius: 100px). Three variants: Primary, Ghost (dark bg), Ghost (light bg).

Light background
Dark background

Inputs / Forms

Border-radius 16px (--radius-input). 2px lavender border at rest, purple on focus. White background.

Cards / Surfaces

White surface, 20px radius, purple-tinted shadow. Lifts 2px on hover. Dark glass cards for hero overlays.

Light card
Hover me
White surface, 20px radius, purple shadow. Lifts on hover.
Dark glass card
Hero overlays
rgba white 8%, 1px border, backdrop-filter blur(8px).

Pills & Badges

Fully rounded (100px). Sentence case, never ALL CAPS. Lavender background for feature pills, primary purple for CTAs.

Feature pills
Unlimited players Reusable quizzes Real-time leaderboard All question types
Badges
✦ Coming soon Design System v1.0 ✓ Available now

Steps / How it works

Numbered circles in primary purple. Dashed connector (#D8CFFB) on desktop. 3-column grid collapses to 1-column on mobile.

1
Create your quiz
Build questions in seconds.
2
Share the PIN
$1 per game. Go live instantly.
3
Watch the leaderboard
Real-time scoring.

Comparison / Card pair

Two cards, VS badge centered. Quivvi strip in primary purple. Competitor in #6B6B80. ✓ marks in semantic check green, ⚠ marks in lavender.

Quivvi
$1
per game
✓ Pay only $1 per game
✓ Unlimited players
Other Platforms
$20+
per month
⚠ Monthly subscription
⚠ User caps
VS

3D Objects / Clay signature

Purple clay-render geometric shapes — the brand's signature motif. Corners and outer margins only. Never overlap text or CTAs. Aria-hidden always.

Sphere
Cube
Torus
Triangle
Pyramid
✦
Sparkle
PlacementCorners and outer margins. 1 XL anchor + smaller accents per zone.
Animation4–6s float, varied delay. No sync between objects. Reduced motion: static.
ColorsPrimary purple gradient. Deep purple shadows side. Bleed slightly off-edge.

Voice & Copy

Confident, direct, energetic, friendly. The energy of a great live event — never a school lesson or corporate deck.

Headline pattern
✅ Two-line, period for confidence
"Your next live quiz."
"Starts right now."
"Same fun."
"Way better value."
"Simple pricing."
"No surprises."
❌ Avoid
"Experience powerful, synergistic quiz solutions!"
Voice rules
✅ Active voice, present tense — "Share the PIN and you're live."
✅ First/second person — "Create your quiz." "Pay when you host."
✅ Value props: 3–5 words — "Unlimited players", "Real-time leaderboard"
✅ Sentence case everywhere — except the wordmark "Quivvi"
🚫 Never use
forever classroom teacher students kids powerful leverage synergy easy to use
✅ Emoji — sparingly
🚀 CTA 🔔 notify ✦ coming soon 🏆 leaderboard 📌 PIN