Figma — Design System

Colors

UI Accent

brand-primary#4D49FCCurrent brand primary

brand-blue#0D99FFInteractive, selected

brand-purple#A259FFLogo mark

Surfaces

bg#FFFFFFPrimary panel

bg-secondary#F5F5F5Secondary surface

bg-tertiary#EBEBEBFills, hover

border#E6E6E6Default borders

Semantic

danger#F24822Errors, destructive

warning#FFCD29Warnings

success#14AE5CConfirmations

Typography

display-2xl

900 · −0.04em

Design tools

72px900

display-xl

700 · −0.03em

Collaborate in real time

60px700

display-md

600 · −0.01em

The world's best design teams

36px600

text-xl

400

Everything you need to design at scale.

20px400

text-sm

400

Standard body text and UI copy.

14px400

ui-mono

mono · 400

#0D99FF · X: 240 · Y: 160 · W: 320 · H: 180

11pxmono

Components

Canvas & toolbar

Frame · 320 × 180

Layers panel

Layers

▣Hero Section

⬚Frame

THeading

⬚Button / Primary

▣Navigation

▣Footer

Buttons

Inputs & badges

Component Instance Auto layout Draft

◆Button/Primary4 variants

Interactive

◆Input/Default6 variants

Form element

Label

◆Badge/Brand8 variants

Status

◆Avatar/Stack3 sizes

Collaboration

Spacing

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-5

20px

space-6

24px

space-8

32px

space-12

48px

Guardrails

DO

Use purple (#A259FF) as brand accent — not for informational states (use blue for info)

Keep backgrounds neutral (#FFFFFF, #F5F5F5) and let illustrations carry color

Apply semantic tokens over raw hex values in plugin and product code

Show blue focus ring on all interactive elements for keyboard accessibility

Use #F24822 (Figma Red) consistently for all destructive and error states

DON'T

Use brand purple or blue as full-surface backgrounds — accents only

Use decorative shadows on flat app UI — reserve for floating surfaces and modals

Use full black #000000 for text — the system uses rgba(0,0,0,0.9)

Rely on color alone to communicate state — always pair with icon, label, or shape

Exceed 6 colors in a single component or layout section