Skip to main content
Back to Examples

Figma

Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.

Design tool. Bold black-and-white on white, one blue-violet accent, a wide type scale and radius-dropping buttons.

18
core colors
4
typefaces
40
tokens
Now playing — motion preview
01

Palette

primary
#000000
on-primary
#FFFFFF
figma-purple
#5856FF
on-purple
#FFFFFF
on-surface
#000000
on-surface-muted
#697485
fg-muted
COLOR-MIX(IN OKLCH, #000000, TRANSPARENT 46%)
surface
#FFFFFF
surface-mint
#EEF9E0
surface-gray
#E2E2E2
surface-inverse
#000000
on-inverse
#FFFFFF
input-bg
COLOR-MIX(IN OKLCH, #000000, TRANSPARENT 92%)
badge-bg
COLOR-MIX(IN OKLCH, #000000, TRANSPARENT 92%)
border
COLOR-MIX(IN OKLCH, #000000, TRANSPARENT 84%)
border-hover
COLOR-MIX(IN OKLCH, #000000, TRANSPARENT 60%)
teal
#2BD9D9
error
#972121
02

Typography

font-sansThe quick brown fox jumps"figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, sans-serif
font-monoThe quick brown fox jumps"figmaMono", "figmaMono Fallback", "SF Mono", menlo, monospace
displayThe quick brown fox jumps{typography.font-sans}
44px
title1The quick brown fox jumps{typography.font-sans}
36px
title3The quick brown fox jumps{typography.font-sans}
22px
eyebrowThe quick brown fox jumps{typography.font-mono}
16px
bodyLThe quick brown fox jumps{typography.font-sans}
16px
bodyThe quick brown fox jumps{typography.font-sans}
14px
formLabelThe quick brown fox jumps{typography.font-sans}
11px
03

Spacing & Shape

TokenValuePreview
base4px
scale[4px, 6px, 8px, 12px, 16px, 24px, 32px, 40px, 56px, 64px, 80px, 120px]
section-block-padding64px
max-content-width1520px
grid-columns12
04

Border Radius

TokenValuePreview
22px
44px
88px
1212px
1616px
2424px
2828px
full9999px
05

design.md

design.mdreadable by AI agents
tokens (raw)
name: figma-design
version: alpha
description: >
  A clean, playful product canvas: white base (#FFFFFF) with black ink, built on
  a fully-documented token system. Type is figmaSans (a variable grotesque, run
  regular-to-medium with tight tracking) for headlines and figmaMono for small
  UPPERCASE wide-tracked eyebrows. The brand is monochrome black/white for
  structure, with a single electric Figma purple (#5856FF) reserved for the
  in-product primary action, teal quote glyphs, and the multicolor Figma logo.
  Sections alternate white / pale-green / light-gray / black footer. Geometry is
  rounded (a 2-28px radius scale + full pills) and elevation is whisper-soft.
colors:
  # Brand / action
  primary: '#000000'          # black pill CTA + ink
  on-primary: '#ffffff'
  figma-purple: '#5856ff'     # electric in-product action ("Get started")
  on-purple: '#ffffff'
  # Text
  on-surface: '#000000'
  on-surface-muted: '#697485' # figmaMono eyebrow gray
  fg-muted: 'color-mix(in oklch, #000000, transparent 46%)'
  # Surface (sections alternate)
  surface: '#ffffff'          # default section bg (--fig-theme-bg)
  surface-mint: '#eef9e0'     # pale-green section (approx)
  surface-gray: '#e2e2e2'     # light-gray "Ship products" section (approx)
  surface-inverse: '#000000'  # black footer / dark sections
  on-inverse: '#ffffff'
  # Form / fills
  input-bg: 'color-mix(in oklch, #000000, transparent 92%)'  # ~black @8%
  badge-bg: 'color-mix(in oklch, #000000, transparent 92%)'
  # Hairlines
  border: 'color-mix(in oklch, #000000, transparent 84%)'    # ~black @16%
  border-hover: 'color-mix(in oklch, #000000, transparent 60%)'
  # Accent (illustration)
  teal: '#2bd9d9'             # quote-mark glyphs (approx)
  error: '#972121'
  # Figma logo: red/orange + green + purple + blue (the 5-dot mark)
typography:
  font-sans: '"figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, sans-serif'  # OSS sub: "Inter" / "Geist"
  font-mono: '"figmaMono", "figmaMono Fallback", "SF Mono", menlo, monospace'  # OSS sub: "Geist Mono"
  display:                    # hero-class
    fontFamily: '{typography.font-sans}'
    fontSize: 44px            # --fig-typography-size-display 2.75rem
    fontWeight: 400
    lineHeight: 48.4px
    letterSpacing: -0.04125rem  # ls-standard
  title1:
    fontFamily: '{typography.font-sans}'
    fontSize: 36px            # 2.25rem
    fontWeight: 400
    letterSpacing: -0.04em
  title3:
    fontFamily: '{typography.font-sans}'
    fontSize: 22px            # "Share libraries..." subhead
    fontWeight: 540
    lineHeight: 29.7px
    letterSpacing: -0.005em
  eyebrow:                    # figmaMono UPPERCASE labels
    fontFamily: '{typography.font-mono}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20.8px
    letterSpacing: 0.04em     # +0.64px
    textTransform: uppercase
    color: '{colors.on-surface-muted}'
  bodyL:
    fontFamily: '{typography.font-sans}'
    fontSize: 16px            # 1rem
    fontWeight: 400
    lineHeight: 23.2px
  body:
    fontFamily: '{typography.font-sans}'
    fontSize: 14px            # 0.875rem
    fontWeight: 400
  formLabel:
    fontFamily: '{typography.font-sans}'
    fontSize: 11px            # 0.6875rem
rounded:
  2: 2px
  4: 4px
  8: 8px
  12: 12px
  16: 16px
  24: 24px
  28: 28px
  full: 9999px                # pills + the "Get started" / hero card
spacing:                      # --fig-spacing-* scale
  base: 4px
  scale: [4px, 6px, 8px, 12px, 16px, 24px, 32px, 40px, 56px, 64px, 80px, 120px]
  section-block-padding: 64px # 4rem
  max-content-width: 1520px   # 95rem grid
  grid-columns: 12
elevation:
  1: '0 0.25rem 2rem 0 rgba(0,0,0,0.10)'    # --fig-elevation-1
  2: '0 1.5rem 4.375rem 0 rgba(0,0,0,0.10)' # --fig-elevation-2
components:
  button-primary:             # nav/footer "Get started for free"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.bodyL}'
    rounded: '{rounded.full}'
    padding: '~14px 22px'
    hover: 'color-mix(in oklch, #000000, transparent 15%)'
  button-secondary:           # "Contact sales"
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    borderWidth: 1px
    borderColor: '{colors.border}'
    rounded: '{rounded.full}'
  button-product-primary:     # purple "Get started" inside the hero card
    backgroundColor: '{colors.figma-purple}'
    textColor: '{colors.on-purple}'
    rounded: '{rounded.12}'
  link-underline:             # "Explore design systems" / "Explore Figma Make"
    textColor: '{colors.on-surface}'
    textDecoration: underline
  input:
    backgroundColor: '{colors.input-bg}'
    placeholderColor: '{colors.fg-muted}'
    rounded: '{rounded.8}'
  badge:                      # "BETA" / "NEW" tags
    backgroundColor: '{colors.badge-bg}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.4}'
  template-tile:              # "Websites / Social media / Mobile apps"
    note: 'solid bright-color block (yellow/blue/green/violet) + rounded preview thumbnail'
    rounded: '{rounded.16}'
motion:
  # Hero word-cycle (Prompt/Design/Draw/Build...), carousels with circular arrow buttons, soft fades.
icons:
  style: outline
  stroke: ~1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color-rules: 'Monoline, ink-inherited. The brand mark is the multicolor 5-dot Figma logo (red/orange, green, purple, blue). Quote glyphs render in teal.'

Figma

figma-design — version alpha

Surfaces studied via Playwright (figma.com home): computed styles + a fully-documented --fig-* token system (typography sizes, spacing, radius scale, elevation, and theme color tokens authored as color-mix(... oklch)). Very high-confidence extraction.

Overview

Figma's canvas is clean and playful: a white base ({colors.surface} #FFFFFF) with black ink. Type is figmaSans — a variable grotesque run regular-to-medium (400–540) with tight negative tracking — for headlines, paired with figmaMono for small UPPERCASE, wide-tracked eyebrows (gray #697485). Structurally the brand is monochrome black/white: actions are black pill buttons with white outline secondaries. The one electric accent is Figma purple {colors.figma-purple} (#5856FF), reserved for the in-product primary action (the "Get started" inside the hero card) — plus teal quote glyphs and the famous multicolor 5-dot logo. Sections alternate backgrounds — white, pale green, light gray, and a black footer — giving rhythm. Geometry is rounded via a documented 2→28px radius scale + full pills, and elevation is a whisper-soft two-tier ladder. The signature touch is the hero word-cycle (Prompt → Design → Draw → Build → …) and bright color template tiles.

Colors

  • Black — {colors.primary} #000. Ink and the marketing primary action (the "Get started for free" pill; hover lightens via color-mix to ~85%).
  • Figma purple — {colors.figma-purple} #5856FF. The electric brand accent, used for the in-product primary action shown inside the hero card mock. Discipline: marketing CTAs stay black; purple signals "the app".
  • Ink & muted. Black text; figmaMono eyebrow gray {colors.on-surface-muted} #697485; general muted text is black at ~54% ({colors.fg-muted}).
  • Alternating surfaces. White default; pale green {colors.surface-mint} (~#eef9e0) for the "Bring everyone together" band; light gray {colors.surface-gray} for "Ship products"; black {colors.surface-inverse} for dark sections and the footer.
  • Fills & hairlines. Inputs/badges sit on ~8% black; borders are ~16% black (hover ~40%) — all authored with color-mix(... oklch).
  • Accent illustration. Teal {colors.teal} (~#2bd9d9) quote-marks; bright template-tile colors (yellow/blue/green/violet); the 5-dot Figma logo (red-orange, green, purple, blue). Error red #972121.

Typography

  • figmaSans (variable) — display & body. Closest OSS substitute: Inter (or Geist). Run at 400–540 with tight tracking (display uses ~-0.04rem). The variable font exposes width and weight axes (wght 400/600/700, wdth 96–100).
  • figmaMono — UPPERCASE eyebrows/labels with wide tracking (+0.04em). OSS sub: Geist Mono.
TokenFamilySizeWeightTrackingUsage
displayfigmaSans44px (2.75rem)400-0.04remHero-class headlines
title1figmaSans36px400-0.04emSection titles
title3figmaSans22px540-0.005emSubheads ("Share libraries…")
eyebrowfigmaMono16px400+0.04em, UPPER"PRODUCT", "USE CASES"
bodyLfigmaSans16px400normalLead body
bodyfigmaSans14px400normalBody copy
formLabelfigmaSans11px400—Form labels

Layout

A documented grid: 12 columns, 1.5rem margins, 1rem gutters, 95rem (~1520px) max content, 4rem section block padding, on a 4px spacing base (scale 4→120). The page is a stack of alternating-background sections, each typically a two-up (text + product/illustration) or 2-column feature grid (design systems, Buzz, Dev Mode). Other primitives: the hero word-cycle card, a grayscale trust-logo strip, a bright template-tile carousel (circular arrow nav), and an "Explore what people are making" thumbnail grid. The footer is a dense multi-column link directory on black.

Elevation & Depth

A whisper-soft two-tier ladder: {elevation.1} (0 4px 32px rgba(0,0,0,0.10)) for resting cards and {elevation.2} (0 24px 70px …) for floating/hover. Both are low-opacity, large-blur — gentle. Depth otherwise comes from the alternating section colors and clean product mockups; no gradients on surfaces.

Shapes

A full radius scale: 2 / 4 / 8 / 12 / 16 / 24 / 28px + full pills. Buttons and the hero card use full pills / large radii; cards and tiles use 12–24px; badges use 4px. The result is friendly and modern, matching figmaSans's soft grotesque.

Components

  • Primary button {components.button-primary} — black full-pill, white label ("Get started for free").
  • Secondary button {components.button-secondary} — transparent pill with a ~16% black border ("Contact sales").
  • Product primary {components.button-product-primary} — purple #5856FF, 12px radius, the "Get started" inside the hero card mock.
  • Underline link {components.link-underline} — "Explore design systems", "Explore Figma Make".
  • Input {components.input} — ~8% black fill, 8px radius, muted placeholder.
  • Badge {components.badge} — "BETA" / "NEW" tags, 4px radius, ~8% black fill.
  • Template tile {components.template-tile} — a solid bright color block (yellow/blue/green/violet) with a rounded preview thumbnail.

Motion

Playful but tasteful: the hero word-cycle (Prompt/Design/Draw/Build/Publish/Promote/Jam/Present) with a play/pause control, carousels with circular arrow buttons, and soft fades. No heavy parallax.

Iconography

Thin outline monoline icons, ink-inherited. The brand mark is the multicolor 5-dot Figma logo (red-orange, green, purple, blue). Quote glyphs render in teal. Social icons sit in dark circles in the footer. Sizes 16/20/24px.

Do's and Don'ts

  • Do keep marketing CTAs black pills; reserve purple #5856FF for the in-product action.
  • Do set headlines in figmaSans (400–540) with tight tracking; eyebrows in figmaMono UPPERCASE with wide tracking.
  • Do alternate section backgrounds (white / pale-green / light-gray / black).
  • Do use the documented radius scale and the soft two-tier elevation.
  • Do use bright color blocks for template tiles and teal for quote glyphs.
  • Don't turn marketing buttons purple (purple = the product).
  • Don't use heavy/black headline weights — stay regular-to-medium.
  • Don't add hard shadows; elevation is large-blur and low-opacity.

Known Gaps

  • Theme colors are authored as color-mix(... oklch); pale-green, light-gray, teal and the logo hues are nearest-hex approximations.
  • Hero display scales responsively above the 44px (size-display) base.