Figma

Overview

Figma is a collaborative design platform that democratizes digital product creation through a browser-based interface. The design system embodies 'Precision Minimalism'—a philosophy that strips away visual noise to expose pure functionality. The aesthetic is deliberately austere: a near-monochromatic palette of pure black (#000000) and white (#ffffff) with surgical accent colors (cyan #0d99ff, magenta #ff24bd, purple #9747ff) deployed only on interactive elements and status indicators. This restraint creates an environment where the user's creative work becomes the focal point, not the interface itself. The emotional response is one of calm professionalism: the UI recedes, the canvas advances. Voice: direct, precise, never decorative. Figma speaks in imperative verbs and concrete nouns. Example sentence: 'Select the frame, adjust the constraints, publish to Dev Mode.'

Colors

The color system operates on a principle of hierarchical restraint. Primary (#000000) is the dominant UI color—used for text, buttons, and structural elements—creating visual weight and authority. On-primary (#ffffff) ensures maximum contrast (WCAG AAA compliant at 21:1 ratio). Secondary (#0d99ff, a vivid cyan) and Tertiary (#ff24bd, a saturated magenta) are reserved for interactive states, notifications, and brand moments; they appear sparingly to signal actionability. The surface stack (white #ffffff down to #d9d9d9) provides subtle depth without visual clutter: surface-container-low (#f5f5f5) for hover states, surface-container-high (#e5e5e5) for pressed states. Error states use the tertiary magenta (#ff24bd) with white text for maximum legibility. The outline color (#b3b3b3) is used fo

Typography

The type system is built on Figma Sans, a proprietary typeface designed for on-screen clarity and legibility at all sizes. Display (56px, 700 weight) is reserved for hero moments and marketing contexts. Headline-lg (32px, 600 weight) anchors major sections. Headline-md (26px, 500 weight) is the primary heading for modals and cards, as seen in the authentication modal. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle content hierarchy; body-md is the default for form labels and descriptions. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are used for buttons, badges, and UI chrome. Letter-spacing is minimal (0 to -0.02em) to maintain density and professionalism. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels over light backgrounds to enhance le

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, enabling responsive scaling from mobile (single column) to desktop (full grid). The gutter is consistently 24px, applied as margin-left and margin-right on grid items. Page sections use lg spacing (40px) for vertical separation, creating a rhythm that feels spacious without excess. The modal in the screenshot demonstrates the layout principle: a centered card (max-width ~420px) with md padding (24px) on all sides, containing a headline-md, body text, and two action buttons stacked vertically with sm spacing (12px) between them. White-space is treated as a first-class design element; never collapse margins or padding to save space. Container backgrounds use surface (#ffffff) or surface-dim (#f9f9f9) to define

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color gradients or transparency. Level 1 (Base): no shadow, flat surface (#ffffff). Level 2 (Cards, popovers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on the authentication modal and input fields to lift them from the background. Level 3 (Modals, dropdowns): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), creating clear visual hierarchy. Focus states use an inset shadow (inset 0 0 0 2px rgba(0, 0, 0, 0.2)) to indicate keyboard navigation without changing the element's size. Hover states on cards increase shadow to Level 3

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are minimal and purposeful, never organic or playful. Buttons use rounded.md (8px) for a slightly softened edge that feels refined without being rounded. Cards and modals use rounded.lg (12px) to create visual distinction from buttons while maintaining the austere aesthetic. Input fields use rounded.DEFAULT (6px), the smallest radius, to emphasize their utilitarian function. Badges and pills use rounded.full (9999px) for maximum softness, reserved for status indicators and tags where a more approachable appearance is desired. The 2p

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses #000000 background with #ffffff text, 700 font-weight, 12px vertical padding, 20px horizontal padding, and 8px border-radius. On hover, the background shifts to #2c2c2c (primary-container) to indicate interactivity. On focus, add an inset 2px border at rgba(0, 0, 0, 0.2) without changing the button's dimensions. Button-secondary is transparent with a 1px solid border at #b3b3b3, allowing secondary actions to coexist without visual dominance. All buttons must have a minimum height of 48px to meet touch target guidelines.

Containers & Surfaces Cards are the primary container for grouped content. Apply background #ffffff, 1px border at #d9d9d9, 12px border-radius, 24px padding, and box-shadow: 0 3px 8px

Do's and Don'ts

**Do**

• Do use the primary black (#000000) for all text and structural UI; it creates visual hierarchy and ensures accessibility.
• Do reserve secondary (#0d99ff) and tertiary (#ff24bd) colors for interactive states, notifications, and brand moments only—never use them for body text or backgrounds.
• Do apply consistent 24px gutter spacing and 40px section spacing to create a predictable, scannable layout.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on cards and modals to create depth without visual noise.
• Do ensure all interactive elements have a minimum 48px height and a visible focus state (2px inset border or outline) for keyboard navigation.

**Don't**

• Don't use decorative colors or gradients; the palette is intentionally austere to keep focus on user content.
• Don't apply rounded corners larger than 12px except for badges and pills; excessive rounding contradicts the precision aesthetic.
• Don't collapse margins or padding to save space; white-space is a design tool, not a constraint.
• Don't use transparency or blur effects for depth; rely on shadows and layering instead.
• Don't mix typefaces; Figma Sans is the sole typeface family for all UI text—use weight and size to create hierarchy, not different fonts.