Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Altum
Altum is a professional-services template built for formation and advisory firms that need to look as credible as the counsel they give. The system pairs a near-black ink foundation with a single, confident brand ember — a burnt-orange-to-amber gradient wordmark — and warm, editorial photography of people and machinery that keeps the authority human rather than corporate-cold. Typography runs entirely on Inter Tight at a tight, controlled scale with negative letter-spacing on display sizes, giving headlines a dense, engineered feel that echoes the brand's precision-first positioning. Layout alternates deliberately between stark light sections (white canvas, charcoal ink text) and full-bleed dark sections (near-black backdrops with amber/orange photographic treatments), using pill-shaped buttons, uppercase micro-labels, and floating card collages to keep every scroll moment feeling considered and premium. The result reads like a firm that has already done the hard thinking — structured, warm, and unmistakably serious about growth.
Colors
Canvas
Depth Grey
#ececec
Inset surface. Input field backgrounds and subtly lifted panels within light sections.
Canvas White
#ffffff
Page canvas & primary button text. Base background for light sections and card surfaces.
Ink
Midnight Ink
#000000
Primary text & darkest surface. Headlines, body copy, and full-bleed dark section backgrounds.
Accent
Warm Sand
#f4e7c7
Soft neutral tag fill. Pills, badges, and quiet decorative blocks against dark backgrounds.
Brand Ember
#ff4d01
Primary brand accent. Wordmark gradient terminus, key CTAs, highlighted numerals and icons.
Dusk Violet
#4c3e5e
Moody secondary accent. Alternate dark-section tints behind portrait and still-life photography.
Golden Flare
#ffe96f
Secondary accent. Used for the accent button variant and small decorative highlights.
State — utility only
Coral Warn
#ed7472
Error state. Form validation failures and destructive-action messaging.
Amber Caution
#d5ad4b
Warning state. Caution banners and pending-review notices.
Success Green
#5cce63
Success state. Confirmation messaging and completed-step indicators.
Typography
The quick brown fox jumps
Sole typeface for display, body, label, and button text across the system.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
160pxCard padding
32pxElement 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-44
44px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-160
160px--spacing-200
200px--spacing-320
320pxBorder radius
tag0pxcards20pxinput0pxsmall8pxdefault12pxbutton-circle24pxSurfaces
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 1Canvas White
Level 2Depth Grey
Level 3Midnight Ink
Do's and don'ts
- Use a 100vw border-radius on all primary, secondary, and accent buttons for the consistent pill shape.
- Pair warm editorial photography (portraits, desert tones, machined close-ups) against near-black backgrounds for contrast.
- Set uppercase micro-labels at 10–12px with 0.75px letter-spacing to mark section eyebrows ('ABOUT US', 'INCLUDES').
- Apply tight negative letter-spacing (-0.5px to -2px) on display and heading sizes to keep large type dense and engineered.
- Alternate light (white canvas) and dark (midnight ink) full-bleed sections to create rhythm down the page.
- Use the orange-to-amber brand gradient sparingly — on the wordmark and singular key accents, never as a wash.
- Stack numbered service cards (01, 02, 03) with thin dividers and generous 80–160px section padding.
- Don't round corners on inputs or tags — they stay hard-edged (0px radius) to contrast with pill buttons.
- Don't introduce additional saturated hues beyond the ember/amber/violet accent trio; keep the palette disciplined.
- Don't compress section padding below 80px on desktop — the system relies on generous vertical breathing room.
- Don't use bold or black weights for display type; Altum's headlines stay at regular (400) weight for an engineered, understated feel.
- Don't place busy photography behind body copy without a dark overlay tint — legibility over white or light text requires contrast.
- Don't mix multiple typefaces; Inter Tight carries every role from display to button labels.
- Don't skip the uppercase label eyebrow above section headings — it anchors the editorial hierarchy.
Example prompts
New hero section
Service card grid
Testimonial block
Pricing page
# 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