Figma

Overview

Figma is a collaborative design-to-code platform that unifies creative workflows across design, prototyping, and development. The brand embodies 'Purposeful Minimalism'—a design philosophy that prioritizes clarity, efficiency, and intelligent simplicity. The visual language is deliberately restrained: pure black (#000000) and white (#ffffff) form the core palette, with strategic accent colors (Google Blue #1a73e8, Figma Green #24cb71) used sparingly to guide user attention and signal actionable moments. The interface evokes a sense of calm focus, where every pixel serves a function. Users feel empowered to create without friction, supported by a system that gets out of the way.

The brand voice is direct, confident, and human-centered. Figma speaks in active language—'Get started,' 'Explore,' 'Collaborate'—avoiding jargon while maintaining technical credibility. The tone is encouraging but never patronizing; it assumes users are intelligent and capable. Example sentence in brand voice: 'Design, prototype, and handoff—all in one place, with your whole team.'

Colors

Figma's color system operates on a principle of 'Functional Contrast': the dominant palette is a pure black-and-white axis (primary #000000, on-primary #ffffff), creating maximum legibility and a timeless, professional aesthetic. This monochromatic foundation is interrupted by two strategic accent colors—secondary (Google Blue #1a73e8) for interactive elements and navigation, and tertiary (Figma Green #24cb71) for success states and affirmative actions. The surface stack uses subtle grays (surface-container-low #f0f0f0, surface-container #e8e8e8, surface-container-high #e0e0e0) to establish depth without introducing new hues. Error states employ a warm red (#972121 for dark backgrounds, #ffb3b3 for light), ensuring accessibility and immediate recognition. Borders and dividers use outline-v

Typography

Figma's type system is built on figmaSans—a custom, variable font family with condensed and narrow widths (wdth 96–100) and weight variations (wght 330–700)—paired with figmaMono for code and technical content. The hierarchy spans from display (56px, 400 weight, -0.02em tracking) for hero statements down to label-sm (12px, 500 weight, 0.02em tracking) for UI labels. Body text defaults to 18px at weight 330 (a deliberate sub-regular weight) with 1.4 line-height, creating an airy, readable rhythm. Headlines use weight 400 with negative letter-spacing (-0.01em to -0.015em) to create visual compression and emphasis. On small labels over busy backgrounds or interactive elements, apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.1) to ensure legibility. Font-variation-settings are used extensively: st

Layout

Figma uses a fluid 12-column grid system with a maximum container width of 1440px and a gutter of 24px. The layout philosophy prioritizes breathing room: sections are separated by lg spacing (40px on mobile, 64px on desktop) to create visual rhythm and prevent cognitive overload. The grid is responsive, collapsing to 1 column on mobile (< 560px), expanding to 2 columns at 560px, and reaching full 12 columns at 960px+. Container padding uses the gutter token (24px) on all sides, ensuring consistent margins. Hero sections and feature blocks employ asymmetric layouts—text on the left, imagery or interactive elements on the right—to guide the eye and establish visual hierarchy. Whitespace is treated as a first-class design element: no section should feel cramped, and card padding defaults to m

Elevation & Depth

Figma's depth system is achieved through a restrained shadow palette and subtle color shifts rather than dramatic layering. Level 1 (base cards and containers) uses elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.06), creating a barely-perceptible lift. Level 2 (hovered cards, modals) applies elevation-md: 0 3px 8px rgba(0, 0, 0, 0.15), introducing noticeable separation. Level 3 (dropdowns, popovers) uses elevation-lg: 0 8px 24px rgba(0, 0, 0, 0.12), commanding attention without overwhelming. All shadows use pure black (rgba(0, 0, 0, x)) to maintain the minimalist aesthetic. Borders provide additional

Shapes

Figma employs 'Architectural Precision'—a shape philosophy that balances geometric clarity with subtle softness. Border-radius follows a deliberate scale: sm (0.125rem / 2px) for tight, technical elements like form inputs and small badges; DEFAULT (0.25rem / 4px) for standard inputs and minor UI components; md (0.5rem / 8px) for cards and medium containers; lg (1rem / 16px) for buttons and primary interactive elements; xl (1.5rem / 24px) for large modals and hero sections; full (9999px) for pills and fully-rounded badges. Buttons use lg (16px) to signal interactivity and create a comfortable t

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses backgroundColor {colors.primary} (#000000), textColor {colors.on-primary} (#ffffff), rounded {rounded.lg} (16px), padding 12px 24px, and height 48px. On hover, button-primary-hover shifts to backgroundColor {colors.primary-container} (#1a1a1a) with a 200ms transition using cubic-bezier(0.2, 0, 0, 1). button-secondary provides a lower-emphasis alternative: transparent background, {colors.primary} text, 1px solid {colors.outline} border, same padding and height. button-ghost removes the border, using only text color and a transparent hover state (backgroundColor {colors.surface-container}). All buttons include focus-visible outlines: 2px dashed {colors.on-surface} with 4px offset.

Containers & Surf

Do's and Don'ts

**Do**

• Do use black (#000000) and white (#ffffff) as the foundational palette—they create clarity and timelessness.
• Do apply accent colors (blue #1a73e8, green #24cb71) sparingly to guide attention to primary actions and success states.
• Do use the full typography hierarchy (display down to label-sm) to establish clear information hierarchy; never skip levels.
• Do maintain 24px gutter spacing and 40px+ section separation to ensure breathing room and visual rhythm.
• Do apply elevation shadows consistently: sm for base, md for hover, lg for modals—never mix shadow scales.
• Do use rounded lg (16px) for buttons and xl (24px) for modals to signal prominence; use DEFAULT (4px) for inputs to feel lightweight.

**Don't**

• Don't introduce new colors outside the primary (#000000), secondary (#1a73e8), tertiary (#24cb71), and error (#972121) palette—the system is intentionally restrained.
• Don't use blur, glassmorphism, or transparency effects on interactive elements; maintain crisp edges and clear visual boundaries.
• Don't apply shadows larger than elevation-lg (0 8px 24px rgba(0, 0, 0, 0.12)) or use multiple stacked shadows—depth is achieved through color and borders.
• Don't set button height below 48px or padding below 12px 24px; maintain comfortable touch targets and visual presence.
• Don't mix border-radius scales within a single component family (e.g., don't use both md and lg on different buttons).
• Don't use font weights outside the figmaSans variable range (330–700) or apply font-weight without corresponding font-variation-settings; always pair wght with wdth and slnt as needed.