Design System
Analysis of Figma

A near-monochrome editorial system — paper-white canvas, ink-black type and CTAs, one 54% grey for secondary voice — energised by a single electric blue (#00B6FF) and set in Figma's proprietary variable grotesque, figmaSans (shown here substituted with Inter).

01 — Foundations

Colour Palette

02 — Foundations

Typography

Hierarchy is built from size and tracking, not weight: regular-weight headlines run huge with tight negative tracking, while body sits a hair heavier (a ~330 variable weight) at a relaxed 1.4 line-height.

03 — Components

Button Variants

button-primary
Solid ink-black, 8px radius, 12x22 padding — Figma's real primary action.
button-accent
The signature #00B6FF. On the live site the blue is reserved for accents, focus and the canvas gradient rather than buttons.
button-secondary
Transparent fill with ink text, sitting beside the primary as the quieter 'Contact sales'.
button-pill
Fully-rounded utility pill on an 8%-black fill, used for tags and minor controls.
link · inline
Figma DesignFigJam
Inline links are ink-black and underlined; the blue accent is spent sparingly.
04 — Components

Cards & Surfaces

Cards are flat by default — a 1px hairline and an 8px radius with no resting shadow. Hover lifts them to the menu-level shadow.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

Built on a 4px base unit, stepping 4 / 8 / 12 / 16 / 24 / 32 / 48 with very large gaps between full-bleed sections.

07 — Foundations

Border Radius

Restrained corners: 8px on buttons and cards, 2-4px on small controls, fully round for avatars and pills.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default — most surfaces are defined by a hairline, not a shadow.
Level 1 — a 1px inset ring at 16% black plus a faint drop, the subtlest possible lift.
Level 2 — reserved for menus and dropdowns — a soft layered shadow that genuinely floats.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; display type drops to ~40px; bands stack but keep their inverted colour.
Tablet768–1023pxTwo-column card galleries; hero headline eases to ~48px.
Laptop1024–1279pxThree-to-four-column galleries; full display scale returns.
Desktop≥ 1280pxCentred wide measure; 56px hero; maximum vertical breathing room.

The layout behaves like an editorial column rather than a dashboard — wide, airy and type-led at every breakpoint.

Pricing Tiers

Figma's real plan ladder rendered in the system's own flat cards, with a black 'most popular' tier standing in for the inverted bands.

Starter
$0 / editor / mo
For individuals trying Figma out.
  • 3 Figma and FigJam files
  • Unlimited collaborators
  • Basic templates and plugins
Professional● Most popular
$16 / editor / mo
For growing product teams.
  • Unlimited files
  • Shared team libraries
  • Dev Mode and version history
  • Audio and voting
Organization
$45 / editor / mo
For whole orgs building together.
  • Org-wide design systems
  • SSO and advanced security
  • Design system analytics
  • Centralized administration

Data Table

A dense table in the same hairline-and-flat language Figma uses across its file and admin views.

IDProjectOwnerStatusWhen
#4821Mobile app redesignA. RiveraActive2h ago
#4820Design system v3J. OkaforActive5h ago
#4815Marketing site refreshL. ChenDraftYesterday
#4809Onboarding flowM. SantosDraft2 days ago
#4802Brand guidelinesR. PatelActive3 days ago
1–5 of 412
‹123›

Auth Forms

Sign-in and sign-up in the system's plain, type-led forms — ink labels, hairline inputs and an SSO fallback.

Sign in

Welcome back

OR
Create account

Create your account

OR