Dark product-led design system

Build better sites, faster

A compact Framer-inspired catalog with electric blue actions, tight Geist typography, thin white-alpha borders, and product UI modules that feel ready to publish.

Start for free Start with AI View templates

Publish 100%

18Colors

11Type levels

13Components

47Tokens

01 / Colors

Black, white, blue, product chrome.

The palette is dark-first: black canvas, white typography, Framer Blue action, and white-alpha structural edges.

primary#0099ff

Electric action blue for CTAs, links, focus, and active UI.

accent#8555ff

Secondary product accent for AI and advanced surfaces.

canvas#000000

The default page environment and premium dark base.

ink#ffffff

Hero headlines, prices, labels, and high-contrast copy.

surface#191919

Pricing cards, forms, utility panels, and tables.

surfaceAlt#242424

Raised screenshot frames and stacked product panels.

editor-panel#1f1f1f

Inspector panels, command bars, and app-native chrome.

success#24d164

Small check states, live status, and hosting success.

warning#ffcd36

Compact usage warnings and demo indicators.

error#ff4d4d

Destructive and invalid states, used sparingly.

02 / Typography

Tight Geist geometry.

Headings get sharper as they grow. Body copy stays compact, readable, and product-native.

Display launch type

display - 96px / 600 / 1.0 / -0.02em / Geist

Hero headline

hero - 72px / 600 / 1.0 / -0.02em / Geist

Section headline

headline-lg - 56px / 600 / 1.05 / -0.02em / Geist

Feature card lead

title-lg - 32px / 600 / 1.25 / -1px / Geist

Plan and module title

title-md - 24px / 600 / 1.25 / -0.5px / Geist

FAQ and small title

title-sm - 18px / 600 / 1.3 / -0.01em / Geist

Body copy is 15px, soft white, and set with enough line-height to breathe on black.

body - 15px / 500 / 1.6 / -0.01em / Inter

Navigation label

label - 13px / 500 / 1.0 / -0.01em / Inter

Caption and compact metadata

caption - 12px / 500 / 1.25 / 0em / Inter

03 / Buttons

Compact pill actions.

Every action is short, rounded, and app-like, with blue reserved for the primary path.

button-primary

button-primary-active

button-secondary

button-ghost

button-dark-outline

button-icon

04 / Cards & Surfaces

Panels that feel like the editor.

Cards are dark, bordered, compact, and useful. The visual weight comes from authentic product surfaces.

Design freely

Explore like a design canvas, then move the work directly into a publishable page.

Learn more

Website preview

A raised screenshot surface uses shadow only when the product itself needs to float.

Preview

Launch faster

Framer Blue is allowed to dominate when a card is an action, not a passive surface.

Publish

Inspector panel

Thin dividers, dark controls, and 10px gaps make feature cards feel app-native.

Open panel

Template tile

Resource cards show concrete website previews instead of abstract decoration.

View Template

CMS ready

Structured content modules use table rhythm, alpha borders, and restrained check states.

Browse CMS

05 / Brand-Specific Product Patterns

Framer product grammar.

These mini mockups are the identity: editor chrome, CMS rows, analytics, pricing limits, command bars, and marketplace tiles.

Editor canvas

CMS collection

SlugStatusSEO

/launchLive98%

/pricingDraft82%

/blogQueued91%

Analytics module

Pricing comparison

FeatureBasicProScale

Pages30150300

CMS items1k2.5k10k

Editors$20$40$40

Community resources

Template

Plugin

Component

Workshop

Command bar

Publish siteEnter

Generate page with AICmd G

Open CMSCmd K

Invite editor+

06 / Forms

Dark fields, blue focus.

Forms stay sparse and compact, closer to Framer settings panels than marketing lead forms.

07 / Spacing

Small controls, big sections.

The system runs on compact 5/10/15/20px internals, then opens to 40px and 120px for composition.

xs

5px

sm

10px

md

15px

lg

20px

xl

40px

section

120px

08 / Radius

Rounded, not bubbly.

Cards stay at 10-16px. Pills are reserved for buttons, nav shells, avatars, and status controls.

sm 5px

Small controls

md 8px

Tiles and tool items

lg 10px

Cards and fields

xl 16px

Hero stages

pill 9999px

Actions and nav

09 / Elevation

Depth from black-on-black layers.

Most depth is border and surface contrast. Shadows appear when screenshots or product modules need to float.

Flat panel

Depth from surface and border only.

none + border

UI panel

Small editor chrome elevation.

0 2px 4px rgba(...)

Screenshot card

Raised website or plugin preview.

0 10px 20px rgba(...)

Hero stage

Deep dark product showcase.

0 25px 50px rgba(...)

10 / Extracted Component Tokens

CSS custom properties.

A compact token block for recreating the preview's visual logic in another surface.

:root {
  --brand-primary: #0099ff;
  --brand-accent: #8555ff;
  --brand-ink: #ffffff;
  --brand-body: #ffffff99;
  --brand-muted: #999999;
  --brand-canvas: #000000;
  --brand-surface: #191919;
  --brand-surface-alt: #242424;
  --brand-border: #ffffff1a;
  --brand-border-strong: #ffffff26;
  --brand-success: #24d164;
  --brand-warning: #ffcd36;
  --brand-error: #ff4d4d;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 40px;
  --space-section: 120px;
  --shadow-stage: 0 25px 50px rgba(0,0,0,.25), 0 5px 25px rgba(0,0,0,.5);
}