Mineral and quiet on the bed; warm and saturated in the illustrations. One palette, one type system, one set of rules across every Sarvita surface. No cross-fade gradients in UI chrome — flat solid colors only, with the mascot doing the colorful talking.
00 — Brand
The wordmark, the app icon, and Sar — the three things people recognize before they read a word. Each has rules about size, surface, and clearance.
General Sans Semibold, slate ink, paired with the app-icon mark sized at ~1.15× the cap height. The mark and text move together as one unit. Don't recolor the text.
A true 1024×1024 square. Pure white fills edge-to-edge — no transparency, no baked rounded corners (the platform applies the mask at display time). Mark inset ~12–15% for safe zone.
Cream Pomeranian, blue-violet cape, citrine "S" tag. The cape ties Sar visually to the cool side of the palette (lapis, amethyst). The warm fur ties to copper / rust / citrine. Place on chalk or snow — never on a saturated pillar surface.
Same source PNG, displayed at common sizes with a squircle mask applied. The mark stays legible down to ~40px; below that the dog silhouette starts to muddy and the petrol "S" silhouette should carry the brand alone.
The transparent mark reads cleanly on any light surface in the system. For surfaces darker than pumice the mark loses contrast and a reverse variant is needed.
The mark and "Sarvita" move together as one unit. Mark is always ~1.15× the cap height; gap is always 0.42em. Same class works at any size.
Minimum padding on all sides = 0.5× the mark's height. Don't let text, edges, or other graphics encroach inside this zone.
Dashed outline = the 0.5× clearance zone (here ~60px around a 120px mark). Outline is a guideline only, not part of the asset.
Direct links to source files. Vendor into consuming projects rather than hot-linking.
| Asset | Format | Use | Link |
|---|---|---|---|
| App icon | PNG · 1024² · opaque white | App listings, square brand tile | logo-appicon.png |
| Mark | PNG · transparent | Wordmark inline, body placement | logo-mark.png |
| Sar · hero | PNG · transparent | Marketing hero, video | sar-hero.png |
| Sar · wave | PNG · transparent | Corner stickers, banners | sar-wave.png |
| Tokens (raw) | CSS | Non-Tailwind consumers | src/tokens.css |
01 — Palette
Click any swatch to copy its hex. Tier 1 covers ~90% of pixels. The data-viz tiers exist because the app has real distinct concepts — pillars, macros, heart-rate zones — that each need their own coherent mineral ramp.
Cool chalk, slate ink, no warmth. Quiet bed for the warm illustrations.
Petrol = primary action, brand mark, key emphasis. Used sparingly. Citrine = highlight, badges, the tiny signal pop. Not a state color.
Mineral hues, flat. Five active, two reserved. Each pillar's color appears only on that pillar's surfaces — they don't bleed into generic UI.
Protein deliberately = Strength pillar (rust); Fat deliberately = Stability pillar (jasper) — same underlying biology, no need for parallel hues.
Mineral warm ramp — sage → ochre → copper → rust → garnet. Replaces the blue/green/yellow/orange/red rainbow.
One success, one warning, one error. Defined once; never improvised per screen.
02 — Typography
General Sans (Indian Type Foundry, via Fontshare) — a modern grotesque in the Söhne / Inter family but with more drawn character. Display via tight tracking and high weight; UI text at body weight. No serif. No second family.
| Token | Size / line | Used for |
|---|---|---|
| title | 44 / 52 | Main page title, hero |
| subtitle | 28 / 36 | Section title, inner-page H1 |
| headline | 20 / 28 | Card & list headlines |
| body | 16 / 26 | Primary body text |
| cta | 15 / 22 | Buttons, action links |
| pill | 13 / 18 | Labels, nav, small chips |
| caption | 14 / 20 | Secondary text, hints |
| meta | 12 / 20 | Fine print |
Three sessions, 142 minutes total. One more to hit your weekly target of 180.
You've cleared Cardio, Strength, and Stability tier 3 this month. Nutrition is next — one logged meal away.
03 — Illustrations
Sar the Pomeranian and the Path node illustrations are warm, saturated cartoons on transparent backgrounds. The UI bed is cool and quiet so that warmth lands hard.
04 — Gradient policy
The two-color cross-fade wash is the single biggest "AI-generated" tell — replace with flat solids. The only allowed gradient pattern is a soft single-color tint overlay at low opacity, used for atmosphere — never for primary fills.
Two-color cross-fade as a primary fill. Reads generic, fights illustrations, dates instantly.
Flat chalk with a low-opacity petrol + citrine radial tint for atmosphere. Cool, quiet, distinctive.
05 — Components
Reference renderings. Every consuming surface should hit these shapes with the same hex values — variance is a bug.
petrol + snow text + 6px radius + 44px tap-friendly height.
snow + slate text + ash border. No accent until pressed.
Background = state color @ 12–14% alpha. Text = state color at full saturation. "Under" (slate-blue) for too-low states like under-eating.
Ring = pillar color (flat). Inner illustration goes in the inner circle. No gradient on the ring.
Citrine is the only "warm" UI color. Use only for genuinely earned highlights — streaks, unlocks, new content.
Mineral warm ramp. No rainbow.
06 — Tokens
src/theme.css for Tailwind v4 consumers (sarvita.app); 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-5 bg-petrol text-snow
text-cta font-medium rounded-btn">
Log a session
</button>
@import "@sarvita/design-system/tokens.css";
.cta {
background: var(--sv-color-petrol);
color: var(--sv-color-snow);
font: 500 15px/22px var(--sv-font-ui);
border-radius: var(--sv-radius-btn);
}