tiempo.fitness — Design System
1. Visual Theme & Atmosphere
Tiempo Fitness is a fitness app landing page built in Framer that commits fully to darkness and electric energy. The near-black canvas (rgb(10,10,10)) is the deepest of dark modes, and against it, a single explosive accent detonates: electric yellow-green (rgb(225,255,0)) — almost neon, almost chartreuse. The heading palette uses a warm cream (rgb(242,231,223)) that feels organic and body-conscious against the darkness. Three typefaces handle three distinct registers: Apris for powerful modern headings, SF Compact Rounded for stats/numbers, and Tiempos Text for editorial body copy.
2. Color Palette & Roles
| Role | Value | Usage |
|---|---|---|
| Canvas | rgb(10,10,10) |
Deepest near-black background |
| Surface 1 | rgb(18,18,18) |
Slightly lighter dark panel |
| Surface 2 | rgb(23,23,23) |
Card layer |
| Heading/accent text | rgb(242,231,223) |
Warm cream — primary foreground |
| Card bg (ghost) | rgba(242,231,223,0.05) |
Barely visible warm tint on cards |
| Electric yellow | rgb(225,255,0) |
Signature CTA, hero accent |
| Electric (near) | rgba(225,255,20,0.992) |
Slight warm variant of electric yellow |
No other accent colors. The electric yellow is absolute — everything else is shadow and warmth.
3. Typography Rules
A three-family system, each carving out its own register:
h2: Apris Medium, 40px, weight 400, −0.8px tracking — clean modern fitnessh3: Apris Medium, 32px, weight 400, −0.64px trackingh5: SF Compact Rounded Medium, 34px — rounded numerics, stats displayh6: Input Sans Regular, 11px, uppercase, +1.65px tracking — category labels/tagsp: Tiempos Text Regular, 16px, −0.32px tracking — editorial body copybody: system sans-serif at 12px (Framer default)
Apris provides the bold fitness identity. SF Compact Rounded handles the sporty number display. Tiempos Text brings editorial credibility to body content. Input Sans uppercase labels with wide tracking create a technical, app-like tag system.
4. Component Stylings
No border radii detected — Framer absolute-positioned layout. No shadows. Cards use the near-invisible warm tint (rgba(242,231,223,0.05)) as their only visual distinction from the canvas. The electric yellow CTA appears as a fully-saturated block against black.
5. Layout Principles
12 Framer breakpoints from 349 to 1300px — covering very small mobile (349px) through standard desktop. Section padding: 10px. The breakpoints at 350, 390, 780, and 800 suggest careful tuning for mobile fitness app screenshots at common device sizes.
6. Depth & Elevation
Three dark surfaces (10,10,10 → 18,18,18 → 23,23,23) create depth through luminance alone. No shadows. The electric yellow appears at luminance 0.851–0.860 — maximum contrast against the deepest darks.
7. Do’s and Don’ts
Do: Commit to the near-black canvas. Use electric yellow exclusively for the primary CTA or hero accent — one clear signal. Maintain the three-typeface hierarchy: Apris headings, SF Compact stats, Tiempos body.
Don’t: Add warm background colors — cream exists only in text. Don’t dilute the electric yellow with alternatives. Don’t round corners — the sharp edges complement the dark, technical aesthetic.
8. Responsive Behavior
12 Framer breakpoints with particular attention to sub-400px sizes (349, 350, 389, 390) — optimized for small mobile screens where fitness app audiences primarily engage.
9. Agent Prompt Guide
“Design in the style of tiempo.fitness: near-black
rgb(10,10,10)canvas, electric yellow-greenrgb(225,255,0)single accent, warm creamrgb(242,231,223)heading text, Apris Medium for headings, SF Compact Rounded for stats, Tiempos Text for body, uppercase Input Sans for labels, no shadows, dark athletic intensity.”
Generated by Sparkbites — extracted from live CSS analysis
