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.
Twin Studio
Twin runs on a deep near-black foundation that erupts with neon purple, hot pink, and electric green — a palette built for studios that treat the homepage like a festival poster rather than a brochure. Oversized condensed display type (Coolvetica Crammed) collides with tight, uppercase Inter Tight body copy, while pill-shaped navigation, glassy blurred nav bars, and marquee text-rotators keep every scroll kinetic. This is a template that rejects whitespace-first minimalism in favor of saturated color blocking, 3D-tilted hero type, and portrait collage grids — confident, loud, and unapologetically maximalist.
Colors
Canvas
Void Black
#0b0b0b
Primary dark canvas
Charcoal Lift
#171717
Lifted form & input surface. Text fields, radio wrappers, dropdowns.
Deep Graphite
#181818
Secondary dark surface. Expertise and inverted content sections.
Ink
Paper White
#ffffff
Primary text & light surfaces. Used for headings, nav pills, and inverted sections.
Accent
Hot Magenta
#ff1f8f
Decorative gradient hue. Portfolio card backgrounds and gradient overlays.
Blush Signal
#ffcdd9
Secondary accent text. Rotator headlines and oversized hero titles.
Electric Violet
#883eff
Brand accent & primary button fill. Hero backgrounds, CTAs, team card fills.
Radioactive Green
#2c6e31
Secondary decorative hue. Portfolio card backgrounds and contrast blocks.
State — utility only
Focus Blue
#3898ec
Form focus state. Radio input focus rings and borders.
Typography
The quick brown fox jumps
Body copy, nav links, form fields — all uppercase, compact tracking.
The quick brown fox jumps
Display headlines, oversized hero type, rotator text, expertise titles.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1920pxSection gap
120pxCard padding
50pxElement gap
30pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-70
70px--spacing-100
100px--spacing-120
120px--spacing-150
150pxBorder radius
cards40pxsmall6pxbadges7pxinputs6pxbuttons30pxnav-pill30pxSurfaces
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 1Void Black
Level 2Charcoal Lift
Level 3Deep Graphite
Level 4Electric Violet
Do's and don'ts
- Use Coolvetica Crammed at extreme sizes (14vw+) for hero titles to create the signature oversized collision effect.
- Keep all body text, nav links, and buttons in uppercase per the global body style.
- Apply the 30px pill radius consistently to buttons and nav containers for a soft-edge contrast against sharp type.
- Layer saturated accent blocks (violet, magenta, green) directly against the near-black canvas rather than muting them.
- Use the blurred glass nav-menu pill floating over hero imagery to maintain the sticky, festival-poster navigation feel.
- Pair mix-blend-mode difference on oversized footer titles so they remain legible over colored backgrounds.
- Keep the scrolling 'Work with us · Let's Chat' marquee as the closing CTA on every page for rhythmic consistency.
- Don't introduce muted pastels or desaturated neutrals that dilute the neon-on-black contrast.
- Don't set hero or display type in sentence case — the uppercase, condensed treatment is structural to the brand.
- Don't shrink the oversized type scale down to conventional web sizes; the drama depends on extreme scale jumps.
- Don't add soft drop shadows to text or buttons beyond the subtle input shadow — the aesthetic stays flat and graphic.
- Don't replace the pill-shaped nav and button radii with sharp corners.
- Don't crowd sections with dense copy blocks; this template relies on spacious, image-led grids.
- Don't use serif or rounded display fonts — Coolvetica Crammed's condensed edge is non-negotiable for headlines.
Example prompts
Hero section
Portfolio card
Contact form
Footer CTA
# 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