---
title: "Tracky design system"
variant: extended
source: https://tracky.so/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/tracky-so)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Tracky · Design System

> Calm productivity with a hand-drawn edge

**Theme:** light · **Industry:** productivity · **Source:** https://tracky.so/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Tracky pairs a quiet light canvas and bold ink typography with playful hand-drawn product illustrations. Dark product panels and compact interface previews make the page feel like a friendly, polished productivity tool.

## North star

Keep the page calm and spacious, using bold navy typography and playful hand-drawn product details as its defining contrast.

## Overview

The visual strategy balances a restrained interface with expressive product storytelling. A light gray canvas (#f2f2f2) runs continuously through the page, while near-black navy (#151b31) anchors headlines, calls to action, and large product panels. Muted gray supports explanatory copy; coral red appears selectively as emphasis, and mint, blue, and warm yellow details are chiefly part of the illustrations rather than a broad UI palette. Heavy GRIFTER display headings contrast with practical Inter body text and navigation. The layout is centered and spacious at the top, then shifts between feature sections, angled interface mockups, and dark showcase panels. Hand-drawn mascot art, cursor marks, scribbles, and floating controls give the polished software previews a personable edge. White interface cards lift from the canvas with restrained shadows, while dark panels provide contrast without changing the overall light-page character.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Quiet Canvas | `#f2f2f2` | `--color-quiet-canvas` | surface | Continuous light page background across the hero and all major content sections. |
| Soft Graphite | `#6d6f75` | `--color-soft-graphite` | neutral | Muted explanatory copy and supporting text on the light canvas. |
| Midnight Ink | `#151b31` | `--color-midnight-ink` | brand | Display headings, dark product panels, primary CTA fills, and interface accents. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Floating interface cards and light login or secondary button surfaces. |
| Sketch Black | `#000000` | `--color-sketch-black` | neutral | Measured card border color; also suits the hand-drawn outline details. |
| Coral Spark | `#ff5858` | `--color-coral-spark` | accent | Selective highlighted word and small emphasis details, not a dominant section background. |
| Slate Outline | `#484e65` | `--color-slate-outline` | semantic | Minor measured interface or illustration detail; not a defining page-wide color. |
| Pale Type | `#ececed` | `--color-pale-type` | neutral | Light muted text or small details where they appear against dark surfaces. |
| Warm Banner | `#fedf89` | `--color-warm-banner` | accent | Small warm announcement-band or decorative accent; use sparingly. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Quiet Canvas) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#151b31` (Midnight Ink) · `--color-text` → `#151b31` (Midnight Ink) · `--color-text-muted` → `#6d6f75` (Soft Graphite) · `--color-text-subtle` → `#ececed` (Pale Type) · `--color-border` → `#000000` (Sketch Black) · `--color-accent` → `#ff5858` (Coral Spark) · `--color-accent-2` → `#fedf89` (Warm Banner)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151b31` | `#f2f2f2` | 15.21:1 | AAA |
| `#151b31` | `#ffffff` | 17.03:1 | AAA |
| `#6d6f75` | `#f2f2f2` | 4.49:1 | AA-large |
| `#6d6f75` | `#ffffff` | 5.02:1 | AA |
| `#6d6f75` | `#151b31` | 3.39:1 | AA-large |
| `#ececed` | `#f2f2f2` | 1.05:1 | fail |
| `#ececed` | `#ffffff` | 1.18:1 | fail |
| `#ececed` | `#151b31` | 14.43:1 | AAA |
| `#ff5858` | `#f2f2f2` | 2.76:1 | fail |
| `#ff5858` | `#ffffff` | 3.09:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 500, 700 | Body copy, navigation, links, buttons, captions, and supporting headings. | Inter |
| GRIFTER | `--font-display` | webfont | 700 | Large display and section headings. | Archivo Black |

- **Inter:** Use regular to semibold weights; keep case natural and tracking neutral.
- **GRIFTER:** Use bold, rounded geometric display forms with natural case and neutral tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.401, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 108px | 600 | 1.3 | 0 | — | Inter | Large promotional display moments and standout headline treatments. |
| h1 | 64px | 700 | 1.2 | 0 | — | GRIFTER | Main hero headline in bold GRIFTER. |
| h2 | 48px | 700 | 1 | 0 | — | GRIFTER | Major section headings, including feature and showcase titles. |
| h3 | 36px | 700 | 1 | 0 | — | GRIFTER | Feature headings and smaller prominent product-section titles. |
| h4 | 24px | 400 | 1.5 | 0 | — | Inter | Supporting headings and product or testimonial subheads. |
| body | 20px | 400 | 1.4 | 0 | — | Inter | Explanatory copy, feature descriptions, and hero supporting text. |
| caption | 18px | 400 | 1.55 | 0 | — | Inter | Secondary descriptions and small supporting interface text. |
| link | 16px | 500 | 1.18 | 0 | — | Inter | Navigation, inline actions, and footer links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 13, 15, 16, 20, 24, 32, 40, 48, 50, 65, 75, 100 px.
- Section rhythm 75px · element gap 16px · card padding 15px · max content width 1200px.

Use a centered content frame with a measured maximum width of 1200px. The hero pairs headline and product demonstration content, followed by centered showcase sections and alternating feature splits. Keep the light canvas continuous; use dark panels as occasional anchors rather than alternating full-width color bands. The measured spacing system is comfortable, with a 75px section gap and 16px element gap. Align feature copy to the start and showcase headings to center, while allowing mockups and decorative marks to overlap their columns.

## Shape & elevation

- Radius: button `6px` · card `16px` · media `10px` · link `8px` · xs `6px` · sm `8px` · md `10px` · lg `16px` · xl `24px`
- Shadow `sm` (button, link, card): `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px`
- Shadow `sm-2` (card): `rgba(138, 133, 125, 0.2) 0px 1px 4px 0px`
- Shadow `sm-3` (card): `rgba(138, 133, 125, 0.2) 0px 2px 5px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Favor flat sections and restrained card lift over strong shadows. White interface cards use soft, low-contrast shadowing against the gray canvas; dark feature panels provide depth through color contrast. Keep borders minimal, reserving the measured black border for card-like details, and use rounded corners to soften panels and controls.

## Imagery

Use interface mockups and custom illustrations, not photography, as the main visual content. Frame software screens as crisp white cards or layered sheets, with the small hand-drawn mascot, scribbles, arrows, cursor, and floating controls surrounding them. Keep illustration accents colorful but localized. Combine clean product UI with informal line art so the page remains friendly without making the interface previews feel imprecise.

## Components

### Announcement strip

A narrow warm yellow band at the top with a centered fundraising message, inline link, and close control.

### Hero headline

Large bold GRIFTER wording on the light canvas, with a single coral-highlighted word and playful illustration overlays.

### Primary CTA

Midnight Ink (#151b31) fill, white Inter text, an 8px radius, and a subtle small shadow.

### Login button

White surface, Midnight Ink (#151b31) Inter label, 6px radius, and a restrained button shadow.

### Product showcase panel

Large Midnight Ink (#151b31) rounded panel framing a white software interface preview, with small decorative accents.

### Feature split

Two-column section pairing concise copy and an action with an angled product mockup or mascot illustration.

### Floating UI card

White rounded interface card layered above mockups, using soft shadow and compact readable Inter labels.

### Footer CTA

Oversized closing brand message with coral emphasis, a dark primary action, and a simple white footer bar.

### Measured component styles

- **Primary button** (“Try me”): background #ffffff · text #151b31 · radius 6px · padding 13px 65px · 500 16px Inter · shadow rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
- **Secondary button** (“Get started”): background #151b31 · text #ffffff · radius 8px · padding 13px 65px · 500 16px Inter · shadow rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
- **Link** (“Get started”): background #151b31 · text #ffffff · radius 8px · padding 13px 65px · 500 16px Inter · shadow rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
- **Card** (“Get started 0:00:00”): background #ffffff · text #333333 · radius 8px · padding 9px 20px · 400 18px Inter · shadow rgba(138, 133, 125, 0.2) 0px 1px 4px 0px

## Do

- Keep the page canvas light gray and visually continuous.
- Use Midnight Ink for display headings and the primary action.
- Reserve Coral Spark for brief emphasis rather than large areas.
- Pair bold display headings with readable Inter body copy.
- Use hand-drawn details to animate otherwise clean product previews.
- Give interface mockups room to overlap their feature columns.
- Keep shadows soft and card corners rounded.

## Don't

- Do not introduce full-page dark backgrounds.
- Do not make illustration colors the dominant UI palette.
- Do not use photographic imagery in place of the product mockups.
- Do not crowd the hero or feature sections with dense copy.
- Do not apply coral to every heading or control.
- Do not add heavy borders or pronounced shadows to every card.

## Agent prompt

Build a polished productivity SaaS page with Tracky's calm, playful visual language. Use Quiet Canvas (#f2f2f2) as the continuous background and Midnight Ink (#151b31) for bold headings, dark showcase panels, and the primary CTA. Set display headings in a heavy geometric face such as Archivo Black and supporting text in Inter. Use Coral Spark (#ff5858) only for selective emphasis; reserve Paper White (#ffffff) for floating interface cards. Create centered sections within the measured 1200px maximum width, alternating feature copy with layered product mockups and hand-drawn mascot details. Keep a comfortable rhythm, soft card shadows, rounded corners, and restrained borders. Make product screens crisp and legible, and let sketchy arrows or decorative marks add personality without obscuring the interface.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Narrow full-width announcement strip above a two-column header. | Dismissible notice, Inline announcement link | Warm yellow band, Centered copy, Close icon, Login button |
| 2 | hero | Centered hero headline, product timer mockup, and short supporting copy. | Primary get-started action, Product preview | Oversized display type, Dark CTA, Mascot overlay, Coral emphasis |
| 3 | other | Single-column centered supporting statement beneath the hero. | Benefit statement | Muted body text, Decorative sketch |
| 4 | product-showcase | Centered heading and description above a wide dark product frame. | Tab-like product categories, Interface preview | Midnight panel, White screen mockup, Floating illustrations |
| 5 | feature-grid | Centered heading and product composition, followed by three feature summaries. | Feature discovery, Project creation preview | Layered interface cards, Curved arrow, Compact feature blocks |
| 6 | feature-split | Two-column dark feature panel with copy on one side and notes mockup on the other. | Try-me action, Rich-text note preview | Dark rounded panel, White floating sheets, Mint and yellow tool chips |
| 7 | feature-split | Two-column feature row pairing a checklist preview with explanatory copy. | Task checklist, Prioritization | White checklist card, Small status markers, Illustrated mascot |
| 8 | feature-split | Dark two-column panel with copy and CTA opposite a layered task interface. | Coming-soon notice, Try-me action | Dark panel, White task card, Floating tool chips |
| 9 | feature-split | Wide section pairing layered document mockups with stacked descriptive content. | Table feature explanation, Invoice feature explanation | Overlapping paper cards, Dark export button, Small label chip |
| 10 | testimonials | Left-aligned heading above a horizontally arranged customer quote card. | Customer quote, Carousel controls | White quote card, Mascot illustration, Small navigation buttons |
| 11 | cta | Centered mascot and speech-bubble message with decorative arrows. | Friendly invitation | Speech bubble, Hand-drawn arrows, Mascot |
| 12 | cta | Oversized horizontal brand message above a centered button. | Get-started action | Large display type, Coral word accent, Dark CTA |
| 13 | footer | Simple white footer bar with contact, copyright, policy, and social links. | Contact link, Privacy link, Social links | White rounded bar, Small Inter text, Inline link row |

## Source CSS custom properties (selected)

```css
--text-color: #46433f;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/tracky-so