DESIGN.md — Figma

Overview

Figma's design system reflects a multi-colored, expressive brand that celebrates collaboration and creativity. Rather than a single dominant brand hue, Figma uses a spectrum of bold colors — green, purple, red, coral, and blue — creating an energetic, playful identity. The interface itself remains restrained so the canvas stays neutral.

Colors

Primary Palette

Token	Hex	Usage
color-green	#0ACF83	Brand primary, Figma logo
color-purple	#A259FF	Brand accent, FigJam
color-red	#F24E1E	Brand accent, notifications
color-coral	#FF7262	Brand accent, highlights
color-blue	#1ABCFE	Brand accent, links

Typography

Role	Family	Size	Weight
Display	Inter	56px	700
Heading	Inter	32px	600
Body	Inter	16px	400
UI Label	Inter	11px	500

Components

Toolbar

• Top bar with tool icons (move, frame, pen, text)
• Active tool: filled icon + blue highlight
• Horizontal dividers between tool groups

Layer Panel

• Left sidebar, tree hierarchy
• Indent lines, expand/collapse triangles
• Lock and visibility toggles per layer

Inspector Panel

• Right sidebar showing selected element properties
• Design / Prototype / Inspect tabs
• Numeric inputs with scrub-to-adjust

Do's and Don'ts

Do

• Use the full brand color palette for marketing — never just one color
• Keep the editor chrome minimal and gray so the canvas stays focused
• Use Inter at 11px for UI labels inside the editor

Don't

• Don't use brand colors for UI controls inside the editor
• Don't use border radius larger than 8px in the app interface
• Don't place heavy visuals that compete with user content on the canvas