GitTrail design system / version 2
One system for every trail
Semantic tokens, readable product previews and predictable interactions. Change the theme to inspect every example.
Illustrated icons
Original Git-themed spot illustrations use a shared ink outline, soft colour fills and rounded shapes. Small action controls keep simple interface glyphs.
folder
branch
layers
terminal
shield
key
search
chart
keyboard
palette
server
undo
file
review
merge
inbox
identity
Foundations
A custom faceted G forms a continuous trail, with an inward merging lane. The deep indigo tile and porcelain lines remain fixed; only the destination signal follows the theme and accent. A short transmission runs on entry, hover and keyboard focus, with reduced motion respected.
- Grid
- 12 columns · fluid to 1920px · 68ch text
- Padding / gutters
- 48px tablet · 32px mobile · adaptive laptop and desktop
- Breakpoints
- 360 · 640 · 768 · 1024 · 1280 · 1536px
- Section rhythm
- 48px mobile · 64px tablet · 96–128px desktop
- Content rhythm
- Label → heading 16px · heading → text 24px · text → action 32px
4px8px12px16px24px32px48px64px96px128pxRadius and elevation
6pxsm10pxbutton14pxcard20pxpanel999pxpillElevation sm
Elevation md
Elevation lg
Light: 0 1px 2px / 6%, 0 4px 12px / 8%, 0 12px 32px / 12%. Dark: raised neutral surfaces and a 1px inner highlight.
Colour and contrast
All site and mockup colours come from semantic variables. Lane colours are graphic identifiers, not body text colours.
--bg--surface--surface-2--border--border-strong--text--text-2--text-3--accent--accent-2--accent-soft--link--on-accent--success--warning--danger--focus--lane-1--lane-2--lane-3--lane-4--lane-5--lane-6| Pair | Dark | Light |
|---|---|---|
| text / bgMinimum 4.5:1 | 17.49:1 Pass | 17.96:1 Pass |
| text / bg-subtleMinimum 4.5:1 | 16.89:1 Pass | 17.49:1 Pass |
| text / surfaceMinimum 4.5:1 | 15.81:1 Pass | 16.74:1 Pass |
| text / surface-raisedMinimum 4.5:1 | 14.65:1 Pass | 15.72:1 Pass |
| text / surface-sunkenMinimum 4.5:1 | 16.89:1 Pass | 17.49:1 Pass |
| text / surface-translucentMinimum 4.5:1 | 15.89:1 Pass | 16.79:1 Pass |
| text-secondary / bgMinimum 4.5:1 | 13.09:1 Pass | 9.19:1 Pass |
| text-secondary / bg-subtleMinimum 4.5:1 | 12.64:1 Pass | 8.94:1 Pass |
| text-secondary / surfaceMinimum 4.5:1 | 11.82:1 Pass | 8.55:1 Pass |
| text-secondary / surface-raisedMinimum 4.5:1 | 10.95:1 Pass | 8.05:1 Pass |
| text-secondary / surface-sunkenMinimum 4.5:1 | 12.64:1 Pass | 8.94:1 Pass |
| text-secondary / surface-translucentMinimum 4.5:1 | 11.88:1 Pass | 8.58:1 Pass |
| text-muted / bgMinimum 4.5:1 | 12.68:1 Pass | 8.1:1 Pass |
| text-muted / bg-subtleMinimum 4.5:1 | 12.27:1 Pass | 7.87:1 Pass |
| text-muted / surfaceMinimum 4.5:1 | 11.45:1 Pass | 7.53:1 Pass |
| text-muted / surface-raisedMinimum 4.5:1 | 10.6:1 Pass | 7.09:1 Pass |
| text-muted / surface-sunkenMinimum 4.5:1 | 12.27:1 Pass | 7.87:1 Pass |
| text-muted / surface-translucentMinimum 4.5:1 | 11.5:1 Pass | 7.56:1 Pass |
| text-link / bgMinimum 4.5:1 | 13.38:1 Pass | 9.65:1 Pass |
| text-link / bg-subtleMinimum 4.5:1 | 12.97:1 Pass | 9.39:1 Pass |
| text-link / surfaceMinimum 4.5:1 | 12.08:1 Pass | 8.98:1 Pass |
| text-link / surface-raisedMinimum 4.5:1 | 11.19:1 Pass | 8.45:1 Pass |
| text-link / surface-sunkenMinimum 4.5:1 | 12.97:1 Pass | 9.39:1 Pass |
| text-link / surface-translucentMinimum 4.5:1 | 12.14:1 Pass | 9.01:1 Pass |
| text-link-hover / bgMinimum 4.5:1 | 17.76:1 Pass | 17.4:1 Pass |
| text-link-hover / bg-subtleMinimum 4.5:1 | 17.17:1 Pass | 16.9:1 Pass |
| text-link-hover / surfaceMinimum 4.5:1 | 16.03:1 Pass | 16.17:1 Pass |
| text-link-hover / surface-raisedMinimum 4.5:1 | 14.85:1 Pass | 15.24:1 Pass |
| text-link-hover / surface-sunkenMinimum 4.5:1 | 17.17:1 Pass | 16.9:1 Pass |
| text-link-hover / surface-translucentMinimum 4.5:1 | 16.11:1 Pass | 16.22:1 Pass |
| border-strong / bgMinimum 3:1 | 5.12:1 Pass | 4.28:1 Pass |
| border-strong / bg-subtleMinimum 3:1 | 4.94:1 Pass | 4.15:1 Pass |
| border-strong / surfaceMinimum 3:1 | 4.62:1 Pass | 3.97:1 Pass |
| border-strong / surface-raisedMinimum 3:1 | 4.28:1 Pass | 3.74:1 Pass |
| border-strong / surface-sunkenMinimum 3:1 | 4.94:1 Pass | 4.15:1 Pass |
| border-strong / surface-translucentMinimum 3:1 | 4.64:1 Pass | 3.99:1 Pass |
| focus-ring / bgMinimum 3:1 | 13.38:1 Pass | 9.65:1 Pass |
| focus-ring / bg-subtleMinimum 3:1 | 12.97:1 Pass | 9.39:1 Pass |
| focus-ring / surfaceMinimum 3:1 | 12.08:1 Pass | 8.98:1 Pass |
| focus-ring / surface-raisedMinimum 3:1 | 11.19:1 Pass | 8.45:1 Pass |
| focus-ring / surface-sunkenMinimum 3:1 | 12.97:1 Pass | 9.39:1 Pass |
| focus-ring / surface-translucentMinimum 3:1 | 12.14:1 Pass | 9.01:1 Pass |
| accent-border / bgMinimum 3:1 | 5.14:1 Pass | 3.99:1 Pass |
| accent-border / bg-subtleMinimum 3:1 | 4.97:1 Pass | 3.87:1 Pass |
| accent-border / surfaceMinimum 3:1 | 4.64:1 Pass | 3.71:1 Pass |
| accent-border / surface-raisedMinimum 3:1 | 4.3:1 Pass | 3.49:1 Pass |
| accent-border / surface-sunkenMinimum 3:1 | 4.97:1 Pass | 3.87:1 Pass |
| accent-border / surface-translucentMinimum 3:1 | 4.66:1 Pass | 3.72:1 Pass |
| text-on-accent / accentMinimum 4.5:1 | 7.57:1 Pass | 7.57:1 Pass |
| text-on-accent / accent-hoverMinimum 4.5:1 | 6.67:1 Pass | 9.92:1 Pass |
| text-on-accent / accent-activeMinimum 4.5:1 | 7.57:1 Pass | 10.93:1 Pass |
| text-on-accent / accent-gradient-endMinimum 4.5:1 | 7.45:1 Pass | 7.45:1 Pass |
| success-text / success-bgMinimum 4.5:1 | 16.51:1 Pass | 7.74:1 Pass |
| success-border / success-bgMinimum 3:1 | 4.99:1 Pass | 3.29:1 Pass |
| text-on-accent / success-solidMinimum 4.5:1 | 6.57:1 Pass | 6.57:1 Pass |
| success-text / surfaceMinimum 4.5:1 | 17.11:1 Pass | 7.8:1 Pass |
| success-text / surface-raisedMinimum 4.5:1 | 15.85:1 Pass | 7.35:1 Pass |
| warning-text / warning-bgMinimum 4.5:1 | 11:1 Pass | 10.48:1 Pass |
| warning-border / warning-bgMinimum 3:1 | 4.62:1 Pass | 3.6:1 Pass |
| text-on-accent / warning-solidMinimum 4.5:1 | 7.29:1 Pass | 7.29:1 Pass |
| warning-text / surfaceMinimum 4.5:1 | 11.22:1 Pass | 10.73:1 Pass |
| warning-text / surface-raisedMinimum 4.5:1 | 10.39:1 Pass | 10.08:1 Pass |
| danger-text / danger-bgMinimum 4.5:1 | 12.6:1 Pass | 15.46:1 Pass |
| danger-border / danger-bgMinimum 3:1 | 4.43:1 Pass | 3.74:1 Pass |
| text-on-accent / danger-solidMinimum 4.5:1 | 7.71:1 Pass | 7.71:1 Pass |
| danger-text / surfaceMinimum 4.5:1 | 12.75:1 Pass | 15.81:1 Pass |
| danger-text / surface-raisedMinimum 4.5:1 | 11.81:1 Pass | 14.89:1 Pass |
| info-text / info-bgMinimum 4.5:1 | 14.29:1 Pass | 12.72:1 Pass |
| info-border / info-bgMinimum 3:1 | 4.86:1 Pass | 3.39:1 Pass |
| text-on-accent / info-solidMinimum 4.5:1 | 6.82:1 Pass | 6.82:1 Pass |
| info-text / surfaceMinimum 4.5:1 | 14.8:1 Pass | 12.86:1 Pass |
| info-text / surface-raisedMinimum 4.5:1 | 13.71:1 Pass | 12.11:1 Pass |
| code-text / code-bgMinimum 4.5:1 | 16.89:1 Pass | 17.49:1 Pass |
| code-text / diff-add-bgMinimum 4.5:1 | 15.22:1 Pass | 16.61:1 Pass |
| code-text / diff-del-bgMinimum 4.5:1 | 15.62:1 Pass | 16.36:1 Pass |
| syn-keyword / code-bgMinimum 4.5:1 | 12.97:1 Pass | 10.32:1 Pass |
| syn-keyword / diff-add-bgMinimum 4.5:1 | 11.66:1 Pass | 9.8:1 Pass |
| syn-keyword / diff-del-bgMinimum 4.5:1 | 11.98:1 Pass | 9.66:1 Pass |
| syn-string / code-bgMinimum 4.5:1 | 13.48:1 Pass | 9.38:1 Pass |
| syn-string / diff-add-bgMinimum 4.5:1 | 12.12:1 Pass | 8.91:1 Pass |
| syn-string / diff-del-bgMinimum 4.5:1 | 12.45:1 Pass | 8.78:1 Pass |
| syn-number / code-bgMinimum 4.5:1 | 12.97:1 Pass | 9.84:1 Pass |
| syn-number / diff-add-bgMinimum 4.5:1 | 11.68:1 Pass | 9.34:1 Pass |
| syn-number / diff-del-bgMinimum 4.5:1 | 12:1 Pass | 9.2:1 Pass |
| syn-comment / code-bgMinimum 4.5:1 | 12.64:1 Pass | 8.94:1 Pass |
| syn-comment / diff-add-bgMinimum 4.5:1 | 11.39:1 Pass | 8.49:1 Pass |
| syn-comment / diff-del-bgMinimum 4.5:1 | 11.69:1 Pass | 8.36:1 Pass |
| syn-function / code-bgMinimum 4.5:1 | 15.81:1 Pass | 13.44:1 Pass |
| syn-function / diff-add-bgMinimum 4.5:1 | 14.25:1 Pass | 12.77:1 Pass |
| syn-function / diff-del-bgMinimum 4.5:1 | 14.62:1 Pass | 12.58:1 Pass |
| syn-type / code-bgMinimum 4.5:1 | 12.75:1 Pass | 10.47:1 Pass |
| syn-type / diff-add-bgMinimum 4.5:1 | 11.49:1 Pass | 9.95:1 Pass |
| syn-type / diff-del-bgMinimum 4.5:1 | 11.79:1 Pass | 9.8:1 Pass |
| syn-punctuation / code-bgMinimum 4.5:1 | 12.64:1 Pass | 8.94:1 Pass |
| syn-punctuation / diff-add-bgMinimum 4.5:1 | 11.39:1 Pass | 8.49:1 Pass |
| syn-punctuation / diff-del-bgMinimum 4.5:1 | 11.69:1 Pass | 8.36:1 Pass |
| text-on-accent / brandMinimum 3:1 | 3.71:1 Pass | 7.57:1 Pass |
| visited / bgMinimum 4.5:1 | 13.38:1 Pass | 10.62:1 Pass |
| lane-1 / surfaceMinimum 3:1 | 6.96:1 Pass | 3.45:1 Pass |
| lane-2 / surfaceMinimum 3:1 | 8.38:1 Pass | 11.54:1 Pass |
| lane-3 / surfaceMinimum 3:1 | 12.08:1 Pass | 9.04:1 Pass |
| lane-4 / surfaceMinimum 3:1 | 3.64:1 Pass | 15.12:1 Pass |
| lane-5 / surfaceMinimum 3:1 | 10.53:1 Pass | 4.68:1 Pass |
| lane-6 / surfaceMinimum 3:1 | 4.86:1 Pass | 7.31:1 Pass |
Decorative borders use border-subtle. Control boundaries use border-strong. Disabled examples are exempt from text contrast requirements. The full WCAG/APCA matrix is available on the themes page.
Typography
Self-hosted Inter Variable and JetBrains Mono use font-display: swap. Fluid sizes interpolate between the supplied mobile and desktop values.
| Role and size | Line height | Weight | Tracking |
|---|---|---|---|
| Display64 / 40px | 1.05 | 700 | −0.03em |
| H148 / 34px | 1.1 | 700 | −0.025em |
| H236 / 28px | 1.15 | 650 | −0.02em |
| H324 / 20px | 1.25 | 600 | −0.01em |
| H418 / 17px | 1.35 | 600 | 0 |
| Body large19 / 17px | 1.6 | 400 | 0 |
| Body16px | 1.6 | 400 | 0 |
| Small14px | 1.5 | 400 | 0 |
| Micro label12px | 1.4 | 500 | +0.04em |
| Code14px | 1.6 | 400 | 0 |
Every commit belongsOne computer, every accountFollow your next branchPush with the right identityKeep your work in context
Set a folder rule once. GitTrail picks the right account.
Body text stays at 16px with a comfortable 1.6 line height.
Captions and meaningful metadata stay at 14px.Label / 12px uppercasegittrail use workComponents and states
State-labelled specimens show appearance without moving keyboard focus. The actual controls retain normal hover, press and keyboard behavior.
Buttons
Primary
default
hover
pressed
focus
disabled
loading
Secondary
default
hover
pressed
focus
disabled
loading
Ghost
default
hover
pressed
focus
disabled
loading
Danger
default
hover
pressed
focus
disabled
loading
Sizes: 32 / 40 / 48px. Touch pointers expand small controls to at least 44px. The multiple primary specimens are a reference-only exception; product views use one primary action. Inspect all themes and accents.
Inputs
Match repos inside this folder.
Match repos inside this folder.
Match repos inside this folder.
Match repos inside this folder.
Match repos inside this folder.
Checking this folder rule.
Rule is incomplete. Add a folder path.
Rule matches the work account.
Cards
default
hover
pressed
focus
disabled
loading
Links and icon buttons
Badges and chips
Defaultwork
Selectedwork
Disabledwork
LoadingChecking
ErrorRule error
SuccessMatched
Badges are static labels. Hover, press and focus do not apply. Use a labelled button for an actionable chip, as in the repo selector below.
Navigation and account switching
Composite components
| Component | State behavior | Feedback |
|---|---|---|
| Section / FeatureRow / LaneBackground | Static; no hover, pressed, focus, disabled or loading semantics | Finite entry reveal; no content depends on motion |
| PricingCard / Pricing | Buttons inherit all shared control states | Monthly / yearly pressed state and announced price |
| Terminal | Static command example; selection and copying use native text behavior | No fake loading or clickable decoration |
| AppMockup | Repo and Push controls inherit shared button states | Account switch and aria-live result |
| Card / Badge | Static unless the card has one action | Use a button for actionable states |
| Menu | Closed / expanded; Escape closes and returns focus | aria-expanded and aria-controls |
| FAQ | Native closed / expanded details | Native keyboard and screen-reader state |
Error and empty states
Account could not connect
Check the token permissions, then try again.
No repos match this rule
Choose another folder or add a repo.
Account matched
Your next push will use the work account.
Motion with a purpose
- Timing
- 120ms hover / press · 200ms menu · 300ms account switch · 600ms entry
- Easing
- Enter (.16,1,.3,1) · exit (.4,0,1,1) · move (.65,0,.35,1)
- Reveals
- 12px translate and opacity · 60ms stagger · once
- Constraints
- Transform and opacity only · no continuous loop · no stroke drawing
- Access
- System reduced-motion and manual pause remove movement
Audit and rule decisions
208 semantic contrast pairs pass their applicable AA threshold. Ratios are calculated from token values; they are not a full accessibility certification.
- Specific type, radius, border and icon dimensions override the general 4px requirement.
- All text roles use the new perceptual scales. Inspect the full theme and accent matrix on the theme showcase.
- Primary fills and text/link tones were tuned for WCAG AA and APCA readability. Every change is recorded on the themes page.
- Static components have no invented disabled, loading or pressed behavior. State contracts are listed above.
- The exact type-role weights take priority over the two-weight limit in sections that combine labels, headings and nested cards.
- Transform/opacity motion takes priority over the earlier stroke-drawing request. Graphs remain crisp and static.
- Lighthouse scores, mid-range-mobile LCP and CLS remain unmeasured. No score is claimed.
See the source audit for recorded build, breakpoint and interaction checks.