Design System inspired by Framer

Web builder. Black and white with blue accents, motion-forward design.

Usage

npx getdesign@latest add framer

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Framer design system. A curated starting point for building Framer-like UIs with your AI coding agent.

Web builder. Black and white with blue accents, motion-forward design.

Preview

framer.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF FRAMER

Web builder. Black and white with blue accents, motion-forward design.

Explore the system View tokens

Color Palette

Web builder. Black and white with blue accents, motion-forward design.

Primary

Black

#000000

Brand color

White

#ffffff

Brand color

Blue

#0055ff

Brand color

Gray 100

#f5f5f5

Brand color

Gray 300

#c4c4c4

Brand color

Gray 500

#8c8c8c

Brand color

Gray 900

#1a1a1a

Brand color

Typography

A type system inspired by Framer.

Inter

Inter, Inter

Fira Code

Fira Code, Inter

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Framer.

Not detected on this URL

Components

Other component primitives mapped from the Framer spec.

Not detected on this URL

Design System Inspired by Framer

1. Visual Theme & Atmosphere

Web builder. Black and white with blue accents, motion-forward design.

Key Characteristics:

Monochrome base with blue (#0055FF) accent

Motion and animation as core visual language

Canvas-based interactive design elements

Clean minimal UI with generous whitespace

Code and visual design blended interface

2. Color Palette & Roles

Primary

Black (#000000): Brand color
White (#FFFFFF): Brand color
Blue (#0055FF): Brand color
Gray 100 (#F5F5F5): Brand color
Gray 300 (#C4C4C4): Brand color
Gray 500 (#8C8C8C): Brand color
Gray 900 (#1A1A1A): Brand color

3. Typography Rules

Font Family

Display & UI: Inter, Fira Code

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth is communicated through background color shifts and subtle shadows or borders.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Black: #000000
White: #FFFFFF
Blue: #0055FF
Gray 100: #F5F5F5
Gray 300: #C4C4C4
Gray 500: #8C8C8C

Typography

Font: Inter, Fira Code