HomeStylesTemplates
Back
L
Linear Style
Precision. Restraint. Developer aesthetics.

Linear Style

Every pixel has a purpose. A design language built for tools that developers love — precise typography, subtle borders, and restrained color.

Issue Board

The core interface — dense, scannable, keyboard-driven.

CNew issue
Issue
Label
Priority
Assignee
Est.
STY-281Implement dark mode token system
Feature
AX
2d
STY-282Fix border-radius inconsistency in card components
Bug
KL
4h
STY-283Add keyboard shortcut overlay for command menu
Feature
AX
1d
STY-284Optimize SVG icon bundle size
Perf
MR
3h
STY-285Design token documentation for spacing scale
Docs
KL
6h
STY-286Audit color contrast ratios for WCAG AA
A11y
MR
1d
STY-287Migrate to CSS custom properties for theming
Refactor
AX
3d

Design Tokens

The precise values behind the aesthetic.

Color Palette

Background
#0a0a0b
Surface
white/3%
Surface Hover
white/6%
Border
white/10%
Brand
#5e6ad2
Text Primary
zinc-200
Text Secondary
zinc-400
Text Muted
zinc-500

Surface & Border Hierarchy

Surface Level 1
bg-white/[0.02] + border-white/10
Cards, panels, containers
Surface Level 2
bg-white/[0.05] + border-white/10
Hover states, active rows
Elevated Surface
bg-[#161618] + backdrop-blur
Modals, command palette, dropdowns

Typography Scale

Display
Build software
text-4xl font-semibold tracking-tight
Title
Project Overview
text-2xl font-semibold tracking-tight
Heading
Active Sprint
text-lg font-medium tracking-tight
Body
Issues are the building blocks of your project.
text-sm font-normal normal
Caption
Updated 2 hours ago by @anxforever
text-xs font-normal normal
Label
STATUS / PRIORITY / LABEL
text-[10px] font-medium tracking-wider uppercase

Components

Restrained, functional, keyboard-first.

Design Rules

The constraints that define the aesthetic.

Do

  • +Near-black background: bg-[#0a0a0b] or bg-zinc-950
  • +1px semi-transparent borders: border-white/10
  • +Text hierarchy via zinc scale: zinc-100, zinc-400, zinc-500
  • +Brand indigo #5e6ad2 only for CTAs and active states
  • +Inter font, tracking-tight, text-sm as default body
  • +Opacity-based hover: hover:bg-white/[0.05]
  • +Fast transitions: duration-150 ease-out
  • +Kbd hints for keyboard shortcuts

Don't

  • -White or light backgrounds
  • -Large border-radius (rounded-2xl or above)
  • -Colored shadows or shadow-xl
  • -Multiple font families
  • -High-saturation colors (except brand purple)
  • -Decorative blobs, gradients, or noise textures
  • -Scale transforms on hover (hover:scale-105)
  • -Slow transitions (duration-500+)

Sidebar Navigation

Compact, hierarchical, workspace-aware.

S
StyleKit
Home
Inbox3
My Issues
Views
Teams
S
StyleKitSTY
D
Design SystemDSN
I
InfrastructureINF

Interaction Physics

Fast, precise, no theatrics. Hover each element to feel the difference.

Opacity Transition

Primary buttons use opacity for hover — no color shift, no scale.

hover:opacity-90 / duration-150

Surface Hover

List items and cards brighten their surface on hover.

Active sprint
Backlog
Completed
hover:bg-white/[0.05] / duration-150

Focus State

Inputs use a subtle brand-colored border on focus.

focus:border-[#5e6ad2]/50

Speed Matters

150ms is the sweet spot. Compare with slower transitions.

150ms
Correct
500ms
Too slow

Linear Style Showcase · Part of StyleKit