Linear Ui Skills

If you're building something that needs to look like Linear, this gives you the exact constraints: Inter font, 4px grid spacing, that specific dark background (#080A0A), and their semantic color tokens. It's opinionated about typography hierarchy (60px bold headings, 17px body), border radius (6px or 8px only), and keeps you from adding animations unless explicitly asked. The focus state specs and accessibility requirements are built in. Honestly most useful if you're prototyping a B2B SaaS interface and want that polished, minimal aesthetic without second-guessing every spacing decision. It won't make your app Linear, but it'll keep the AI from inventing arbitrary values.

skills.sh installs: 417
GitHub stars: 105
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ihlamury/design-skills --skill linear-ui-skills --agent claude-code

Installs into .claude/skills of the current project.

Files

Linear UI Skills

Opinionated constraints for building Linear-style interfaces with AI agents.

When to Apply

Reference these guidelines when:

Building dark-mode interfaces
Creating Linear-inspired design systems
Implementing UIs with Inter font and 4px grid

Colors

MUST use dark backgrounds (lightness < 20) for primary surfaces - detected lightness: 4
MUST use #080A0A as page background (surface-base)
SHOULD limit color palette to 10 distinct colors
MUST maintain text contrast ratio of at least 4.5:1 for accessibility

Semantic Tokens

Token	HEX	RGB	Usage
`surface-base`	#080A0A	rgb(8,10,10)	Page background
`surface-raised`	#D2D2D3	rgb(210,210,211)	Cards, modals, raised surfaces
`surface-overlay`	#E3E3E6	rgb(227,227,230)	Overlays, tooltips, dropdowns
`text-primary`	#5C5C5C	rgb(92,92,92)	Headings, body text
`text-secondary`	#2D2E30	rgb(45,46,48)	Secondary, muted text
`text-tertiary`	#444749	rgb(68,71,73)	Additional text
`border-default`	#B0B1B1	rgb(176,177,177)	Subtle borders, dividers