Figma

Overview

Figma is the collaborative canvas where design, code, and AI converge into a unified creative workspace. The design system embodies **Architectural Minimalism**—a philosophy that prioritizes clarity, precision, and functional elegance through radical simplification. The brand serves design teams, developers, and product leaders who demand speed and collaboration without compromise. The visual language is deliberately austere: pure black (#000000) and white (#ffffff) form the foundation, with typography and spatial rhythm as the primary expressive tools. This creates an interface that feels both powerful and approachable, evoking confidence and mastery.

Figma's voice is direct, collaborative, and human-centered. The tone avoids corporate jargon, preferring concrete, action-oriented language. Vocabulary emphasizes agency: "canvas," "collaborate," "ship," "create." The brand personality is pragmatic yet inspiring—it celebrates the act of making without pretension. Example sentence in Figma's voice: "Bring your whole team into one canvas. Design, prototype, and handoff—all in Figma."

Colors

Figma's color system is rooted in **high-contrast dualism**: black (#000000) as primary and white (#ffffff) as on-primary, creating maximum legibility and visual hierarchy. Black is the signature accent—it appears on all primary CTAs ("Get started"), navigation elements, and interactive states. This is not a neutral; it is the brand's deliberate choice to command attention and convey authority. Secondary grays (surface-container: #eeeeee, on-surface-variant: #5f6368) provide subtle depth and support text hierarchy without competing for focus. The tertiary accent (#1a73e8, a Google-influenced blue) is reserved for links, highlights, and secondary information layers—it appears sparingly to maintain the minimalist aesthetic. Error states use a warm red (#972121 on light, #ffb3b3 on dark) to s

Typography

Figma's type system uses **figmaSans** (a custom variable font with wdth and wght axes) paired with **figmaMono** for code. The hierarchy is built on weight and size rather than color: display (56px, wght 400) anchors hero sections with generous line-height (64px, -0.02em tracking) for breathing room. Headline-lg (40px, wght 400) and headline-md (28px, wght 400) maintain the light, open aesthetic, while body-lg (18px, wght 330) and body-md (16px, wght 400) ensure readability at all scales. Label-md (14px, wght 600) and label-sm (12px, wght 500) are used for UI controls and metadata. Font-variation-settings are critical: wdth 98 (narrow) is applied to body text for visual cohesion, while wght 330 (light-regular) is the default weight, creating an airy, modern feel. On small labels over busy

Layout

Figma uses a **fluid 12-column grid** that adapts across breakpoints (560px, 768px, 960px, 1280px, 1920px). The container max-width is 1440px, with a gutter of 24px on mobile scaling to 40px on desktop. Page rhythm is driven by section padding: 40px (2.5rem) on mobile, 64px (4rem) on tablet, 80px (5rem) on desktop, creating a sense of expansive breathing room. White-space is treated as a first-class design element—negative space between sections, cards, and text blocks is never compressed. The spacing scale (unit: 8px, xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently: md (24px) for card padding and button spacing, lg (40px) for section separation, xl (64px) for hero margins. Grid columns are used to align content blocks, with hero text typically spanning 6–8 columns

Elevation & Depth

Figma's depth model is **flat-first with subtle shadows**. Visual hierarchy is conveyed through color contrast (black/white), typography weight, and minimal shadow layers rather than aggressive depth cues. Three elevation levels exist: Level 1 (base, no shadow) for body text and standard surfaces; Level 2 (sm shadow: 0 1px 2px rgba(0, 0, 0, 0.06)) for cards and input fields, creating a hairline lift; Level 3 (md shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) for modals, dropdowns, and hover states, signaling interactive elevation. The lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)) is reserved for critical

Shapes

Figma employs **Functional Roundness**—a shape philosophy that balances approachability with precision. Border-radius values are conservative and purposeful: sm (0.125rem / 2px) for subtle softening on form inputs and small UI elements; DEFAULT (0.5rem / 8px) for cards, badges, and standard containers; md (0.75rem / 12px) for medium-emphasis components; lg (1rem / 16px) for buttons and primary interactive surfaces; xl (1.5rem / 24px) for large modals and hero containers; full (9999px) for pills and circular avatars. Buttons use lg (16px) to signal interactivity without appearing playful; cards

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** (backgroundColor: #000000, textColor: #ffffff, padding: 12px 32px, height: 48px, rounded: 16px, fontWeight: 400) is used for all primary CTAs ("Get started", "Sign up"). On hover, the background shifts to primary-container (#1a1a1a) with a smooth transition (200ms ease-out recommended). **button-primary-active** uses primary-fixed-dim (#0d0d0d) for pressed states. **button-secondary** (backgroundColor: transparent, border: 1px solid #d0d0d0, textColor: #000000) is used for secondary actions; on hover, backgroundColor becomes surface-container (#eeeeee). **button-ghost** (backgroundColor: transparent, textColor: on-surface) is for tertiary or inline actions, with hover state surface-container. All buttons us

Do's and Don'ts

**Do**

• Do use black (#000000) and white (#ffffff) as the primary color pair—they are the brand's signature and must appear on all primary CTAs and navigation.
• Do maintain 48px minimum height for all clickable elements to ensure touch accessibility across devices.
• Do apply consistent 24px padding (md spacing) inside cards and containers; never compress spacing below 12px (sm) in UI elements.
• Do use figmaSans with wdth 98 and wght 330–400 for body text to maintain the airy, modern aesthetic.
• Do elevate on hover using shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and background color shift, never scale or transform.
• Do limit border-radius to the defined scale (8px for cards, 16px for buttons, 24px for modals); never use arbitrary values.

**Don't**

• Don't use color gradients, transparency effects, or glassmorphism in the core UI—all surfaces must be opaque and flat.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12); excessive depth contradicts the minimalist aesthetic.
• Don't mix font families; figmaSans is the only typeface for UI, figmaMono only for code blocks.
• Don't use tertiary blue (#1a73e8) as a primary accent; reserve it for links and secondary information layers only.
• Don't compress spacing below 12px (sm unit) in interactive components; white-space is a design feature, not a constraint.
• Don't apply font-weight above 600 in body text; the system uses wght 330–550 to maintain visual hierarchy through size and weight, not boldness.