The standard operating system for modern design and product teams.
02
Color
#5B5BF7Accent
#000000Ink
#808080Ink soft
#FFFFFFBG
rgba(255, 255, 255, 0.16)Line
High-contrast, clean white backgrounds with black text for maximum readability, accented by a vibrant purple for primary actions and a bright green for promotional banners.
03
Typography
humanist-sans · monospace
display56px · 330
heading-lg24px · 400
body18px · 330
body-sm16px · 330
Headlines use tight tracking (negative letter-spacing) for a modern, compact look. · Body text maintains a light weight (330) for a clean, airy feel. · Monospace fonts are reserved for code snippets or technical displays.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
8px base unit with a consistent spatial system based on multiples of 8 and 16 for padding and margins.
05
Surfaces
sm · 4px
md · 8px
lg · 16px
pill · 999px
Minimal use of borders, primarily subtle 1px dividers or inset shadows for defining containers and input fields.
A standard 12-column fluid grid with responsive breakpoints, prioritizing generous white space and clear content hierarchy.
07
Motion & Interaction
160msmicro
250mssmall
400msmedium
cubic-bezier(0.8, 0, 0.2, 1)easing
Smooth transitions for hover states and interactive elements. · Subtle transforms and translations for UI state changes. · Background and opacity transitions for modals or overlays.
Subtle background color changes or opacity adjustments, often with a transition duration of around 0.16s to 0.25s. · Immediate visual feedback, often through background color shifts or subtle transforms.
08
Components
buttonHigh contrast primary buttons (black background, white text) with pill or slightly rounded corners. Secondary buttons use outlined styles.
cardCards are often used to showcase community projects, featuring large imagery and clean typography, sometimes with subtle shadows or borders.
chipMinimal use of chips; tags and labels are typically integrated into lists or navigation menus.
inputClean input fields defined by inset shadows or subtle borders, often accompanied by monospace fonts for technical inputs.
heroDynamic hero sections featuring large, expressive typography, often interacting with or overlaying a gallery of diverse, colorful project screenshots.
09
Voice & Don'ts
ToneProfessional, empowering, and clear, focusing on collaboration and creativity.
HeadlinesBold, concise statements that highlight core functionalities and benefits.
CTAsDirect and action-oriented, using phrases like 'Get started' or 'Contact sales'.
Don't use a dark primary background — the screenshot shows predominantly white backgrounds.
Don't use serif fonts for headings — the screenshot shows humanist-sans-serif fonts.
Don't use overly complex, multi-colored gradients as primary backgrounds — the screenshot shows a clean white base.
Don't use heavy, drop shadows for elevation — the screenshot shows subtle, minimal box shadows or inset borders.
Don't use all-caps for body text — the screenshot shows uppercase text used sparingly for labels or small tags.
Don't use a high-contrast, bright primary color that isn't purple or green — the screenshot shows a specific purple for CTAs and green for promotional banners.
Captured from the live site · real computed styles
11
System prompt
This is the homepage of Figma, a collaborative design tool. The design DNA is clean, professional, and highly refined, prioritizing clarity and whitespace. The primary color palette is monochromatic with black (#000000) text on a white (#FFFFFF) background, accented by a vibrant purple (#5B5BF7) for primary action buttons and a bright green (#24CB71) for promotional banners. Typography is strictly humanist-sans-serif (Figma Sans) with a light body weight (330) and tight letter-spacing for a modern feel. Key interactions are subtle, using smooth transitions. Critical don'ts: Do not use dark mode as the primary theme; do not use serif fonts; do not rely on heavy drop shadows for elevation. Focus on clean layouts, generous spacing, and high-contrast, accessible text.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
