skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-linear.app

Apply Linear's design system tokens, typography, and component styles when building UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#linear#ui design#dark mode#css tokens#inter font
One-click install
npx skills add https://github.com/deepparser/skills --skill design-linear-app-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-linear.app
Source: https://github.com/deepparser/skills/tree/main/design-linear.app
Command: npx skills add https://github.com/deepparser/skills --skill design-linear-app-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Linear's distinctive dark-mode-first visual identity requires exact design tokens that are hard to reverse-engineer, and this Skill provides the complete specification so generated interfaces match Linear's look precisely. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (near-black backgrounds, indigo-violet accent #5e6ad2), Inter Variable typography with cv01/ss03 OpenType features, and signature weight 510. - Component Specifications: Detailed styling for buttons, cards, forms, badges, navigation, and elevation using semi-transparent white borders and luminance-based depth. - Light & Dark Previews: Bundled HTML preview files (preview.html, preview-dark.html) for verifying visual implementation details. - Use Case: When asked to build a landing page or dashboard styled like Linear, the Skill supplies exact hex values, letter-spacing, border radii, and shadow stacks so the output matches Linear's engineered aesthetic. ## Quick Start Build a hero section and feature cards for my product page using the Linear design system style.

Frequently Asked Questions about design-linear.app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like Linear?▼

Use near-black backgrounds (#08090a), Inter Variable font with cv01 and ss03 OpenType features, weight 510 for emphasis, and semi-transparent white borders. Reserve the indigo accent #5e6ad2 for primary CTAs only, and apply negative letter-spacing at display sizes.

What font and colors does Linear use?▼

Linear uses Inter Variable with OpenType features cv01 and ss03, plus Berkeley Mono for code. Its palette is achromatic dark grays (#08090a to #28282c) with a single indigo-violet accent (#5e6ad2 backgrounds, #7170ff interactive).

Does this design system support light mode?▼

Yes, the Skill includes a light theme preview (preview.html) with light neutrals like #f7f8f8 backgrounds and #d0d6e0 borders. However, Linear's identity is dark-mode-native, so dark is the primary reference.

Why does my Linear-style UI look wrong with bold text?▼

Linear never uses weight 700; its maximum is 590, with 510 as the signature emphasis weight. Also verify that font-feature-settings cv01 and ss03 are enabled, since without them Inter looks generic rather than Linear-styled.

How does Linear handle elevation on dark backgrounds?▼

Linear uses background luminance stepping (rgba white at 0.02 to 0.05 opacity) and semi-transparent white borders instead of drop shadows. Inset shadows create sunken panels, and multi-layer shadow stacks are reserved for dialogs and popovers.

Related Skills

Explore More Design & Creative Skills→
RIVO-NoordRIVO-Noord

mockup-forge

Generate UI mockups from wireframes, screen designs, or Excel tables.

Official
Advanced
monang404monang404
2

frontend-mobile-development-component-scaffold

Generates React and React Native components with TypeScript types, tests, styles, and Storybook stories.

Community
Intermediate
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
0xrafasec0xrafasec
9

rlabs-design

Generate branded Rlabs interfaces and assets using the design system.

Community
Advanced