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.
Line Studio
Line Studio® builds its identity on scale contrast — a monumental condensed display face collides with a restrained, highly legible sans for body copy, all set against stark white canvases punctuated by pure black panels and a single electric indigo accent. The system reads as confident editorial-meets-agency: oversized cycling headlines, full-bleed photography with checkerboard-pattern fashion imagery, and isometric wireframe iconography give it a futurist, slightly surreal edge without sacrificing clarity. Structurally the template is unapologetically grid-driven and modular — black-and-white alternating service cards, a client logo marquee, and a looping footer CTA all reinforce rhythm and repetition. The indigo accent is used sparingly but decisively, almost always on buttons and small interactive flourishes, letting the monochrome photography and typography carry the emotional weight.
Colors
Canvas
Fog Panel
#f7f7f7
Lifted surface. Table headers, subtle card backgrounds, block headers.
Paper White
#ffffff
Primary canvas. Base background for nearly every section and card.
Hairline Gray
#d8dfe0
Divider & border. Thin separators between content blocks and form fields.
Ink
Ink Void
#0b0b0b
Deep footer & CTA backdrop. Near-black wrapper behind the rotating text CTA.
Mist Gray
#d9dae2
Secondary body text on dark surfaces. Footer copy, subdued captions.
Obsidian Ink
#000000
Primary text & dark surfaces. Headlines, body copy, footer and dark service-card backgrounds.
Accent
Deep Cobalt
#2018bf
Accent hover state. Darker indigo shown on button and link hover.
Electric Indigo
#2b20ff
Primary accent. CTA buttons, active states, highlighted UI chips.
Typography
The quick brown fox jumps
Body copy, navigation, buttons, form labels.
The quick brown fox jumps
Display headlines, hero titles, oversized section titles, rotating CTA text.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
150pxCard padding
40pxElement gap
25pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-80
80px--spacing-100
100px--spacing-150
150pxBorder radius
cards0pxpills9pxsmall2pxbuttons0pxicon-buttons0pxSurfaces
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 1Paper White
Level 2Fog Panel
Level 3Obsidian Ink
Level 4Ink Void
Do's and don'ts
- Use the condensed Coolvetica display face at extreme scale (70px and up) for hero and section headlines to create monumental visual weight.
- Keep all buttons and cards perfectly square-cornered — zero border-radius reinforces the architectural, grid-based feel.
- Reserve Electric Indigo exclusively for primary CTAs and interactive accents; let black-and-white photography carry the visual drama.
- Alternate black and white panels in grid layouts (services, work items) to build rhythm through value contrast rather than color.
- Pair oversized uppercase display type with small, uppercase eyebrow labels (12px, letter-spaced) to establish clear visual hierarchy.
- Use full-bleed, high-contrast fashion/tech photography with a cool, slightly surreal palette to match the futurist brand tone.
- Animate hero image compositions with scroll-driven parallax to add dimensionality to otherwise flat, minimal layouts.
- Don't introduce additional accent colors beyond Electric Indigo and its darker hover variant — the palette must stay monochrome plus one accent.
- Don't round corners on buttons, cards, or images; any softness breaks the sharp architectural language.
- Don't use light or thin font weights for headlines — the condensed display face must stay bold and dense for visual impact.
- Don't crowd the oversized hero typography with competing visual elements; let negative space do the work.
- Don't apply drop shadows decoratively outside of form fields and cart/modal overlays.
- Don't mix serif or script typefaces into the system; only Instrument Sans and Coolvetica Condensed are permitted.
- Don't shrink the display headline below a dominant, oversized scale — it should always command the top of the viewport.
Example prompts
Hero section
Service card grid
CTA footer
Stats section
# 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