Design systems, extracted.
Search curated design systems pulled from premium templates or create one from URL. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Fit Trainer
Fit Trainer is a high-contrast dark template built for personal trainers, gyms, and wellness studios who want their digital presence to feel as charged as a Saturday-morning lift. Near-black canvases give way to lifted graphite cards, and a single saturated cobalt accent supplies every spark — call-to-action buttons, dot indicators, pricing tags, the brand mark. Typography does the heavy lifting: condensed Oswald headlines stand at attention in uppercase, paired with a calm, readable Satoshi body. The result is energetic, masculine-leaning but not aggressive — confident, gym-floor lighting captured as a design system.
Sections from Fit Trainer
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Vertical Process Timeline
View section
Hero with Overlapping Images
View section
Fitness Experience Gallery Stats
View section
Hero with Scrolling Gallery
View section
Big Quote Block
View section
Video Background Hero CTA
View section
Three Column Pricing Cards
View section
FAQ Accordion Section
View section
Hero with Background Image
View section
Dark Navigation Bar Dropdown
View section
Contact Section Two Column
View section
Multi-Column Footer with Contact
View section
Colors
Canvas
Iron Input
#1f1f1f
Form-field surface. Checkout inputs and interactive field backgrounds.
Graphite Lift
#161617
Lifted surface. Pricing tiles, testimonial cards, contact card, footer ground.
Obsidian Black
#070708
Primary canvas. Page background, full-bleed hero sections, footer base.
Ink
Fog Text
#e7e7e7
Secondary text. Navigation links, subdued labels.
Chalk Divider
#ffffff4d
Divider line. Hairline rules inside cards, footer separators.
Stadium White
#ffffff
Primary text & ink. Headlines, body copy, button labels on dark surfaces.
Accent
Voltage Cobalt
#184bcd
Brand accent. Primary buttons, brand circle, indicator dots, pricing tags, focus states.
Voltage Cobalt Glow
#184bcd33
Soft accent wash. Tag fills, hover wells on outline buttons, glow shadows.
Typography
The quick brown fox jumps
Headlines, stat numbers, big display quotes — uppercase, condensed, weight-forward.
The quick brown fox jumps
Body copy, navigation, labels, subtitles — calm, neutral, highly legible.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
120pxCard padding
64pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-48
48px--spacing-64
64px--spacing-72
72px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-160
160pxBorder radius
tags40pxfield0pxtiles0pxcircle9999pxbuttons0pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Obsidian Black
Level 2Graphite Lift
Level 3Iron Input
Do's and don'ts
- Set every page on Obsidian Black (#070708) and lift content surfaces to Graphite Lift (#161617) — never invert the relationship.
- Reserve Voltage Cobalt for action and brand only: primary CTAs, the brand circle, the bullet dot, and pricing tags.
- Set all H1, H2, H3 and stat numbers in Oswald uppercase at weights 500–600 to keep the gym-poster confidence consistent.
- Use sharp, square corners on cards, buttons, and form fields — only the small accent dot, brand circle, and pill tags carry radius.
- Pad pricing and testimonial tiles generously (40–64px interior) and separate sections with 120px of vertical breathing room.
- Pair every section heading with a lowercase pill-tag (e.g. 'pricing', 'testimonials') in a cobalt-tinted wash for hierarchy.
- Use full-bleed photography behind hero sections with a left-to-right Obsidian gradient overlay so headlines remain crisp.
- Don't introduce additional accent hues — no greens, oranges, or secondary brand colors. Cobalt is the only voltage.
- Don't round buttons or cards. Pill-shaped or rounded rectangles break the architectural, square-cornered system.
- Don't set body copy in Oswald — it is a display face only. Body and UI text always use Satoshi.
- Don't place dark text on dark surfaces; ink stays in the white-to-fog range above #e7e7e7.
- Don't flatten the surface stack. Always preserve the Obsidian → Graphite → Iron progression so cards feel lifted.
- Don't reduce section padding below 80px on desktop — the template's energy depends on its spacious cadence.
- Don't mix sentence case into display headlines; Oswald headings are uppercase by system rule.
Example prompts
New service section
Hero variant
Stat block
Contact card
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide