Design systems, extracted.
Search curated design systems pulled from premium templates or create one from URL. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Powerful Studio
Powerful Studio is a confident, gallery-grade agency system built around two surfaces — a warm bone-white canvas and a deep charcoal void — connected by oversized Satoshi typography and rounded photographic vignettes. The aesthetic feels like a contemporary design publication: generous whitespace, circular image crops marching across the viewport, and abstract line-art motifs running diagonally behind dark sections. The palette is intentionally restrained — two near-monochrome tones plus their elevated siblings — letting bold display headlines, kinetic marquee strips, and rounded image discs do the talking. Buttons are squared-off pills, cards lean on subtle elevation, and every section breathes at 100–140px of vertical padding.
Sections from Powerful Studio
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Tabs
View section
Contact with Form
View section
FAQ
View section
Tiles
View section
Slider Combo
View section
Tiles Grid
View section
Hero About Section
View section
Process
View section
Navbar
View section
Process
View section
Combo Video Text
View section
Services List
View section
Colors
Canvas
Soft Stone
#d3d3cb
Elevated light surface. Card fills, tab tracks, contact form tile, and dropdown menus on the bone canvas.
Bone Canvas
#ddddd5
Primary canvas. Warm off-white background for light sections, body text on dark surfaces, and footer link color.
Ink
Muted Ink
#18181899
Muted dark text. Faded big-text passages and form placeholders on light surfaces.
Muted Bone
#ddddd599
Muted light text. Faded body copy, legal text, and process numerals on dark backgrounds.
Studio Ink
#181818
Primary ink & dark surface. Headlines on light, dark section backgrounds, primary button fills, and form underlines.
Hairline Ink
#18181814
Hairline divider on light. Navbar bottom border and subtle separations on the bone canvas.
Hairline Bone
#ddddd533
Hairline divider on dark. Borders between footer columns and faded process numerals.
Shadow Graphite
#222221
Elevated dark surface. Stat tiles and card fills inside dark sections to create quiet depth without breaking the monochrome.
Typography
The quick brown fox jumps
All typography — display headlines, body copy, navigation, buttons, and form labels.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
120pxCard padding
64pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-140
140pxBorder radius
tabs80pxcards12pxsmall4pxcircle9999pxbuttons4pxtab-track90pxSurfaces
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 1Bone Canvas
Level 1Studio Ink
Level 2Soft Stone
Level 2Shadow Graphite
Do's and don'ts
- Pair Studio Ink (#181818) with Bone Canvas (#ddddd5) at near-equal weight — alternate light and dark sections to create rhythm across the page.
- Crop hero imagery into perfect circles that march horizontally across the viewport using vw-based sizing (24vw, 17vw, 13vw) for a kinetic strip.
- Use Satoshi at 96–120px for display headlines, with weight 500–700, line-height 1.0, and slight negative tracking to keep the type tight.
- Wrap elevated content in 12px-radius tiles filled with Soft Stone (light) or Shadow Graphite (dark), padded at 64px for breathing room.
- Apply pill-shaped 80px radius tabs on a 90px-radius track filled with Soft Stone — the active tab inverts to Studio Ink with bone text.
- Set section padding to 100–140px vertical to maintain the gallery-grade pacing the template depends on.
- Layer faint diagonal SVG line-art (abstractleft/right) behind dark sections to add quiet motion without color.
- Use 4px-radius rectangles for all CTA buttons at exactly 52px tall — the corner softness should be barely perceptible.
- Don't introduce saturated brand accents — the entire palette lives between bone and ink, with elevation as the only chromatic move.
- Don't drop shadows under cards or buttons — depth here comes from elevation tokens (Soft Stone / Shadow Graphite) and translateY lifts on hover.
- Don't use Satoshi below weight 300 or mix in another typeface — the system is single-family by design.
- Don't square-crop hero portraits; circles are foundational to the visual language and must remain on every photographic strip.
- Don't mix radius scales on the same surface — buttons stay at 4px, cards at 12px, pills at 80px+. Never blur the boundaries.
- Don't reduce section padding below 80px — the spacious vertical rhythm is what makes the layout feel editorial.
- Don't place body copy directly on photographic backgrounds without the testimonial-tile treatment — readability suffers fast.
- Don't tint elevated surfaces toward gray — Soft Stone is warmer than Bone Canvas; preserve that subtle warm shift.
Example prompts
New hero section
Dark testimonial block
Pricing tile trio
Footer
# 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