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.
Structa©
Structa© is a design system built for studios that treat presentation as an extension of the work itself. Warm taupe and umber neutrals ground the palette while crisp off-white canvases and stark white type let full-bleed architectural photography — coastal villas, arched interiors, sun-drenched facades — carry the emotional weight of every page. Typography leans on a confident grotesque for structure and a slender didone serif for editorial accents, producing a tone that is equal parts gallery catalogue and professional dossier. The system favors pill-shaped buttons, generous whitespace, and a sticky horizontal-scroll hero that behaves like a slow architectural walkthrough. A deep bark-brown footer closes every page with an oversized wordmark, acting as a firm, confident signature — deliberate, grounded, and unmistakably built for people who shape the built world.
Colors
Canvas
Bark Brown
#544e43
Footer depth surface. Subscribe field fill and footer input backgrounds.
Pure White
#ffffff
Lifted surface & reversed text. Cards, form fields, text over imagery.
Stone Divider
#d8dfe0
Hairline separator. Section dividers and subtle rule lines.
Off-White Linen
#ecebe9
Primary page canvas. Backs hero captions, body sections, and light surfaces.
Ink
Ink Black
#000000
Primary ink & dark surface. Headlines, nav icon circles, dark button fills.
Accent
Cobalt Signal
#4361ee
Rare electric accent. Subscribe field text, interactive highlight moments.
Weathered Taupe
#5c5448
Signature brand accent. Buttons, footer background, structural dividers.
State — utility only
Caution Amber
#3898ec
Form focus state. Input borders and interactive focus rings.
Typography
The quick brown fox jumps
Editorial accent typeface — reserved for occasional expressive titles
The quick brown fox jumps
Primary UI & body typeface — navigation, headings, paragraphs, buttons
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1240pxSection gap
100pxCard padding
35pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-10
10px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-30
30px--spacing-50
50px--spacing-60
60px--spacing-100
100px--spacing-150
150pxBorder radius
badge7pxcards7pxinputs30pxbuttons50pxtextarea15pxicon-circle9999pxSurfaces
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 1Linen Canvas
Level 2Pure White Card
Level 3Taupe Depth
Level 4Bark Footer
Do's and don'ts
- Use full-bleed architectural photography and video as the dominant visual language on hero and section breaks.
- Apply 50px pill radius to all primary buttons for a soft, confident call-to-action shape.
- Pair the Weathered Taupe accent with Ink Black text for maximum legibility on light canvases.
- Reserve the Antic Didone serif for rare, expressive moments — never body copy.
- Close every page with the oversized 'Structa©' wordmark footer treatment for brand consistency.
- Keep section padding generous (100px vertical) to let imagery and whitespace breathe.
- Use rounded 30px input fields with hairline borders for all form elements.
- Don't introduce saturated colors beyond the occasional Cobalt Signal accent — keep the palette earthy and restrained.
- Don't crop architectural photography tightly; let wide establishing shots dominate.
- Don't use sharp, squared-off buttons — the pill shape is a signature brand trait.
- Don't stack more than one serif display moment per page — it dilutes the editorial effect.
- Don't place body text directly on busy photography without a scrim or overlay.
- Don't reduce section padding below 60px on desktop — spaciousness is core to the mood.
- Don't mix additional footer colors — the Bark Brown depth tone must remain singular and consistent.
Example prompts
Hero section
Services grid
Footer signature
Testimonial 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