Playground is the visual language for every Sarvita surface: saturated color blocks, hard cut-out shadows, chunky rounded geometry, and a voice set in Bricolage Grotesque. Color is always a flat block — never a cross-fade — and the warm cartoon Sar finally feels at home.
00 — Brand
The wordmark, the app icon, and Sar — recognized before a word is read. The wordmark pairs a rotated "S" tile with Bricolage "Sarvita".
Rotated coral "S" tile (−6°, hard shadow) + Bricolage Grotesque Black. Tile and text move as one. Don't unrotate or recolor the text.
A true 1024² square, opaque white edge-to-edge. The platform masks corners at display time. Mark inset ~12–15%.
Cream Pomeranian, blue-violet cape, teal "S" tag. Mount on a color block with a hard offset drop-shadow — Sar reads as a sticker pressed onto the page.
Same source PNG at common sizes with a squircle mask. Legible to ~40px; below that the "S" silhouette carries the brand.
01 — Palette
Click any swatch to copy its hex. A quiet warm sand bed lets the bold "crayon" blocks shout. Every block is one flat pigment — never a cross-fade. On light blocks (gold, lime) use ink text; on the rest use cream.
Warm sand & cream surfaces, warm-brown ink. Never pure white, never pure black.
Coral = primary action, hero block, brand. Coral-deep = pressed state & the hard button drop-shadow.
The bold play palette. Used as full-bleed card backgrounds and as the source for pillars, macros and data. Deep and saturated — flat, never gradient.
Drawn from the crayon palette and spread across the wheel — slate · amber · red · blue · green — so no two active pillars blur. Five active, two reserved.
Shared with pillars — same biology.
Warm play ramp. No rainbow.
One each. Error is deeper than brand coral.
02 — Typography
Bricolage Grotesque (Google) — a warm, slightly wonky grotesque — sets the big, heavy headlines and hero numerals. General Sans (Fontshare) carries all UI, body, buttons and data. Mono (JetBrains) is styleguide-only.
Headlines, section titles, hero numerals. Tracking −0.02em.
All UI, body, buttons, tabular data.
| Token | Size / line | Face | Used for |
|---|---|---|---|
| display | 64 / 62 | Bricolage | Hero numerals (bio-age) |
| title | 44 / 48 | Bricolage | Page / hero title |
| subtitle | 28 / 34 | Bricolage | Section title |
| headline | 20 / 28 | General Sans | Card & list headlines |
| body | 16 / 26 | General Sans | Primary body text |
| cta | 16 / 22 | General Sans | Buttons (bold) |
| pill | 13 / 18 | General Sans | Labels, chips, eyebrows |
| meta | 12 / 20 | General Sans | Fine print |
03 — Illustrations
Sar and the Path-node art are warm, saturated cartoons on transparent backgrounds. Mount them on a color block with a hard offset drop-shadow — the warm fur pops against the saturated block and reads as a pressed sticker.
04 — Blocks & shadows
Two rules carry the whole look: color is a flat block (never a cross-fade), and depth is a hard offset shadow (no blur). That cut-out, stacked-sticker feel is the signature.
Two-color cross-fade with a soft blurry drop-shadow. Reads generic-AI, fights the illustrations, no personality.
A flat coral block with a hard 7px 9px 0 offset shadow. Bold, warm, unmistakably ours.
05 — Components
Reference renderings. Every consuming surface hits these shapes with the same hex values — variance is a bug.
Primary = coral + cream + solid bottom drop-shadow. Dark = ink. Ghost = outlined with a hard offset. All press down on tap.
Background = state color @ 14–20% alpha; text = state color, darkened to clear AA.
Feature stat as a color block. Cream text, Bricolage numeral.
Single-hue conic ring — not a chrome gradient.
Each pillar a flat block tile + hard pop shadow. Fuel (gold) would take ink text at larger sizes.
Green → lime → gold → coral → deep red. No rainbow.
Your Zone 2 session had excellent heart-rate control. One more for the streak.
06 — Tokens
src/theme.css for Tailwind v4 consumers; src/tokens.css for everything else. Names match. Changing one without the other is a bug.
@import "tailwindcss";
@import "@sarvita/design-system/theme.css";
<button class="h-btn px-6 bg-coral text-cream
text-cta font-bold rounded-btn">
Start your path
</button>
@import "@sarvita/design-system/tokens.css";
.cta {
background: var(--sv-color-coral);
color: var(--sv-color-cream);
border-radius: var(--sv-radius-btn);
box-shadow: 0 6px 0 var(--sv-color-coral-deep);
}
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet"> <link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap" rel="stylesheet">