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.
Sanare
Sanare builds trust through restraint: a near-white canvas, a single deep navy ink, and warm, candid photography of real clinicians and patients. The system leans on generous whitespace, uppercase micro-labels, and large serif-free display type to feel authoritative without feeling cold — the visual language of a practice that is precise, caring, and unhurried.
Colors
Canvas
Mist Gray
#d9dae2
Muted body text & field fills. Secondary copy, input backgrounds, soft dividers.
Soft Stone
#f7f7f7
Lifted surface. Checkout blocks and quiet card backgrounds.
Canvas White
#ffffff
Page background. Base canvas for all content sections and cards.
Pale Divider
#d8dfe0
Hairline dividers. Separates sections and list items subtly.
Ink
Overlay Ink
#182d42cc
Hero photo scrim. Darkens imagery so white headline text stays legible.
Midnight Navy
#182d42
Primary text & ink. Headlines, navigation, button fills, and dark overlay surfaces.
Accent
Clinic Sky
#9adbff
Accent highlight. Secondary pill buttons and small call-to-action chips.
State — utility only
Alert Red
#f9031c
Error & urgent state. Form validation errors, emergency callouts.
Typography
The quick brown fox jumps
Primary typeface for all headings, body copy, navigation, and UI labels.
Spacing & shape
Purpose
Value
Preview
Density
comfortableMax width
1440pxSection gap
120pxCard padding
35pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-25
25px--spacing-30
30px--spacing-35
35px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-70
70px--spacing-80
80px--spacing-90
90px--spacing-100
100px--spacing-150
150pxBorder radius
cards20pxpills160pxinputs15pxbuttons10pxicon-blocks12pxSurfaces
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 2Soft Stone
Level 3Midnight Navy
Do's and don'ts
- Keep the palette to navy ink on white canvas; use Clinic Sky only for small secondary pill buttons.
- Set generous section padding (100–120px) to preserve the calm, uncluttered clinical feel.
- Use uppercase, letter-spaced micro-labels (12px) for eyebrow text like 'WHAT WE TREAT' or 'BOOK APPOINTMENT'.
- Darken hero photography with a navy overlay so white headline type stays legible.
- Round buttons and inputs with soft 10–20px radii; reserve full pill radius for secondary CTAs only.
- Pair warm, candid photography of real people with the cool navy/white system to keep it human.
- Use the rotating headline pattern (static lead-in + animated condition list) for hero messaging.
- Keep body copy at 500 weight for a confident, slightly heavier reading rhythm.
- Don't introduce additional saturated accent colors beyond Clinic Sky and the single alert red.
- Don't set body copy below 14px — the system favors legible, accessible sizing for a healthcare audience.
- Don't use sharp 0px corners; the brand consistently rounds buttons, cards, and inputs.
- Don't overlay busy patterns or textures on photography — a single flat navy scrim is the only treatment.
- Don't mix in serif or script typefaces; Instrument Sans carries the entire system.
- Don't crowd sections — maintain the spacious 80–150px rhythm between major blocks.
- Don't use alert red decoratively; it is reserved strictly for error/utility states.
Example prompts
Hero section
Services grid
Contact form
FAQ accordion
# 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