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 brushwork that keeps focus on content.

Source: · Platform: Next.js · 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 Spacing4px
Border Radius (default)6px

Colors

Trackline uses a layered dark brushwork with subtle background elevation levels, a restrained accent brushwork, 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

Light300
Normal400
Medium510
Semibold590
Bold680

Title Scale (Website)

Title 9
Size4.5rem
Line Height1.0
Letter Spacing-0.022em
Weight590
Title 6
Size3rem
Line Height1.0
Letter Spacing-0.022em
Weight590
Title 4
Size2rem
Line Height1.125
Letter Spacing-0.022em
Weight590
Title 3
Size1.5rem
Line Height1.33
Letter Spacing-0.012em
Weight590
Title 2
Size1.25rem
Line Height1.33
Letter Spacing-0.012em
Weight590
Title 1
Size1.0625rem
Line Height1.4
Letter Spacing-0.012em
Weight590

Body Scale (Website)

Body Large -- The quick brown fox jumps over the lazy dog.
Size1.0625rem
Line Height1.6
Body Regular -- The quick brown fox jumps over the lazy dog.
Size0.9375rem
Line Height1.6
Letter Spacing-0.011em
Body Small -- The quick brown fox jumps over the lazy dog.
Size0.875rem
Line Height1.5
Letter Spacing-0.013em
Body Mini -- The quick brown fox jumps over the lazy dog.
Size0.8125rem
Line Height1.5
Body Micro -- The quick brown fox jumps over the lazy dog.
Size0.75rem
Line Height1.4
Body Tiny -- The quick brown fox jumps over the lazy dog.
Size0.625rem
Line Height1.5

App Font Sizes

Micro0.6875rem (11px)
Mini0.75rem (12px)
Small0.8125rem (13px)
Regular0.9375rem (15px)
Large1.125rem (18px)

Marketing Font Sizes

Title 12.25rem (36px)
Title 21.5rem (24px)
Title 31.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

0
0px
1
4px
2
8px
3
12px
4
16px
5
24px
6
32px
7
48px
8
64px

Borders & Shadows

Border Radii

4pxradius-4
6pxradius-6
8pxradius-8
12pxradius-12
16pxradius-16
24pxradius-24
32pxradius-32
pillrounded
circle50%

Border Widths

Default1px
Hairline0.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 BGrgba(255,255,255,0.08) → hover 0.12
Ghost BGtransparent → hover rgba(255,255,255,0.05)
Danger BG#eb5757 → hover #f06868
Padding5px 8px
Border Radius6px
Font Size0.8125rem (13px)
Font Weight510

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)
Border1px solid #23252a
Border Radius8px
Hover Background#191a1b (bg-level-3)
Issue Row Height36px
Issue Row Hoverrgba(255,255,255,0.03)
Selected Rowrgba(94,106,210,0.12)

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
Border1px solid #34343a
Border Radius6px
Padding6px 12px
Font Size0.8125rem (13px)
Text Color#f7f8f8
Placeholder#62666d
Focus Border#5e6ad2
Focus Ring0 0 0 2px #5e6ad2

Toggles

Off
On
Width32px
Height18px
Off Background#34343a
On Background#5e6ad2
Thumb Size14px

Badges

Feature Improvement Bug Urgent Medium Low
Border Radius9999px (pill)
Padding2px 8px
Font Size0.6875rem (11px)
Font Weight510

Tooltip

Keyboard shortcut: Cmd+K
Background#232326
Border Radius6px
Padding4px 8px
Font Size0.75rem (12px)
Shadow0px 4px 24px rgba(0,0,0,0.2)

Context Menu

Copy link
Set status
Delete

Modal / Dialog

Background#1c1c1f
Border1px solid #34343a
Border Radius12px
Padding24px
Shadow0px 7px 32px rgba(0,0,0,0.35)
Overlayrgba(0,0,0,0.85)

Toast

Background#1c1c1f
Border1px solid #34343a
Border Radius8px
Padding12px 16px
Shadow0px 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 Height72px
Header Blur20px
Page Padding Inline24px
Page Padding Block64px
Page Max Width1024px
Prose Max Width624px
Homepage Max Width1344px
Homepage Outer Padding46px
Homepage Padding Inset32px
Grid Columns12
Page Inset32px

Breakpoints

Mobile640px
Tablet768px
Laptop1024px
Desktop1280px

App Layout

Sidebar Width240px (collapsed: 48px)
Sidebar Background#0f1011
Header Height44px
Header Background#08090a
Header Border1px solid #23252a

Z-Index Scale

layer-11
layer-22
layer-33
footer50
scrollbar75
header100
overlay500
popover600
command-menu650
dialog-overlay699
dialog700
toasts800
tooltip1100
context-menu1200
skip-nav5000
max10000

Motion

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

Duration Scale

Fastest0.1s (100ms)
Fast0.15s (150ms)
Normal0.25s (250ms)
Slow0.35s (350ms)
Highlight Fade Out0.15s (150ms)

Transition Presets

Opacityopacity 0.15s ease
Transformtransform 0.15s ease
Opacity + Transformopacity 0.15s ease, transform 0.15s ease
Stroke Dashtransform 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.
ScopePrimaryBody FontRadiusShadowBreakpoint
Website———0px 4px 24px rgba(0,0,0,0.2){'max': '640px'}
App / Portal#7170ff————
ScopeRecipeClass PatternNotes
WebsitebuttonPrimaryinline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-medium px-4 py-2 font-semibold transition-colorsPrimary action button using exported brand, radius, and shadow tokens.
WebsitesurfaceCardrounded-md bg-surface-base text-text-primary border border-border-subtle shadow-medium p-6Default surface/card treatment for high-visibility content areas.
WebsiteinputFieldrounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ringBase text input treatment aligned to the exported radius, border, and focus tokens.
App / PortalbuttonPrimaryinline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colorsPrimary action button using exported brand, radius, and shadow tokens.
App / PortalsurfaceCardrounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6Default surface/card treatment for high-visibility content areas.
App / PortalinputFieldrounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ringBase text input treatment aligned to the exported radius, border, and focus tokens.