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.
Positive Studio
Positive Studio is a creative agency template built around a single confident idea: warm putty paper meeting unapologetic black ink, punctuated by playful pill shapes and a single jolt of jade. The hero composition stacks a colossal condensed display face — Thunder, drawn at heroic 120–160px sizes — against humble, generously leaded Satoshi body copy, so every page reads as if a typographic poster were narrated by a calm voiceover. The rhythm is deliberate: full-width sections of bone-white canvas snap into deep ink panels with 60px rounded shoulders, marquees scroll in oversized caps, and tabs and CTAs hide inside long pill silhouettes. It feels like a contemporary studio monograph — graphic, slightly funky, never decorative for its own sake.
Sections from Positive Studio
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Awards Table with Centered Heading
View section
Footer with Big Logo, Socials, and Navigation
View section
Marquee Text Section
View section
Hero Animated Scroll Section
View section
Process with Sticky Left Column
View section
Dynamic Project Scroll Showcase
View section
Three Column Process Section
View section
Stats Section with Centered Text
View section
Client Logos with Heading
View section
Testimonial Tabs with Image & Text
View section
Values Section with Video Lightbox
View section
Scrolling Text & Lines Marquee
View section
Colors
Canvas
Bone Veil
#e9e4e14d
Translucent bone. Underline rails and dividers on dark panels.
Stone Lift
#d8d3d1
Lifted canvas. Slightly deeper putty for testimonial tiles, dropdowns, and elevated cards on light surfaces.
Bone Canvas
#e9e4e1
Primary canvas. Warm putty paper for default page surfaces and light mode body copy on dark.
Ink
Ink Veil
#1414144d
Translucent ink. Underline rails and 30% ink overlays beneath link fills.
Studio Ink
#141414
Primary ink. Headlines, body copy, dark sections, and pill button fills.
Graphite Lift
#252524
Lifted ink. Inner panels, tab content cards, and pill backgrounds inside dark sections.
Soft Parchment
#e2dedb
Footer text and dividers. Slightly muted off-bone for secondary links on dark panels.
Accent
Jade Pop
#3ec46d
Signature accent. Reserved for the hero pill, hexagon mark, and rare highlight shapes.
Mint Light
#c9f5d6
Accent highlight. Innermost hexagon and tertiary spot color in playful collages.
Jade Shadow
#0f5a2c
Accent shadow. Layered hexagon depth behind the primary jade pop.
Typography
The quick brown fox jumps
Body & UI. Paragraphs, subtitles, testimonials, navigation, and form text.
The quick brown fox jumps
Display & headlines. Used for every H1–H3, marquee text, CTA labels, and tabs.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
120pxCard padding
64pxElement gap
40pxSpacing scale
Purpose
Value
Preview
--spacing-8
8px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-48
48px--spacing-56
56px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-160
160pxBorder radius
cards32pxpills80pxsmall16pxcircle9999pxmedium24pxpanels60pxbuttons50pxSurfaces
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 2Stone Lift
Level 3Studio Ink
Level 4Graphite Lift
Do's and don'ts
- Set display headlines in Thunder at 120–160px with line-height 1.0 — let the condensed letterforms touch the rhythm of the page.
- Snap dark sections into the layout with a 60px top-left and top-right radius so ink panels feel like cards lifted from the bone canvas.
- Reserve Jade Pop strictly for the hero hexagon mark, the floating pill, and one or two micro-accents per page — never for body type.
- Use 120px top-and-bottom padding for standard sections and 160px for testimonial-heavy ones to maintain the spacious gallery feel.
- Wrap CTAs in 50px pill buttons with uppercase Thunder labels at 0.4px tracking and a fixed 52px height for consistent silhouettes.
- Set body text at 20px Satoshi with line-height 120%, and step subtitles up to 32px at weight 300 for editorial calm.
- Pair every rounded panel transition with an animated marquee or scroll-triggered fade-rise — motion is part of the brand voice.
- Don't substitute Thunder with a default condensed face — Webflow's fallback will visibly distort the hero rhythm. Load Thunder LC explicitly.
- Don't introduce additional saturated hues; the palette is bone, ink, and a single jade family. Reds and blues belong only to optional collage stickers, never to UI chrome.
- Don't square off cards or buttons. Every interactive surface in this system is either a 50px pill, a 24–32px rounded card, or a 60px section shoulder.
- Don't lower section padding below 80px (hero exception) — tight vertical rhythm collapses the studio-monograph feel.
- Don't use Thunder for body copy or Satoshi for display headlines. The contrast between condensed display and humanist body is the entire system.
- Don't place jade on dark sections without an ink shadow shape behind it; the hexagon mark relies on its three-tone depth to read.
- Don't underline links with solid rails — use the 2px translucent ink-veil rail with the animated fill so links feel hand-drawn.
Example prompts
Hero section
Dark testimonial panel
Pricing tile
Marquee band
# 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