Design System Audit

linearity.io
Visual Language

Complete design system extracted from www.linearity.io — every token, component, interaction pattern, and accessibility note, all from real values.

4Color tokens
10Type styles
1Case studies
AcidGroteskSubsetPrimary font
01 — Foundations

Color Palette

All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.

primary

#000000

Dominant — text, background

21.00:1 on page bg #ffffff · AAA ✓

white

#ffffff

Dominant — background, text

1.00:1 on page bg #ffffff · fails AA

ink-deepest

#111717

Major — background

18.12:1 on white · AAA ✓

text

#c3c5c5

Accent — text

1.73:1 on page bg #ffffff · fails AA
02 — Foundations

Typography

Single font family: AcidGroteskSubset — used across all roles.

RoleSpecsSampleUsed on
Body
AcidGroteskSubset
16px / 400
lh 1.50
Use caseschevron-down icon
HTML element · 42 uses · real site copy
Body
AcidGroteskSubset
16px / 400
lh 1.50
Use caseschevron-down icon
SECTION element · 17 uses · real site copy
Body
AcidGroteskSubset
88px / 400
lh 1.00
Design. Illustrate. Animate. Anywhere inspiration strikes.
H1 element · 14 uses · real site copy
Body
AcidGroteskSubset
16px / 400
Use caseschevron-down icon
DIV element · 14 uses · real site copy
Body
AcidGroteskSubset
16px / 500
lh 1.63
Use caseschevron-down icon
SPAN element · 8 uses · real site copy
Body
AcidGroteskSubset
16px / 400
lh 1.63
Use caseschevron-down icon
P element · 4 uses · real site copy
Micro
AcidGroteskSubset
12px / 500
lh 1.58
Editor's Choice
P element · 3 uses · real site copy
Link
AcidGroteskSubset
16px / 500
lh 1.50
Use caseschevron-down icon
A element · 1 uses · real site copy
Body
AcidGroteskSubset
88px / 400
lh 1.30
Design. Illustrate. Animate. Anywhere inspiration strikes.
SPAN element · 1 uses · real site copy
Link
AcidGroteskSubset
20px / 400
lh 1.00
Get Started
A element · 1 uses · real site copy
03 — Components

Navigation

Nav demo using extracted colors, font, real link labels and the site's real logo.

nav · demo using extracted tokens & real links
linearity.io logo linearity.io
Get started for free
© 2026 Linearity GmbH. All rights reserved
Extracted nav tokens
Background#000000
Text color#ffffff
Font familyAcidGroteskSubset
Links (extracted)Get started for free
Copyright (extracted)© 2026 Linearity GmbH. All rights reserved

Layout values (height, padding, link states) are demo styling — not extracted from the site.

04 — Components

Button Variants

Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 9999px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #000000 · color #ffffff · radius: 9999px

btn-secondary · outlined demo

Demo variant — outlined treatment of the extracted primary color #000000.

btn-ghost · text-only demo

Demo variant — text-only treatment of the extracted primary color.

btn-disabled · demo state

Generic disabled-state demo — not extracted from the site.

05 — Components

Cards & Surfaces

Flat design system — no box-shadows. Depth is communicated through background contrast and borders.

section surface

bg #ffffff · text #000000

hero surface

bg #000000 · text #000000

06 — Components

Project Cards

Real case studies found on the scraped site — titles and URLs extracted from live links.

WORKSPACES

Workspaces

/features/workspaces/

07 — Components

Form Elements

Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.

Contact form — site-styled demo

linearity.io
Get in Touch

Input states
input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #000000.

select · dropdown
08 — Foundations

Spacing Scale

Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.

8px
sm
12px
md
21px
lg
180px
section
768px
section-2
09 — Foundations

Border Radius

Corner radius tokens observed across components. All values extracted from live stylesheet.

9999px
full
9999px

⚠️ 9999px exceeds any component size — likely from an oversized decorative element (effectively a pill shape), not a reusable radius token.

10 — Foundations

Elevation & Depth

Fully flat design — zero box-shadow usage. Depth communicated through background-color contrast and 1px borders.

Level 0 — Page Canvas

bg #ffffff — the outermost layer. Everything sits on top of this.

Level 1 — Card Surface

bg #ffffff with 1px border. No shadow — white lift creates elevation via contrast.

Dark Section

bg #000000 — depth through color contrast, no shadows.

11 — Interactions

Motion

Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.

hover demo · using extracted tokens

Demo transitions use the fastest extracted duration (0.15s cubic-bezier(.4,0,.2,1)).

idle vs hover · frozen demo states

Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.

Motion tokens (extracted)
TokenValueOccurrences
duration-fast0.15s9× in stylesheet
duration-base0.2s7× in stylesheet
duration-slow0.3s12× in stylesheet
duration-slower0.4s5× in stylesheet
duration-slowest2s2× in stylesheet
easing-1cubic-bezier(.4,0,.2,1)13× in stylesheet
easing-2ease4× in stylesheet
easing-3ease-out3× in stylesheet
12 — Responsive

Responsive Behavior

Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.

BreakpointBoundaryUsage
Mobile480px3 @media rules
Tablet640px3 @media rules
Tablet-2768px14 @media rules
Desktop1024px6 @media rules
Wide1280px11 @media rules
480px
640px
768px
1024px
1280px

Extracted from https://www.linearity.io/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted asset
linearity.io logo

https://a.storyblok.com/f/197805/145x32/ffe969d60a/leapsome_id7lqp9j-8_6.svg

Brand asset — logo apple
logo apple

https://a.storyblok.com/f/197805/39x52/d7ba9bc276/logo-apple.svg

Brand asset — google logo wine 1
google logo wine 1

https://a.storyblok.com/f/197805/105x34/b4340be2f1/google-logo-wine-1.svg

Social links found on site
Instagram ↗ Twitter / X ↗ YouTube ↗ LinkedIn ↗
Icon system

No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.