skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-framer

Apply Framer's design system tokens and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#framer#dark theme#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-framer-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-framer
Source: https://github.com/deepparser/skills/tree/main/design-framer
Command: npx skills add https://github.com/deepparser/skills --skill design-framer-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Framer's visual identity requires exact design tokens — colors, typography scales, spacing, shadows, and component rules — which are tedious to reverse-engineer from the live site. ## Core Features & Use Cases - Complete Design Token Reference: Provides Framer's color palette (Void Black #000000, Framer Blue #0099ff), typography hierarchy (GT Walsheim display, Inter body), spacing scale, border-radius scale, and elevation system. - Component Styling Rules: Documents pill-shaped buttons, frosted glass surfaces, dark cards with blue ring shadows, form inputs, and navigation patterns. - HTML Previews: Includes light and dark theme preview files showing the full token catalog rendered as a working page. - Use Case: When asked to build a landing page styled like Framer, the skill supplies exact hex values, letter-spacing values, and shadow definitions so the generated UI matches the brand. ## Quick Start Use the design-framer skill to create a dark landing page hero section styled like Framer's website.

Frequently Asked Questions about design-framer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a UI look like Framer's website?▼

Use a pure black (#000000) background, white text, Framer Blue (#0099ff) only for interactive accents, and pill-shaped buttons with 40px to 100px radius. Display headings use GT Walsheim at weight 500 with extreme negative letter-spacing down to -5.5px.

What fonts does Framer's design system use?▼

Framer uses GT Walsheim Medium (weight 500 only) for display headlines, Inter Variable with OpenType features for body and UI text, Mona Sans for select accents, and Azeret Mono for code. Inter is the practical fallback when GT Walsheim is unavailable.

What is Framer's primary accent color?▼

Framer Blue (#0099ff) is the sole accent color, used for links, borders, focus rings, and ring shadows at rgba(0,153,255,0.15). The system intentionally avoids any additional accent colors.

Does this skill include a light theme preview?▼

Yes, the skill bundles preview.html and preview-dark.html files showing the full token catalog. Both previews render dark surfaces since Framer's identity is dark-first, with the dark variant using a slightly different base background.

When should I not use Framer's design style?▼

Avoid it when the project needs light-mode-first design, warm color palettes, multiple accent colors, or squared component corners. Framer's system mandates pure black backgrounds, one blue accent, and pill-shaped interactive elements.

Related Skills

Explore More Design & Creative Skills→
irismakerirismaker

brand-generate

Generate design tokens, CSS variables, React components, and brand guidelines from brand inputs.

Community
Advanced
hasnahasna

codegen

Generate framework-specific code from json-render UI specification trees.

Official
Intermediate
AI-Staffing-Solution-Consultants-LLCAI-Staffing-Solution-Consultants-LLC

agency-ui-designer

Creates design systems, component libraries, and accessible interface specifications with CSS design tokens.

Official
Intermediate
0xrafasec0xrafasec
9

rlabs-design

Generate branded Rlabs interfaces and assets using the design system.

Community
Advanced