CURATED · OPEN · FREE

Framer

A sleek, dark-mode SaaS platform for building beautiful websites with integrated design tools.

Design ToolsExpressiveMotionPlayful

Framer screenshot

↓ Download design system (22 MB)Open in OpenDesign

Visit: https://framer.com

📦 Browse pack contents →

01

Identity DNA

creativevisual builderhigh-performancestartup-focused

A high-end design tool that feels like a polished creative studio.

02

Color

#0099FFAccent

#FFFFFFInk

rgba(255,255,255,0.6)Ink soft

#000000BG

#242424BG quiet

#999999Muted

rgba(255,255,255,0.1)Line

High-contrast dark mode with a single vibrant blue accent.

03

Typography

geometric-sans · humanist-sans · geometric-mono

display96px · 500
display-sm32px · 500
body18px · 400
caption12px · 400

Use tight letter-spacing for large display text · Maintain high contrast for body text against dark backgrounds · Prioritize geometric sans-serif for headers and UI

04

Spacing

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

Consistent 4px grid with generous whitespace for a premium feel.

05

Surfaces

sm · 6px

md · 8px

lg · 15px

pill · 100px

Minimal, often using subtle white borders or shadows to define depth.

0px 1px 2px rgba(0,0,0,0.25) · 0px 10px 30px rgba(0,0,0,0.25) · 0px 0px 0px 2px #090909

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered content with large margins and a clear vertical rhythm.

07

Motion & Interaction

200msmicro

300mssmall

800msmedium

cubic-bezier(0.44, 0, 0.56, 1)easing

Smooth fade-ins and subtle hover transitions

Subtle color shifts or opacity changes on buttons and links. · Immediate visual feedback with slight scale or color changes.

08

Components

button Pill-shaped buttons with strong contrast, either white on black or white with black text.
card Dark cards with subtle borders and rounded corners, often containing images or data.
chip Small, rounded labels or tags.
input Clean, dark inputs with subtle borders.
hero Massive, bold typography centered on a dark background with a clear call to action.

09

Voice & Don'ts

Tone Confident, modern, and professional.
Headlines Bold, direct, and benefit-driven.
CTAs Clear and action-oriented.

Don't use light backgrounds — screenshot shows a primary #000000 background.
Don't use serif fonts — screenshot shows sans-serif display and body fonts.
Don't use rounded squares — screenshot shows 100px pill buttons.
Don't use multiple bright colors — screenshot shows a dominant blue accent.
Don't use thin, light typography — screenshot shows bold, high-contrast headings.
Don't use cluttered layouts — screenshot shows generous whitespace and a clear hierarchy.
Avoid: Overly technical jargon
Avoid: Passive language
Avoid: Cluttered layouts

10

Inside the pack — real screenshots

Framer — 桌面首屏（hero） — 桌面首屏（hero）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a high-performance SaaS website for a design tool. The design DNA is a dark, premium, and clean aesthetic. Key colors are #000000 (bg), #FFFFFF (ink), and #0099FF (accent). Fonts are primarily geometric and humanist sans-serifs. Critical donts: don't use light backgrounds, don't use serif fonts, don't use multiple competing accent colors, don't use thin typography for headlines, don't use cluttered layouts, don't use non-pill buttons. The tone is confident and modern, focusing on speed and creative power.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko