Design system
web
v1.0.0
90/100

Framer

@dante · Design & Creative

Cinematic dark canvas inspired by Framer's marketing site. Pure black void, Framer Blue accents, GT Walsheim display with extreme negative tracking, and pill-shaped interactive elements.

HTML/CSS
React
shadcn/ui
Tailwind
#creative
#display
#marketing
#motion
Framer
Downloads4
Download package
DESIGN.mdSKILL.md

Overview

Framer-Inspired Design System

Atmosphere

Framer's marketing surface is a cinematic, tool-obsessed dark canvas. The void (#000000) is sacred — it is the primary background everywhere. Surfaces sit on the void and use Framer Blue rings, frosted translucency, or near-black elevation to separate from it. Every element should feel like it's floating in deep space with intent.

Color

  • Background: Pure #000000 only. Never warm grays, never charcoal.
  • Text: White for emphasis, #a6a6a6 for body, rgba(255,255,255,0.6) for tertiary.
  • Accent: Framer Blue #0099ff — reserved exclusively for interactive elements (links, focus rings, ring shadows, single-plan highlight). Never use blue for decorative fills or non-interactive text.
  • Surfaces on dark: rgba(255,255,255,0.1) for frosted, #090909 for elevated, rgba(0,153,255,0.15) 0 0 0 1px for the signature blue ring.

Typography

  • Display: GT Walsheim Medium (500) only — never bold, never regular. Apply extreme negative letter-spacing scaled to ~-5% of font size (e.g. -5.5px at 110px, -4.4px at 88px). Line-height stays tight at 0.85–1.0.
  • Body & UI: Inter Variable with extensive OpenType (cv01, cv05, cv09, cv11, ss03, ss07). Tracking is slightly negative (-0.01px to -0.8px depending on size).
  • Micro: Open Runde 9px 600 uppercase for badges, Azeret Mono for code/technical labels.
  • Compression as personality: headlines should feel spring-loaded, almost breathless. Resist any urge to loosen tracking.

Components

  • All interactive elements are pill-shaped (40px+ radius). Buttons, nav, badges. Squared corners on a CTA immediately break the aesthetic.
  • Cards use the Framer Blue ring (rgba(0,153,255,0.15) 0 0 0 1px) for containment with optional inner white edge highlight rgba(255,255,255,0.06) 0 0.5px 0 0.5px inset.
  • Frosted glass = simple rgba(255,255,255,0.1) rgba — not heavy backdrop-filter blur.
  • Animations use scale (0.97 on press) and opacity, not color shifts.

Layout

  • 8px base grid. Sections breathe at 80–120px vertical padding; mobile compresses to 60px.
  • Asymmetric 40/60 feature blocks (text 2fr / shot 3fr) are the workhorse pattern.
  • Max width ~1200px, centered. Hero left-aligned with negative-tracked display.
  • Whitespace philosophy: dense within components, generous void around them.

Do / Don't

  • Do let product UI screenshots be the hero art.
  • Do keep one primary CTA per view — solid white pill on void.
  • Don't add a second accent color. Don't use serif or display weights other than Walsheim 500. Don't use heavy drop shadows; depth comes from rings and minimal ambients.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (10)

void_black
#000000
pure_white
#ffffff
framer_blue
#0099ff
muted_silver
#a6a6a6
near_black
#090909
frosted_white
rgba(255, 255, 255, 0.1)
subtle_white
rgba(255, 255, 255, 0.5)
ghost_white
rgba(255, 255, 255, 0.6)
blue_glow
rgba(0, 153, 255, 0.15)
default_link_blue
#0000ee

Typography (5)

display
'GT Walsheim', 'GT Walsheim Framer Medium', Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
body
'Inter Variable', Inter, -apple-system, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
accent
'Mona Sans', Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
mono
'Azeret Mono', ui-monospace, 'SF Mono', Menlo, monospace
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
rounded
'Open Runde', Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234

Components (14)

Button

Pill-shaped button. Solid white primary on dark, frosted glass secondary, ghost tertiary.

html
Hand-tuned CSS, no framework
1 props · 5 states · 7 tags · 2 sources
Missing states: loading

Input

Dark-themed input with Framer Blue focus ring.

html
Hand-tuned CSS, no framework
1 props · 4 states · 2 tags · 2 sources
Missing states: focus-visible, error

Card

Near-black surface with Framer Blue ring border and subtle elevation.

html
Hand-tuned CSS, no framework
0 props · 2 states · 4 tags · 2 sources
Missing states: focus-visible, disabled

Badge

Tiny uppercase pill badge for status or section eyebrows.

html
Hand-tuned CSS, no framework
1 props · 1 states · 4 tags · 2 sources
Missing states: hover, focus-visible, disabled

Heading

Display heading with extreme negative letter-spacing — the signature Framer move.

html
Hand-tuned CSS, no framework
1 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled

Link

Inline link in Framer Blue with underline-on-hover.

html
Hand-tuned CSS, no framework
0 props · 4 states · 2 tags · 2 sources
Missing states: disabled

Hero

Full-width hero on pure black with compressed display heading and pill CTAs.

html
Hand-tuned CSS, no framework
0 props · 1 states · 2 tags · 2 sources
Missing states: hover, focus-visible, disabled

Nav

Sticky dark navigation bar with frosted CTA pill.

html
Hand-tuned CSS, no framework
0 props · 2 states · 2 tags · 2 sources
Missing states: hover, focus-visible, disabled

Footer

Dark footer with column links and muted silver text.

html
Hand-tuned CSS, no framework
0 props · 1 states · 2 tags · 2 sources
Missing states: hover, focus-visible, disabled

Stat

Large numeric stat with label, used in social-proof rows.

html
Hand-tuned CSS, no framework
0 props · 1 states · 2 tags · 2 sources
Missing states: hover, focus-visible, disabled

AnimatedHeadline

Compressed display headline with an inline rotating word — Framer's motion-aware signature.

html
Hand-tuned CSS, no framework
0 props · 2 states · 3 tags · 2 sources
Missing states: hover, focus-visible, disabled

FeatureBlock

Asymmetric 40/60 feature block — text left, screenshot mock right.

html
Hand-tuned CSS, no framework
0 props · 1 states · 3 tags · 2 sources
Missing states: hover, focus-visible, disabled

PriceCard

Pricing card with Framer Blue ring on the highlighted plan.

html
Hand-tuned CSS, no framework
1 props · 2 states · 4 tags · 2 sources
Missing states: focus-visible, disabled

Testimonial

Quote card with muted silver attribution and a subtle blue ring.

html
Hand-tuned CSS, no framework
0 props · 1 states · 2 tags · 2 sources
Missing states: hover, focus-visible, disabled

DESIGN.md

Framer-Inspired Design System

Atmosphere

Framer's marketing surface is a cinematic, tool-obsessed dark canvas. The void (#000000) is sacred — it is the primary background everywhere. Surfaces sit on the void and use Framer Blue rings, frosted translucency, or near-black elevation to separate from it. Every element should feel like it's floating in deep space with intent.

Color

  • Background: Pure #000000 only. Never warm grays, never charcoal.
  • Text: White for emphasis, #a6a6a6 for body, rgba(255,255,255,0.6) for tertiary.
  • Accent: Framer Blue #0099ff — reserved exclusively for interactive elements (links, focus rings, ring shadows, single-plan highlight). Never use blue for decorative fills or non-interactive text.
  • Surfaces on dark: rgba(255,255,255,0.1) for frosted, #090909 for elevated, rgba(0,153,255,0.15) 0 0 0 1px for the signature blue ring.

Typography

  • Display: GT Walsheim Medium (500) only — never bold, never regular. Apply extreme negative letter-spacing scaled to ~-5% of font size (e.g. -5.5px at 110px, -4.4px at 88px). Line-height stays tight at 0.85–1.0.
  • Body & UI: Inter Variable with extensive OpenType (cv01, cv05, cv09, cv11, ss03, ss07). Tracking is slightly negative (-0.01px to -0.8px depending on size).
  • Micro: Open Runde 9px 600 uppercase for badges, Azeret Mono for code/technical labels.
  • Compression as personality: headlines should feel spring-loaded, almost breathless. Resist any urge to loosen tracking.

Components

  • All interactive elements are pill-shaped (40px+ radius). Buttons, nav, badges. Squared corners on a CTA immediately break the aesthetic.
  • Cards use the Framer Blue ring (rgba(0,153,255,0.15) 0 0 0 1px) for containment with optional inner white edge highlight rgba(255,255,255,0.06) 0 0.5px 0 0.5px inset.
  • Frosted glass = simple rgba(255,255,255,0.1) rgba — not heavy backdrop-filter blur.
  • Animations use scale (0.97 on press) and opacity, not color shifts.

Layout

  • 8px base grid. Sections breathe at 80–120px vertical padding; mobile compresses to 60px.
  • Asymmetric 40/60 feature blocks (text 2fr / shot 3fr) are the workhorse pattern.
  • Max width ~1200px, centered. Hero left-aligned with negative-tracked display.
  • Whitespace philosophy: dense within components, generous void around them.

Do / Don't

  • Do let product UI screenshots be the hero art.
  • Do keep one primary CTA per view — solid white pill on void.
  • Don't add a second accent color. Don't use serif or display weights other than Walsheim 500. Don't use heavy drop shadows; depth comes from rings and minimal ambients.

Adapters (6)

  • adapters/tokens.css

    text/css

    Download
  • adapters/shadcn-registry.json

    application/json

    Download
  • adapters/tailwind.config.js

    text/javascript

    Download
  • adapters/react/index.ts

    text/typescript

    Download
  • adapters/html/index.html

    text/html

    Download
  • adapters/html/styles.css

    text/css

    Download

All files (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

Versions