Skip to content
Back to extractor

Overview

Figma's design system is a rigorously systematic, monochromatic-first visual language built around a proprietary variable font (figmaSans) that expresses weight and width variations fluidly across all type scales. The palette is intentionally minimal — pure black and white with transparency-based tints for surface, border, and muted text — ensuring the UI never competes with user content. Layout is governed by a fluid column grid that scales from 1 column on mobile to 48 columns at wide viewports, with consistent token-based spacing and a responsive typographic scale.

Signature traits: variable-font weight and width axes for expressive typography, transparency-mixed oklch colors for surfaces and borders, systematic fluid column grid with CSS custom properties, stark monochromatic base palette with dark/light theme switching, pill and rounded-rectangle shape language, animated underline hover interactions on navigation links.

Colors

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --fig-theme-bg | #FFFFFF | Page backgrounds | | Surface | --fig-theme-card-bg | color-mix(in oklch, #000000, transparent 96%) | Card/panel backgrounds | | Text Primary | --fig-theme-fg | #000000 | Headings, body copy | | Text Secondary | --fig-theme-fg-muted | color-mix(in oklch, #000000, transparent 46%) | Captions, placeholders | | Border | --fig-theme-border | color-mix(in oklch, #000000, transparent 84%) | Dividers, outlines | | Accent | --fig-theme-btn-primary-bg | #000000 | CTAs, highlights |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | figmaSans, SF Pro Display, system-ui | 4.5rem (→6.5rem @1600px) | 400 (wght axis) | 1 | -0.078125rem | Hero headlines | | Heading | figmaSans, SF Pro Display, system-ui | 2.75rem (→4rem @1024px) | 400 (wght axis) | 1.1 | -0.04125rem | Section titles | | Body | figmaSans, SF Pro Display, system-ui | 0.875rem (→1rem @1024px) | normal (wght 330) | 1.45 | 0rem | Paragraph text | | Caption | figmaSans, SF Pro Display, system-ui | 0.875rem | normal (wght 400) | 1.45 | 0rem | Labels, metadata | | Mono | figmaMono, SF Mono, menlo, monospace | 1rem | 400 | 1.3 | 0.04rem | Code, data, badges |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 0.25rem | Inline gaps, tight padding | | Spacing SM | 0.5rem | Component padding, icon gaps | | Spacing MD | 1rem | Standard component padding | | Spacing LG | 1.5rem | Section sub-gaps | | Spacing XL | 2.5rem | Section padding, vertical rhythm | | Max Width | 95rem (→ 105rem @1920px) | Content container (--fig-grid-max-content-width) |

Responsive strategy: The grid uses CSS custom property breakpoints at 480px (12 columns, margin 1.5rem), 768px, 1024px (margin 2.5rem), 1280px, 1440px, 1600px, and 1920px. Column count scales from 4 → 12 on the fig-grid system, and a parallel --f-columns system scales from 1 → 48. Type sizes step up at 1024px and again at 1600px. Section block padding grows from 2.5rem → 4rem → 5rem → 10rem across breakpoints.

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | sm | 0 0.25rem 2rem 0 color-mix(in oklch, #000000, transparent 90%) | Cards, tooltips | | md | 0 1.5rem 4.375rem 0 color-mix(in oklch, #000000, transparent 90%) | Dropdowns, popovers | | lg | inset 0 0 0 1px color-mix(in oklch, #000000, transparent 84%) | Modals, bordered overlays |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Flush-edge elements, iframes | | sm | 0.125rem | Inline badges, focus rings | | md | 0.5rem | Buttons, dropdown menus, cards | | lg | 1rem | Large cards, modal panels | | xl | 1.75rem | Feature cards | | full | 9999px | Pills, avatar circles, icon buttons |

Components

Buttons: Three distinct sizes (sm with padding: 0.75rem 1.375rem, large with padding: 1.5rem 2rem) and four variants — primary (solid black/white), secondary (outline with inset box-shadow), transparent (semi-opaque fill), and ghost (no background). All buttons feature a slide-and-reveal animated arrow icon on hover (translate: -0.5625rem on text, opacity fade-in on icon). Pill-shaped icon-only buttons use border-radius: 9999px.

Navigation: Fixed top nav with animated underline hover effects using scaleY transforms on pseudo-elements. Mega-menu dropdowns are absolutely positioned with grid layouts. A mobile nav is hidden at ≥1280px; a simplified nav is shown below.

Badges: Monospace uppercase text (figmaMono, text-transform: uppercase, letter-spacing: 0.03125rem) on a semi-transparent background (color-mix(in oklch, #000000, transparent 92%)), border-radius: 0.25rem.

Forms: Input backgrounds use color-mix(in oklch, #000000, transparent 92%). Error states use #972121 bg / #FFFFFF fg in light mode; #FFB3B3 bg / #000000 fg in dark mode.

Dark theme: Toggled via [data-theme='dark'] on :root. All --fig-theme-* tokens invert — bg becomes #000000, fg becomes #FFFFFF, and all transparency mixes swap base from #000000 to #FFFFFF.

Carousels/Sliders: Use CSS custom property --slide-cols-* variables to define responsive slide widths, with touch-action: pan-y pinch-zoom for mobile support.

Accessibility: Skip links (position: absolute; left: -999px) reveal on focus with #E4FF97 background. Focus-visible outlines use dashed 2px style. Visually hidden content uses the standard clip-path: inset(50%) + width/height: 1px pattern.

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use figmaSans variable font with font-variation-settings for weight/width axes | Don't use arbitrary font-weight values outside the defined variation axis values (320, 330, 400, 530, 540, 550, 600, 700) | | Use color-mix(in oklch, ...) transparency pattern for surfaces, borders, and muted text | Don't use hardcoded rgba() or hex values for transparent surfaces — always derive from the base #000000/#FFFFFF tokens | | Use the --fig-space-* token scale (0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem, 2rem, 2.5rem, 3.5rem, 4rem, 5rem, 7.5rem) | Don't use arbitrary spacing values outside the defined token scale | | Apply border-radius: 9999px for all pill/circular elements (icon buttons, avatars, tags) | Don't mix border-radius values — use only the defined token set (0.125, 0.25, 0.5, 0.75, 1, 1.5, 1.75rem, 9999px) | | Use the --fig-theme-* semantic tokens so dark mode works automatically | Don't hardcode #000000 or #FFFFFF directly in component styles — use the theme token layer | | Use font-style: normal with "slnt" -6 in font-variation-settings for italics | Don't use font-style: italic — the variable font uses a slant axis instead |

Agent Prompt Guide

You are working within the Figma: The Collaborative Interface Design Tool design system. Key constraints:

  • —Colors: background #FFFFFF, surface color-mix(in oklch, #000000, transparent 96%), text #000000, muted text color-mix(in oklch, #000000, transparent 46%), border color-mix(in oklch, #000000, transparent 84%), accent #000000. Use --fig-theme-* tokens. Dark mode inverts all tokens via [data-theme='dark'].
  • —Typography: 'figmaSans' variable font for all UI text (wdth 96–100, wght 320–700 axes); 'figmaMono' for code, badges, and data labels. Never use font-style:italic — use "slnt" -6 in font-variation-settings.
  • —Spacing: use only the token scale — 0.25rem (xs), 0.5rem (sm), 0.75rem, 1rem (md), 1.5rem (lg), 2rem, 2.5rem (xl), 3.5rem, 4rem, 5rem, 7.5rem (2xl).
  • —Radius: 0.5rem for standard elements, 9999px for pills and circles, 0.25rem for badges.
  • —Never use colors, fonts, or spacing values outside the design system tokens.
  • —Buttons animate with a slide-translate arrow reveal on hover; nav links use scaleY underline animations.