design systems / multiplayer canvas / product UI

Make anything possible, all in one collaborative interface.

A flat black-and-white catalog with periwinkle actions, mono labels, workflow pills, product panels, and visible canvas mechanics.

Explore patterns Contact sales
Move
Frame
Shape
Pen
Text
Ana
Dev
PM
35Colors
18Type levels
28Components
87Core tokens

01 / Colors

Black, white, then product-color bursts.

Primary & Action

primary#000000

Text, dark CTAs, footer, outlines.

accent#4D49FC

Periwinkle CTA and docs links.

accentHover#625EFF

Lifted hover action.

accentPressed#3732D9

Pressed action state.

Surfaces

canvas#FFFFFF

White working surface.

surface#F9F9F9

Quiet support ground.

surfaceAlt#E6E6E6

Controls and chips.

softGreenSection#F3FFE3

System story band.

productGraySection#E2E2E2

Product module ground.

Brand-specific Signatures

cursorCyan#33DFDF

Multiplayer cursor cue.

neonLime#E4FF97

Creative FigJam energy.

sitesBlue#00B6FF

Publishing blue.

lavender#C4BAFF

AI and template softness.

signatureCoral#FF7237

Cursor and illustration accent.

success#24CB71

Positive state.

02 / Typography

Large regular-weight headlines, practical UI text.

Make anything possible

display - 72px / 400 / 1.10 / -0.015em / Inter substitute

Design and prototype

hero - 64px / 400 / 1.10 / -0.01em / Inter

Ship products any way you want

headline-lg - 44px / 400 / 1.10 / -0.01em / Inter

Alignment made easy

title-lg - 30px / 400 / 1.30 / -0.01em / Inter

Share libraries across teams.

title-md - 24px / 540 / 1.35 / -0.01em / Inter

Virtual Teleportation Portal App

title-sm - 18px / 450 / 1.40 / -0.005em / Inter

Products, resources, pricing, and login navigation.

nav/body-lg - 18px / 330 / 1.40 / -0.008em / Inter

Components are elements you can reuse across your designs.

body-docs - 16px / 400 / 1.80 / 0em / Inter

TRUSTED BY THE WORLD'S LEADING TEAMS

mono-label - 16px / 400 / 1.30 / 0.04em / Roboto Mono

$15

pricing-display - 44px / 400 / 1.05 / -0.01em / Inter

03 / Buttons

Compact rectangles, pills for modes, circles for tools.

button-primary
button-primary-active
button-black
button-black-active
button-outline
button-ghost
button-pill-tab
button-pill-tab-active
button-icon-circle
button-docs-primary
button-docs-outline

04 / Cards & Surfaces

Flat surfaces and product-first containers.

Systems that scale

Soft green carries the design-system story.

Explore systems

Build from context

Gray bands support screenshot and code panels.

Explore Dev Mode

Creative campaign card

Coral and burgundy create editorial accent.

Open template

Footer-dark utility

Black surfaces are functional, not glossy.

View resources

Mega-menu overlay

Rare elevated surface with broad menu shadow.

Browse products

05 / Brand-Specific Product Patterns

Canvas mechanics make it recognizable.

Design fileselected frame + properties
Ana
FigJam boardsticky notes + live cursors
Launch ideas
Map flows
Review together
PM
Pricing plansborder-led columns
Starter
Free
Professional
$15
Organization
$45
Help Center articledocs reading mode
Figma DesignBuild systemsComponents

Guide to components

Workflow railproduct mode pills

Prompt, code, and design

Mode switching stays pill-shaped; color stays in the canvas.

Multiplayer presencecomments + cursors
Design
Code
Review

06 / Forms

Quiet inputs with blue focus.

Team name is required.

07 / Spacing

4px base, large section jumps.

xs - 4px
sm - 8px
md - 16px
lg - 24px
xl - 40px
xxl - 80px
section - 120px
contentMax - 1173px

08 / Radius

Small controls, huge screenshot corners.

2pxlinks, tiny surfaces
4pxchips, docs crumbs
8pxbuttons, docs controls
16pxselected cards
80pxlarge media panels
9999pxworkflow pills

09 / Elevation

Depth is rare.

This brand uses flat surfaces. Depth comes from screenshots, contrast, borders, and section changes.
Flat surfaceshadow: none
Hairline separator0 1px 0 rgba(0,0,0,.08)
Docs dropdownsmall utility shadow
Mega menularge overlay shadow

10 / Extracted Component Tokens

CSS custom properties.

:root {
  --brand-primary: #000000;
  --brand-accent: #4D49FC;
  --brand-ink: #000000;
  --brand-muted: #697485;
  --brand-canvas: #FFFFFF;
  --brand-surface: #F9F9F9;
  --brand-surface-alt: #E6E6E6;
  --brand-border: #E0E0E0;
  --brand-soft-green-section: #F3FFE3;
  --brand-product-gray-section: #E2E2E2;
  --brand-cursor-cyan: #33DFDF;
  --brand-neon-lime: #E4FF97;
  --brand-signature-coral: #FF7237;
  --font-sans: Inter, system-ui, helvetica, sans-serif;
  --font-mono: Roboto Mono, SF Mono, Menlo, monospace;
  --type-display: 72px;
  --type-hero: 64px;
  --type-headline-lg: 44px;
  --radius-lg: 8px;
  --radius-media: 80px;
  --radius-pill: 9999px;
  --space-section: 120px;
  --shadow-nav: 0px 24px 70px rgba(0,0,0,0.10);
}