Trackline Design System

Trackline is a modern project management tool built with a dark-first design philosophy. The system prioritizes information density, keyboard-driven interactions, and a muted palette that keeps focus on content.

Source: · Platform: Website: Next.js · App: Electron desktop (macOS + Windows) / Web · Theme: dark-first

Design Principles

Minimal chrome, high information density, keyboard-first navigation, consistent 4px spatial grid, and restrained use of the signature brand accent. The interface uses layered background levels (#08090a to #191a1b) to create depth without relying on shadows.

Key Tokens

Brand Purple	#5e6ad2
Accent	#7170ff
Primary BG	#08090a
Primary Text	#f7f8f8
Font Stack	"Inter Variable", SF Pro Display, system
Base Spacing	4px
Border Radius (default)	6px

Colors

Trackline uses a layered dark palette with subtle background elevation levels, a restrained accent palette, and semantic status colors shared between website and app.

Brand

#5e6ad2

brand-primary

#7170ff

accent

#828fff

accent-hover

#18182f

accent-tint

Dark Backgrounds

#08090a

bg-primary

#0f1011

bg-panel

#141516

bg-level-2

#191a1b

bg-level-3

#1c1c1f

bg-secondary

#232326

bg-tertiary

#28282c

bg-quaternary

Dark Borders

#23252a

border-primary

#34343a

border-secondary

#3e3e44

border-tertiary

Dark Text

#f7f8f8

text-primary

#d0d6e0

text-secondary

#8a8f98

text-tertiary

#62666d

text-quaternary

#828fff

link-primary

Dark Lines

#37393a

line-primary

#202122

line-secondary

#18191a

line-tertiary

#141515

line-quaternary

Core Status

#4ea7fc

blue

#eb5757

red

#27a644

green

#fc7840

orange

#f0bf00

yellow

#00b8cc

teal

Product Colors

#68cc58

Trackline-plan

#d4b144

Trackline-build

#7a7fad

Trackline-security

Light Theme

#ffffff

bg-primary

#f9f8f9

bg-secondary

#f4f2f4

bg-tertiary

#282a30

text-primary

#3c4149

text-secondary

#6f6e77

text-tertiary

#7070ff

link / brand-bg

Glass Theme

#000212

bg-primary

rgb 0.03

bg-secondary

rgb 0.07

bg-tertiary

#f7f8f8

text-primary

#b4bcd0

text-secondary

App: Issue Status

Backlog

#62666d

Todo

#e2e2e2

In Progress

#f0bf00

Done

#27a644

Cancelled

#62666d

App: Priority

Urgent / High

#fc7840

Medium

#f0bf00

Low

#4ea7fc

No Priority

#62666d

Typography

Trackline uses Inter Variable as its primary typeface, with Berkeley Mono for code and Tiempos Headline for editorial content. Font weights use optical sizing values (510, 590, 680) rather than standard increments.

Font Families

Regular	"Inter Variable", "SF Pro Display", system
Monospace	"Berkeley Mono", ui-monospace, "SF Mono", Menlo
Serif Display	"Tiempos Headline", ui-serif, Georgia

Font Weights

Light	300
Normal	400
Medium	510
Semibold	590
Bold	680

Title Scale (Website)

Title 9

Size	4.5rem
Line Height	1.0
Letter Spacing	-0.022em
Weight	590

Title 6

Size	3rem
Line Height	1.0
Letter Spacing	-0.022em
Weight	590

Title 4

Size	2rem
Line Height	1.125
Letter Spacing	-0.022em
Weight	590

Title 3

Size	1.5rem
Line Height	1.33
Letter Spacing	-0.012em
Weight	590

Title 2

Size	1.25rem
Line Height	1.33
Letter Spacing	-0.012em
Weight	590

Title 1

Size	1.0625rem
Line Height	1.4
Letter Spacing	-0.012em
Weight	590

Body Scale (Website)

Body Large -- The quick brown fox jumps over the lazy dog.

Size	1.0625rem
Line Height	1.6

Body Regular -- The quick brown fox jumps over the lazy dog.

Size	0.9375rem
Line Height	1.6
Letter Spacing	-0.011em

Body Small -- The quick brown fox jumps over the lazy dog.

Size	0.875rem
Line Height	1.5
Letter Spacing	-0.013em

Body Mini -- The quick brown fox jumps over the lazy dog.

Size	0.8125rem
Line Height	1.5

Body Micro -- The quick brown fox jumps over the lazy dog.

Size	0.75rem
Line Height	1.4

Body Tiny -- The quick brown fox jumps over the lazy dog.

Size	0.625rem
Line Height	1.5

App Font Sizes

Micro	0.6875rem (11px)
Mini	0.75rem (12px)
Small	0.8125rem (13px)
Regular	0.9375rem (15px)
Large	1.125rem (18px)

Marketing Font Sizes

Title 1	2.25rem (36px)
Title 2	1.5rem (24px)
Title 3	1.25rem (20px)

Spacing

Trackline uses a 4px base unit with an 8-step scale. All spacing values are multiples of 4px, creating a consistent rhythm throughout the interface.

Spacing Scale

0px

4px

8px

12px

16px

24px

32px

48px

64px

Borders & Shadows

Border Radii

4pxradius-4

6pxradius-6

8pxradius-8

12pxradius-12

16pxradius-16

24pxradius-24

32pxradius-32

pillrounded

circle50%

Border Widths

Default	1px
Hairline	0.5px

Shadows

None

Low2px 4px

Medium4px 24px

High7px 32px

Stack Lowlayered

Buttons

Trackline buttons are compact (5px 8px padding) with 6px radius and medium weight (510). The primary button uses the brand purple.

Website Buttons

App Buttons

App buttons share the same style tokens but are used in denser contexts like toolbars and dialogs.

Button Specs

Primary BG	#5e6ad2 → hover #6e79db
Secondary BG	rgba(255,255,255,0.08) → hover 0.12
Ghost BG	transparent → hover rgba(255,255,255,0.05)
Danger BG	#eb5757 → hover #f06868
Padding	5px 8px
Border Radius	6px
Font Size	0.8125rem (13px)
Font Weight	510

Cards

Cards use layered backgrounds (level-2 / level-3) with primary borders. The app uses issue rows as its primary data display pattern rather than traditional cards.

Feature Cards (Website)

Issue Tracking

Create, manage, and track issues across your team with powerful filtering.

Cycles

Organize work into time-boxed iterations to maintain a steady development pace.

Roadmaps

Plan and visualize long-term product direction with cross-team projects.

Issue List (App)

TRK-142

Add keyboard shortcuts to settings panel

Medium

TRK-143

Design token export to Figma

High

TRK-138

Migrate to new color system

Done

TRK-139

Update documentation for API v2

Low

Card Specs

Background	#141516 (bg-level-2)
Border	1px solid #23252a
Border Radius	8px
Hover Background	#191a1b (bg-level-3)
Issue Row Height	36px
Issue Row Hover	rgba(255,255,255,0.03)
Selected Row	rgba(94,106,210,0.12)

Navigation

Trackline has two distinct navigation patterns: the marketing website header and the app sidebar with command menu.

Website Header

Trackline

Features Method Customers Changelog Pricing

Height	72px
Backdrop Blur	20px
Background	rgba(8,9,10,0.8) (translucent)
Link Color	#8a8f98 → hover #f7f8f8

App Sidebar

Width	240px (collapsed: 48px)
Background	#0f1011
Item Height	28px
Item Padding	4px 12px
Item Radius	6px
Item Hover	rgba(255,255,255,0.05)
Item Active	rgba(255,255,255,0.08)
Icon Size	16px

Command Menu (App)

Width	640px
Max Height	440px
Background	#1c1c1f
Border	1px solid #34343a
Border Radius	12px
Shadow	0px 7px 32px rgba(0,0,0,0.35)
Input Height	48px
Result Height	36px
Result Hover	rgba(255,255,255,0.05)

Keyboard Shortcuts

CNew Issue

Cmd+KCommand Menu

/Search

IInbox

BBoard View

LList View

Alt+1My Issues

Alt+2Active

Alt+3Backlog

G SSettings

Cmd+ZUndo

Cmd+Shift+CCopy ID

Desktop App (Mac & PC)

The macOS and Windows apps are Electron shells wrapping the identical web UI, so every component is the same across web, Mac, and PC. Only the native window chrome differs: a frameless window (background #08090a) with a ~44px drag region, macOS traffic lights inset ~20px/18px with a native menu bar, and custom Windows caption buttons (46×32px, close hover #e81123) with an in-app menu. On Windows all Cmd shortcuts map to Ctrl. See the App reference (design-system-app.html) for the full component library, desktop chrome, view options, property pickers, roadmap timeline, issue composer, and settings.

Inputs

Form controls in Trackline use the secondary background with secondary borders. Focus states use the brand purple for both border and ring.

Text Inputs

Default

Focused

Disabled

Input Specs

Background	#1c1c1f
Border	1px solid #34343a
Border Radius	6px
Padding	6px 12px
Font Size	0.8125rem (13px)
Text Color	#f7f8f8
Placeholder	#62666d
Focus Border	#5e6ad2
Focus Ring	0 0 0 2px #5e6ad2

Toggles

Off

Width	32px
Height	18px
Off Background	#34343a
On Background	#5e6ad2
Thumb Size	14px

Badges

Feature Improvement Bug Urgent Medium Low

Border Radius	9999px (pill)
Padding	2px 8px
Font Size	0.6875rem (11px)
Font Weight	510

Tooltip

Keyboard shortcut: Cmd+K

Background	#232326
Border Radius	6px
Padding	4px 8px
Font Size	0.75rem (12px)
Shadow	0px 4px 24px rgba(0,0,0,0.2)

Context Menu

Copy link

Set status

Delete

Modal / Dialog

Background	#1c1c1f
Border	1px solid #34343a
Border Radius	12px
Padding	24px
Shadow	0px 7px 32px rgba(0,0,0,0.35)
Overlay	rgba(0,0,0,0.85)

Toast

Background	#1c1c1f
Border	1px solid #34343a
Border Radius	8px
Padding	12px 16px
Shadow	0px 4px 24px rgba(0,0,0,0.2)

Layout

Trackline uses a 12-column grid with specific max-widths for different content contexts. The app layout consists of a fixed sidebar, a top header bar, and a scrollable content area.

Website Layout

Header Height	72px
Header Blur	20px
Page Padding Inline	24px
Page Padding Block	64px
Page Max Width	1024px
Prose Max Width	624px
Homepage Max Width	1344px
Homepage Outer Padding	46px
Homepage Padding Inset	32px
Grid Columns	12
Page Inset	32px

Breakpoints

Mobile	640px
Tablet	768px
Laptop	1024px
Desktop	1280px

App Layout

Sidebar Width	240px (collapsed: 48px)
Sidebar Background	#0f1011
Header Height	44px
Header Background	#08090a
Header Border	1px solid #23252a

Z-Index Scale

layer-1	1
layer-2	2
layer-3	3
footer	50
scrollbar	75
header	100
overlay	500
popover	600
command-menu	650
dialog-overlay	699
dialog	700
toasts	800
tooltip	1100
context-menu	1200
skip-nav	5000
max	10000

Motion

Trackline uses restrained, fast animations. Most transitions are 150ms ease, keeping the interface feeling snappy and responsive without unnecessary flourish.

Duration Scale

Fastest	0.1s (100ms)
Fast	0.15s (150ms)
Normal	0.25s (250ms)
Slow	0.35s (350ms)
Highlight Fade Out	0.15s (150ms)

Transition Presets

Opacity	opacity 0.15s ease
Transform	transform 0.15s ease
Opacity + Transform	opacity 0.15s ease, transform 0.15s ease
Stroke Dash	transform 0.6s, stroke-dashoffset 0.6s

Interactive Examples

Fastest0.1s

Fast0.15s

Normal0.25s

Slow0.35s

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`0px 4px 24px rgba(0,0,0,0.2)`	`{'max': '640px'}`
App / Portal	`#7170ff`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-medium px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-medium p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.