Mineral and quiet on the bed; warm and saturated in the illustrations. One palette, one type system, one set of rules across the iOS app, sarvita.app, and video content. 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. Clearance = height of the "S". Don't recolor the text. The mark and text move together as one unit.
Source is logo-appicon.png — a true square 1024×1024, chalk fills edge-to-edge, no transparency, no baked rounded corners (iOS applies the mask at display time). Mark inset ~12–15% for safe zone. Submit as-is to App Store Connect.
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.
The full Sar set (40+ poses: hero, wave, chef, scientist, sleeping, coaching, yoga, …) lives in the iOS asset catalog at sar/Assets.xcassets/Mascot/. Path node illustrations are at sar/Assets.xcassets/PathNodes/. All are alpha-transparent PNGs — drop them onto any palette surface and they sit cleanly.
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.
Source of truth for now is the iOS asset catalog at sar/Assets.xcassets/Mascot/ and sar/Assets.xcassets/PathNodes/. Mirror exports into static/mascot/ for web and video reuse as the need arises.
04 — Gradient policy
The blue-to-purple wash currently used across the iOS app 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. iOS, web, and video should all hit these shapes with the same hex values — variance is a bug.
petrol + snow text + 6px radius + 44px height (iOS-tappable).
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);
}
iOS bridge (a Swift Color extension generated from the same hex values) is the next deliverable — not in this scaffold yet.