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.
GoSmart
GoSmart is a deep-violet fintech aesthetic built on near-black canvases lit by electric purple gradients and soft neon glows. The mood is confident and futuristic — premium without being cold — with pill-shaped CTAs, generously rounded elevation tiles, and gradient numerals that read like illuminated signage on a midnight skyline. The system runs entirely on Satoshi, leaning into airy 130% line heights, oversized display headlines, and accent-light lavender used sparingly for emphasis. Surfaces stack from a true near-black canvas to a slightly lifted indigo-black, framed by thin violet borders so cards feel laser-cut rather than heavy.
Sections from Go Smart
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Call to Action with Cards
View section
Hero with Mockup and Stats
View section
Logos Marquee Loop with Divider
View section
Combo Section with Checkmarks
View section
Pricing Comparison Table
View section
FAQ Tabs Section
View section
Footer with Logo, Contact and Links
View section
Full-Width Multi-Image Hero Gallery
View section
Tabbed Pricing Plans Section
View section
Image & Features Section
View section
Centered Hero Section with Mockup
View section
Bento Feature Grid Layout
View section
Colors
Canvas
Indigo Mist
#0e091d
Lifted surface. Cards, tiles, dropdowns, and CTA sections sit one step above the canvas.
Obsidian Night
#080411
Primary canvas. Page background, footer, and section backgrounds — the deepest shade in the system.
Twilight Bloom
#140d29
Hover surface. Tile and link hover state — a subtle warming above elevation.
Ink
Fade Paper
#ffffffcc
Muted ink. Secondary copy and faded body-big text against dark surfaces.
Moonlit Paper
#ffffff
Primary text & ink. Headlines, body copy, outline button strokes, and form field text.
Accent
Violet Wire
#311f5d
Border tone. Hairline outlines on tiles, cart, dropdowns, footer divider, and tab menu.
Electric Iris
#8351f1
Brand accent. Gradient buttons, active tabs, info-tag pills, and gradient number fills.
Lavender Haze
#c9b0ff
Soft accent. Eyebrow text, current dropdown links, cart pill background, and tile link color.
Typography
The quick brown fox jumps
Single typeface for the entire system — display, headings, body, UI, and forms.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
70pxCard padding
40pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--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
140px--spacing-160
160pxBorder radius
tag80pxpill70pxtabs90pxtiles24pxavatar9999pxdropdown12pxSurfaces
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 1Obsidian Night
Level 2Indigo Mist
Level 3Twilight Bloom
Do's and don'ts
- Anchor every page in Obsidian Night and lift only cards, dropdowns, and CTA sections to Indigo Mist for a clean two-tier depth model.
- Apply 70px border-radius to every primary, ghost, and nav CTA so the entire system reads as pill-shaped — never use rectangular buttons.
- Use the Electric Iris → Lavender gradient (74deg, #8351f1 → #9a6dff → #9b76ec) exclusively on the highest-priority CTA per section.
- Render large stat numbers with the Lavender → Iris → White gradient text-fill at 90px or 160px for hero impact moments.
- Pair every elevation tile with a 1px Violet Wire border and 24px radius — the hairline is what makes the depth feel premium.
- Reserve Lavender Haze for eyebrow uppercase top-text, current-page dropdown links, and small accent details — never run paragraphs in it.
- Layer subtle neon glow webp backgrounds behind hero, CTA, and pricing sections to extend the brand's signature purple aura.
- Don't introduce additional saturated hues (greens, oranges, blues) — the system is monochromatic violet on black and breaks the moment another accent appears.
- Don't use pure black (#000000) as a canvas; the warm-violet undertone of Obsidian Night (#080411) is what differentiates GoSmart from generic dark mode.
- Don't apply the gradient fill to body copy or small labels — it is reserved for hero CTAs and oversized stat numerals only.
- Don't put borders heavier than 1px on tiles or dropdowns; the laser-thin Violet Wire stroke is intentional.
- Don't drop below 24px tile radius or break the pill geometry on CTAs — corner consistency is core to the brand.
- Don't tighten section padding below 70px top/bottom; this template breathes and crowding it kills the cinematic feel.
- Don't mix typefaces — Satoshi covers the entire range from 15px UI to 160px mega-numbers.
Example prompts
Landing hero
Pricing card
Stats row
Auth form
# 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