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.
Baseframe™
Baseframe™ is a premium consultancy template built for advisory firms and service-driven businesses that prize hierarchy over decoration. Its dual-mode palette — a warm off-white parchment for light sections and a deep charcoal-brown for dark hero and CTA zones — creates a deliberate rhythm of calm and authority across every page. IBM Plex Serif anchors headings with editorial gravitas, while IBM Plex Sans carries body copy with clean neutrality and IBM Plex Mono stamps uppercase labels with precision. A single accent — Sun Yellow — punctuates calls-to-action and section markers without ever becoming decorative noise. Every layout decision reinforces the brand's core message: complexity made legible. Generous section padding, a restrained bento-grid of service cards, and smooth translate-Y entrance animations ensure that ideas land with weight rather than spectacle. The template is built to hold up over time — structured enough to scale, calm enough to trust.
Sections from Baseframe
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Hero Section with Background Image
View section
Multi-Column Newsletter Footer
View section
Bento Grid Layout
View section
Services Overview Grid Layout
View section
Services Bento Grid Layout
View section
Multi Level Navigation Menu
View section
Hero Grid with Stats
View section
Newsletter Signup with Social Proof
View section
Philosophy Section with Chat Interface
View section
About Section with Video Lightbox
View section
Vision Statement with Video Background
View section
Contact Form with Testimonials
View section
Colors
Canvas
Deep Ember
#3e3a35
Second-level dark lift. Icon backgrounds and card-detail surfaces on dark sections.
Warm Linen
#f6f3f0
Page canvas base. The lightest background value used beneath content sections.
Shadow Bark
#33302b
Dark card lift surface. Inverted contact cards and dark bento tiles.
Lifted Stone
#e6e0d6
Lifted card surface & section backgrounds. Used for card fills, nav container, and stats gradient endpoint.
Pressed Sand
#dbd4c9
Second-tier lift surface. Deeper card backgrounds and tab-menu fills.
Parchment White
#eee9e1
Primary light surface & ink-on-dark. Base page background, footer text, inverted button labels.
Ink
Charcoal Earth
#27241f
Primary dark surface & ink. Hero sections, footer fills, primary button backgrounds, body text.
Accent
Sun Yellow
#fed007
Brand accent. Accent buttons, section-marker dots, logo fill on dark, rated-badge background.
State — utility only
Moss Success
#4eab52
Success state. Form success indicators and confirmation messages.
Terracotta Error
#a63f3a
Error state. Form validation borders and error messaging only.
Typography
The quick brown fox jumps
Labels, tags, and metadata. Always uppercase with wide letter-spacing for categorical precision.
The quick brown fox jumps
Body copy and buttons. Neutral, legible, and scales cleanly from captions to large text.
The quick brown fox jumps
All headings h0–h6. Conveys editorial authority and long-form clarity.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
32pxElement gap
24pxSpacing 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-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160px--spacing-200
200pxBorder radius
tags16pxcards16pxsmall8pxinputs8pxbuttons16pxfull-pill9999pxcards-large24pxbuttons-circle24pxSurfaces
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 1Warm Linen
Level 2Lifted Stone
Level 3Pressed Sand
Level 4Charcoal Earth
Level 5Shadow Bark
Level 6Deep Ember
Do's and don'ts
- Apply IBM Plex Serif at weight 400 for all headings — the template's editorial voice depends entirely on its regular-weight serif, never bold.
- Use the Sun Yellow (#fed007) accent exclusively for calls-to-action, section-marker dots, and the logo mark; it should appear sparingly so it retains its signal value.
- Apply a 16px border-radius to all standard buttons and cards; use the 9999px full-pill radius only for tab-switcher menus and badge elements.
- Reserve Charcoal Earth (#27241f) sections for high-stakes moments — hero panels, footer, and CTA blocks — to preserve the contrast rhythm between dark and light zones.
- Use IBM Plex Mono in uppercase with 0.75px letter-spacing exclusively for labels, tags, and metadata categories to maintain the precision hierarchy.
- Maintain section padding at 80px minimum and scale up to 200px for feature heroes to honor the template's deliberately spacious breathing room.
- Use translate-Y entrance animations (50px to 0, opacity 0 to 1) consistently on all above-the-fold text and card groups for a unified reveal language.
- Do not introduce saturated colors outside of Sun Yellow — the entire palette is desaturated warm neutrals, and any vivid hue will break the editorial calm.
- Do not use IBM Plex Serif for body copy or UI labels; its role is strictly editorial display and heading hierarchy.
- Do not apply drop shadows liberally — the single approved shadow is intentionally minimal; adding card shadows would undermine the flat, surface-based depth model.
- Do not bold headings; the template intentionally uses weight 400 for all serif headings to project authority through scale and tracking rather than weight.
- Do not mix the warm linen light palette (#f6f3f0) with a pure white (#ffffff) — the warmth of the canvas is part of the brand identity and must stay consistent.
- Do not reduce section padding below 32px between major content blocks; the spacious rhythm is core to the calm authority aesthetic.
- Do not use the accent yellow as a text color on light backgrounds — contrast ratios are insufficient and it is reserved strictly for filled surfaces and markers.
Example prompts
Hero section
Service card grid
Stats section
Dark CTA 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