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.
Tenet
Tenet runs on an almost clinical white canvas, then detonates it with holographic gradient orbs and iridescent 3D brand objects — faceted icosahedrons, diamonds, and turbine shapes rendered in pink, violet, teal, and amber. Typography does the heavy lifting of personality: punchy black Geist sans-serif headlines collide mid-sentence with an elegant italic serif, creating a rhythm of confident statement, then poetic aside. Structural color stays deliberately restrained — near-black ink, a soft paper-gray surface, and pure white — so the gradient spheres and chrome 3D props feel like premium studio lighting rather than noise. This is an agency-positioning system: it wants to look like the team that's already three trends ahead. Cards are low-radius and quiet, buttons are solid black pills, and every page closes on the same gradient-orb CTA, reinforcing a singular, confident visual signature across Home, Company, Work, Blog, and Contact.
Colors
Canvas
Faded Stone
#f7f7f7
Secondary surface. Used for alternating sections, pricing tables, and gray cards.
Paper White
#ffffff
Primary canvas. Base background for hero, sections, and card foregrounds.
Ink
Midnight Ink
#000000
Primary text & dark surface. Headlines, body copy, solid button fills, and dark panels.
Accent
Teal Glow
#35e0c6
Gradient coolness. Balances warm gradient tones in orbs, diamonds, and turbine shapes.
Powder Sky
#9adbff
Soft accent button. Default (non-dark) button background for secondary CTAs.
Coral Pulse
#ff4f8b
Gradient warmth. Appears in hero sphere and diamond icon gradients for energetic contrast.
Electric Indigo
#110fdf
Tech accent. Used sparingly in iconography, link hovers, and data-driven UI moments.
Ultraviolet Bloom
#b300ff
Signature gradient hue. Core color in the holographic orbs and 3D brand objects.
State — utility only
Signal Green
#1dd35a
Positive state. Reserved for success confirmations and growth-stat highlights.
Typography
The quick brown fox jumps
Primary UI and body typeface — headlines, navigation, buttons, paragraphs.
The quick brown fox jumps
Decorative italic accent — single words or clauses inside headlines (e.g. 'potential', 'us apart') for editorial contrast.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1200pxSection gap
120pxCard padding
28pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120pxBorder radius
pill30pxcards6pxsmall4pxcircle999pxbuttons6pxdropdown12pxSurfaces
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 2Faded Stone
Level 3Midnight Panel
Level 4Frosted Glass
Do's and don'ts
- Keep the base canvas pure white or faded-stone gray — let gradient orbs and 3D objects supply all the color drama.
- Pair every bold Geist headline with a single italic serif word or clause for the signature editorial contrast.
- Use solid black (#000000) pill buttons at 6px radius as the primary CTA across all pages.
- Reserve holographic gradients (indigo, violet, coral, teal) for decorative spheres, diamonds, and icon shapes — never for text.
- Maintain generous 120px section padding and a 1200px container to preserve the spacious, premium rhythm.
- Apply backdrop-blur frosted panels for nav dropdowns and floating badges to keep depth without heavy shadows.
- Close every page with the same gradient-orb CTA pattern ('Refresh your brand and get ready for what's next') for brand consistency.
- Don't introduce additional saturated brand colors beyond the indigo/violet/coral/teal gradient family.
- Don't set body copy or headlines in the italic serif — it is strictly a decorative accent, never a primary reading font.
- Don't use heavy drop shadows on cards; keep elevation subtle and rely on the gray/white contrast instead.
- Don't crowd sections — this system depends on open whitespace around gradient art to feel premium, not noisy.
- Don't round buttons or cards beyond 6–12px; the system avoids soft pill-card forms except for tags and the pricing CTA pills.
- Don't place the 3D brand objects (icosahedron, diamond, turbine) as plain flat icons — always render with gradient, chrome-like shading.
- Don't use pure black backgrounds broadly; reserve midnight-ink surfaces for isolated testimonial/stat cards only.
Example prompts
New hero section
Service card grid
Closing CTA band
Stat block
# 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