What makes Plasticity's design language stand out?

Plasticity is the rare 3D-tool landing that decided not to put a render reel above the fold — instead it ships a dark reading layer carrying a rainbow-spot palette that only earns its appearance where the page wants you to feel the difference between concept and ship-ready model. We catalogued it because most CAD-adjacent tools confuse 'creative' with 'cluttered'; Plasticity shows how to keep a 320-896 narrow canvas calm while still selling a tool whose superpower is the moment colour finally lands on geometry.

What fonts and palette does Plasticity use?

The type system is matter, auxMono and fkGrotesk. The palette sits on a dark canvas around #FFFFFF, #000000, #68FF21 and #3FD2FB.

Can I transfer Plasticity's design language to my product?

The patterns transfer without cloning. Study how to ship a creative tool without a render reel — Plasticity's hero is type + a single product UI screenshot, and you immediately trust the tool more than if a 4K render were spinning. The ai2 Design brief packages Plasticity's tokens and rules as a paste-ready export for Claude, Cursor, or any coding agent.

Back to gallery

design tools · saas · content

Plasticity

Light-first 3D modelling tool landing that refuses the render-reel-above-fold cliché. Triple-font system — Matter + auxMono + fkGrotesk — assigns each family one register. Four-stop rainbow accent (lime, cyan, magenta, amber) appears only as solid emphasis, never as fill. Narrow 896px canvas, zero gradients, subtle motion — the page is the pause before opening the tool.

plasticity.xyzAdded 2026-05-15

Editorial note

This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.

Fair Use & Gallery Policy

FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Plasticity’s language, not just a screenshot.

Paste into your agent. No signup, no cost.

Dark-first creative-tool canvas. Pure #000000 ground, #ffffff primary ink, #212121 elevated surface for cards. Four-stop rainbow accent: lime #68ff21, cyan #3fd2fb, magenta #f365ff, amber #ffb801 — each used at <3% of surface, never gradient, never combined on one component. Triple-font system: Matter Variable as workhorse (12-16px UI/body), auxMono as data voice (12-13px tables and code), fkGrotesk as display only (24-48px headlines). Narrow 320-896 canvas — the page is a sketchbook, not a brochure. Motion level subtle: 2 transitions only, focused micro-interactions on hover. Zero gradient fills.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (dark-first #000000 canvas + #ffffff ink + four-stop rainbow accent lime/cyan/magenta/amber each at <3% surface as solid fill only — never gradient, never combined), triple-font system (Matter Variable 12-16px UI/body, auxMono 12-13px data and code, fkGrotesk display-only 24-48px headlines), 4px-base spacing scale heavy at 2/4/6/8/10/12, narrow 320-896 canvas, zero gradients, subtle motion (2 transitions), 640/768/1024/1280/1536 breakpoint ladder. Treat this as my project's constitution. Apply the language, not the source brand. When I ask you to build a page or component, enforce these rules by default and call out any deviation.

Layout: Single-column narrow rail; product UI screenshots break out modestly but never to full desktop width.
Content width: 640-896px content rail; mobile collapses to 320-384px.
Framing: Sketchbook spread — narrow, calm, ready for the user to leave for the product.
Grid strength: Implicit 4px grid; reading rhythm comes from typography size jumps and the four-stop accent placements.

Pure white + black ink hold the page; four-stop rainbow accent appears only where emphasis is earned, always as solid fill, never combined.

Mode strategyLight-first; dark variant possible but not present in capture.

#ffffff for primary background, #f8f8f8 acceptable for subtle section zoning
#000000 for body ink, #212121 for elevated surfaces (rare dark moments)
#68ff21 lime: success states, primary CTA when context demands optimism
#3fd2fb cyan: secondary CTAs, link hover, info badges
#f365ff magenta: hero accents, brand voice moments
#ffb801 amber: highlight tags, attention chips
Each accent ≤3% of total surface; never two accents in one component

Gradients (paste-ready)

Zero gradient fills — accent colours appear as solid only, never as backdrop atmosphere

Matter Variable for all UI, body, captions, labels (12-16px range)
auxMono for data tables, code blocks, technical metadata (12-13px)
fkGrotesk display-only for headlines (24-48px) — never below 20px
Weights: Matter 400/500, auxMono 400/500, fkGrotesk 400 only
Line-height 1.4-1.5 body, 1.1-1.2 display
Letter-spacing 0 across all three families — natural optical alignment

4px base unit, heaviest use at 2/4/6/8/10/12px
Section vertical rhythm: 64-96px between major blocks (narrow canvas demands tighter rhythm)
Card internal padding: 16-20px standard
CTA padding: 10-12px vertical / 18-22px horizontal

Surface styleCards float subtly via 1px hairline; 2 shadow variants total; no glassmorphism, no inner glow.

2 shadow variants only — minimal system
Hover lift: 1-2px Y + shadow opacity bump
Focus state: rainbow accent ring (whichever colour matches context)

Techniques

Sketchbook card

1px #e5e5e5 hairline + 0 4px 12px rgba(0,0,0,0.06) shadow; no inner glow.

Accent-tinted highlight

Background tint at 8% alpha of the accent colour for callout sections.

Radii2 / 4 / 6 / 8Icon treatmentStroke 1.5px, monoline; rare filled icon allowed for accent surfaces.Icon setsCustom monoline set

Buttons: 4-6px radius
Cards: 6-8px radius
Section dividers: hairlines only, no rounded corners

Primary CTA (lime)
background
#68ff21
textColor
#000000
fontFamily
Matter
fontWeight
500
fontSize
14px
padding
10px 18px
borderRadius
6px
shadow
0 4px 12px rgba(104,255,33,0.32)
hover
background shifts to #7fff3d + shadow expand
Tailwind
```
inline-flex items-center gap-2 rounded-md bg-[#68ff21] px-5 py-2.5 text-sm font-medium text-black shadow-[0_4px_12px_rgba(104,255,33,0.32)] transition hover:bg-[#7fff3d]
```
Sketchbook feature card
background
#ffffff
border
1px solid #e5e5e5
borderRadius
8px
padding
20px
shadow
0 4px 12px rgba(0,0,0,0.06)
Tailwind
```
rounded-lg border border-[#e5e5e5] bg-white p-5 shadow-[0_4px_12px_rgba(0,0,0,0.06)]
```

LevelsubtleDurations150ms / 220ms

Easings

cubic-bezier(0.4, 0, 0.2, 1)

HoverCard lift 1-2px + shadow bump, Button background shifts to lighter variant of accent, Icon scale 1.02 on hover (subtle)

Scroll patterns

Fade-in only — no translate, no parallax (motion level: subtle)
Sticky nav fades in after 80px scroll

Motion is the rare exclamation — most interactions stay still
Respect prefers-reduced-motion: disable all transitions
Never autoplay any animation

Hover lifts cards barely — almost imperceptible
Focus rings: context-matched accent colour (lime for primary, cyan for info, etc.)
Active state: button background shifts to 90% lightness, no scale change

Approachmobile-first

Tailwind defaults (640/768/1024/1280/1536); canvas never uses the full 1536.

<768: 16px gutter, 320-384px rail, single column
768-1024: 640-720px rail, basic 2-col grid
≥1024: 896px rail max — never wider, even on 27" monitors

WCAG AAA on body text (#000 on #fff is 21:1)
Rainbow accents on white: lime fails AA for text (use only for surface fills + iconography); cyan/magenta/amber pass for UI text
Focus rings use a 2px solid ring of the accent in context

Next.js with preloaded woff2 fontsWebP product UI screenshotsCustom Matter/auxMono fonts

Product UI screenshots dominate visual content; brief illustrations only as section dividers.

3 preloaded woff2 fonts (Matter Variable, auxMono, fkGrotesk)
Accent colours defined as CSS custom properties for easy theme variants

Use Matter for UI, auxMono for data, fkGrotesk for display — never overlap
Reserve rainbow accents for true emphasis — under 3% of surface each
Keep the canvas narrow — 896px max
Stay still — motion belongs only to state changes

Don't paint surfaces in lime or cyan — accents are solid fills only, not backgrounds
Don't combine two accents in one component — they fight each other
Don't widen the canvas beyond 896 — Plasticity's confidence lives in the narrow rail
Don't add gradient fills — accent colours are solid only

Light-only — no dark variant in capture
Three-font system: Matter + auxMono + fkGrotesk, no fourth
Each accent ≤3% of surface — measure before shipping
Zero gradients

Font-family grep: only `Matter`, `auxMono`, `fkGrotesk` appear
Background colour grep: only `#ffffff` (and rare `#212121` elevated)
Accent colour count: each of lime/cyan/magenta/amber appears <3% per viewport
Gradient grep: zero `linear-gradient` or `radial-gradient` in fills
Canvas width: max-w never exceeds 896px

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 8 nodes across 5 levels, shallow to deep by color.

body2
- div (×2)1
  - Header1
    - div1
      - Nav
- Main2
  - Section (×7)
  - Footer

Accessibility

28 combinations - 20 pass AA - 18 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

fg: #FFFFFF
bg: #000000
APCA Lc: -108
Use: background on foreground

fg: #000000
bg: #FFFFFF
APCA Lc: +106
Use: foreground on background

fg: #FFFFFF
bg: #212121
APCA Lc: -106
Use: background on foreground

fg: #212121
bg: #FFFFFF
APCA Lc: +103
Use: foreground on background

fg: #000000
bg: #68FF21
APCA Lc: +88
Use: foreground on brand

fg: #68FF21
bg: #000000
APCA Lc: -88
Use: brand on foreground

fg: #68FF21
bg: #212121
APCA Lc: -86
Use: brand on foreground

fg: #212121
bg: #68FF21
APCA Lc: +85
Use: foreground on brand

fg: #000000
bg: #FFB801
APCA Lc: +73
Use: foreground on accent

Images

Image strategy

Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.

Total images

Lazy loaded

Format mix

unknown12 · 67%
svg6 · 33%

Industry: design-tools
Industry: saas
Industry: content
Theme: Dark
Added: 2026-05-15

FAQ

Questions people ask about Plasticity

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Plasticity

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Image strategy

Questions people ask about Plasticity

Plasticity

Editorial disclaimer

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Contrast matrix

Image strategy

Questions people ask about Plasticity

01What makes Plasticity's design language stand out?

02What fonts and palette does Plasticity use?

03Can I transfer Plasticity's design language to my product?

Side-by-side reads sharing this design signal.

More in this design language