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.
Tech Tribe
Tech Tribe is a midnight-mode agency template that paints its near-black canvas with soft, diffused aurora gradients — bruised purples, tarnished golds, and steel blues that bleed across the page like distant nebulae. The brand voice is confident and forward-looking, but the surface treatment is restrained: a single near-white ink, a single near-black field, and one elevated charcoal for cards that quietly lift content out of the dark. Typography carries the entire personality. Oversized Montserrat display headlines in a light-to-regular weight stretch wide across the hero, paired with comfortable 18px body copy at 130% line-height. The accent moments — animated scroll text — borrow a magenta-to-violet gradient, but those are reserved flourishes against an otherwise monochrome system.
Colors
Canvas
Midnight Input
#1d1d1d
Form field fill. Background of text inputs and text areas in the dark form blocks.
Lifted Graphite
#121212
Elevated card surface. Used for testimonial cards, team cards, navigation tiles, and pricing slider frames.
Obsidian Canvas
#0e0e0e
Primary page canvas. The base black behind every section, hero gradient, and footer mask.
Gallery Charcoal
#181818
Secondary deep surface. Background for the template hero and other near-black panels needing slight separation.
Ink
Ash Divider
#282828
Hairline border. Outlines inputs and subtle dividers between dark surfaces.
Moonlit Bone
#eeeeee
Primary text & ink. Headlines, body copy, button fills, and the warm footer wash.
Accent
Blush Halo
#fbb1f7
Gradient peak highlight. The brightest pink wash that lights the center of animated text reveals.
Neon Orchid
#c958de
Mid gradient bloom. The luminous magenta core of the scrolling-text gradient and aurora highlights.
Honeyed Dusk
#f3c34d
Footer aurora warm tone. The amber bloom inside the radial gradient on the light footer panel.
Aurora Violet
#351073
Deep gradient anchor. The dark violet endpoint of scroll-text and ambient hero gradients.
Typography
The quick brown fox jumps
Single typeface for the entire site — display, headings, body, UI.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1348pxSection gap
80pxCard padding
32pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-140
140px--spacing-180
180pxBorder radius
pill96pxcards16pxinputs4pxbuttons8pxteam-cards18pxfooter-mask24pxmoving-cards24pxSurfaces
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 Canvas
Level 2Gallery Charcoal
Level 3Lifted Graphite
Level 4Midnight Input
Do's and don'ts
- Keep the canvas locked to Obsidian Canvas (#0e0e0e) and lift cards with Lifted Graphite (#121212) — never invert to a light page.
- Treat ambient gradients (violet, magenta, gold, blue) as atmospheric lighting behind headlines, not as solid fill colors.
- Set display headlines at 60–80px in Montserrat 400 with tight 1.1–1.2 line-height to match the wide, airy hero rhythm.
- Use Moonlit Bone (#eeeeee) buttons with Obsidian text for primary CTAs, and a 2px Moonlit Bone outline on transparent for ghost buttons.
- Wrap content in the 1348px main-container with 24px side padding, and pace sections with 80–180px vertical breathing room.
- Reserve the magenta-to-violet gradient strictly for animated scroll-text moments — never tint UI chrome with it.
- Round large media cards to 16–24px and team/feature tiles to 18px to keep silhouettes consistent.
- Don't introduce saturated brand colors into buttons, links, or text — the system is monochrome with atmospheric accents only.
- Don't use pure black (#000) or pure white (#fff) for surfaces or text; the palette is warmed off-black and off-white.
- Don't bold display headlines past 500 — Tech Tribe's character is light-to-regular Montserrat at large sizes.
- Don't stack multiple gradient backgrounds in one section; one ambient aurora per section keeps the mood cinematic.
- Don't crowd cards — every tile uses 28–40px internal padding and 24px gaps. Tighter spacing breaks the spacious cadence.
- Don't use drop shadows on the dark canvas to create elevation — rely on surface color shifts (Obsidian → Graphite) instead.
- Don't outline inputs with bright accent colors; keep borders at Ash Divider (#282828) and let focus shift the ink color.
Example prompts
Hero section
Feature card grid
CTA button pair
Animated scroll text
# 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