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

# Tailark Pro — Illustrations · Design System

> Quiet grids, vivid product illustrations

**Theme:** light · **Industry:** design · **Source:** https://pro.tailark.com/illustrations · **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._

Tailark Pro presents a long-form library of product and interface illustrations in a restrained, light gallery. Thin grid lines and generous white space keep the focus on small, varied visual assets.

## North star

Keep the page itself nearly colourless and let carefully spaced, individually framed illustrations provide the visual variety.

## Overview

The page uses a near-white canvas and a disciplined hairline grid to make a very long illustration catalogue feel quiet and navigable. Deep ink anchors the compact navigation, headline, and purchase CTA; pale gray marks the broad content band and separates cells without heavy framing. Most colour is intentionally confined to the illustrations: small file badges, interface accents, charts, and occasional dark media panels. The system sans-serif carries navigation and ordinary interface copy, while Geist Mono introduces a technical note in the heading hierarchy. Typography stays measured rather than expressive, with medium-weight text and no conspicuous tracking or uppercase treatment. A centered title sits above a three-column gallery whose cells vary in content but retain consistent boundaries and alignment. Ample breathing room around each miniature makes the page read as an archive of reusable assets, not a dense dashboard. Cards are largely flat, with subtle outlines and restrained shadows reserved for floating interface mock-ups.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and light card interiors; the dominant neutral behind the illustration catalogue. |
| Deep Ink | `#09090b` | `--color-deep-ink` | neutral | Main text, navigation, dark purchase CTA, and occasional dark illustration panels. |
| Grid Mist | `#ececec` | `--color-grid-mist` | surface | Broad gallery band, cell separators, and the page's defining hairline grid. |
| Slate Copy | `#52525c` | `--color-slate-copy` | neutral | Muted supporting text and secondary explanatory labels. |
| Badge Rose | `#ff2056` | `--color-badge-rose` | semantic | PDF file badge within illustration artwork; not a primary page brand colour. |
| Badge Blue | `#2b7fff` | `--color-badge-blue` | semantic | DOC file badge within illustration artwork; appears as asset detail. |
| Signal Indigo | `#615fff` | `--color-signal-indigo` | accent | Sparse accent text, badge, or fine detail; subordinate to the neutral page frame. |
| Quiet Gray | `#848485` | `--color-quiet-gray` | neutral | Secondary muted labels and small supporting details. |
| Mint Marker | `#00bc7d` | `--color-mint-marker` | semantic | Tiny status and badge details inside the illustrated interface samples. |
| Ice Wash | `#bbe4f8` | `--color-ice-wash` | accent | Pale gradient colour in illustration artwork, not a broad page background. |
| Alert Red | `#c10007` | `--color-alert-red` | semantic | Rare red badge detail within the illustrations. |
| Vivid Coral | `#ec003f` | `--color-vivid-coral` | semantic | Small illustration or badge accent; keep it confined to asset content. |
| Violet Mark | `#8e51ff` | `--color-violet-mark` | semantic | Occasional purple illustration badge or interface highlight. |
| Warm Gold | `#fdc700` | `--color-warm-gold` | semantic | Small yellow badge and status accents inside mock-up artwork. |
| Teal Marker | `#00bba7` | `--color-teal-marker` | semantic | Limited teal badge and interface detail within illustrations. |
| Pink Marker | `#f6339a` | `--color-pink-marker` | semantic | Small pink status or badge accent in the illustrated assets. |
| Bright Aqua | `#00e0d9` | `--color-bright-aqua` | accent | Gradient accent found in decorative illustration artwork, not the page chrome. |
| Electric Leaf | `#63f655` | `--color-electric-leaf` | accent | Bright gradient highlight within illustrations; avoid using as a general page fill. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ececec` (Grid Mist) · `--color-surface-2` → `#09090b` (Deep Ink) · `--color-text` → `#09090b` (Deep Ink) · `--color-text-muted` → `#52525c` (Slate Copy) · `--color-text-subtle` → `#848485` (Quiet Gray) · `--color-border` → `#ececec` (Grid Mist) · `--color-accent` → `#615fff` (Signal Indigo) · `--color-accent-2` → `#00e0d9` (Bright Aqua) · `--color-accent-3` → `#63f655` (Electric Leaf)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#09090b` | `#ffffff` | 19.9:1 | AAA |
| `#09090b` | `#ececec` | 16.84:1 | AAA |
| `#52525c` | `#ffffff` | 7.72:1 | AAA |
| `#52525c` | `#ececec` | 6.53:1 | AA |
| `#52525c` | `#09090b` | 2.58:1 | fail |
| `#848485` | `#ffffff` | 3.74:1 | AA-large |
| `#848485` | `#ececec` | 3.16:1 | AA-large |
| `#848485` | `#09090b` | 5.32:1 | AA |
| `#615fff` | `#ffffff` | 4.58:1 | AA |
| `#615fff` | `#ececec` | 3.87:1 | AA-large |

### Gradients

- `linear-gradient(to right bottom, lab(95.916 -1.21653 23.111) 0%, lab(94.3433 -5.00429 52.9663) 100%)`
- `linear-gradient(to right bottom, lab(91.7203 -0.505269 49.9084) 0%, lab(89.7033 -0.480294 84.4917) 100%)`
- `linear-gradient(to right, lab(63.6946 47.6127 -59.2066) 0%, lab(54.1736 13.3369 -74.6839) 100%)`
- `radial-gradient(circle at 1px 1px, lab(47.8878 1.65477 -5.77283) 1px, rgba(0, 0, 0, 0) 0px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 400, 500, 600, 700 | Navigation, body copy, labels, buttons, and primary display heading. | Inter |
| Geist Mono | `--font-mono` | webfont | 400, 600, 100 | Technical secondary headings and code-like text roles. | IBM Plex Mono |

- **ui-sans-serif:** Clean system sans with medium-weight interface text; title and labels use restrained casing and no measured tracking.
- **Geist Mono:** Monospaced, semibold display treatment lends a technical counterpoint to the otherwise neutral sans-serif.

### Type scale — Minor Third (ratio ≈ 1.21, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 500 | 1.2 | 0 | — | ui-sans-serif | Centered gallery title and top-level page heading. |
| h2 | 24px | 600 | 1.33 | 0 | — | Geist Mono | Technical-style secondary section headings where present. |
| h3 | 20px | 500 | 1.4 | 0 | — | ui-sans-serif | Illustration group and feature headings. |
| h4 | 18px | 600 | 1.56 | 0 | — | ui-sans-serif | Compact card and interface sample headings. |
| body | 14px | 500 | 1.43 | 0 | — | ui-sans-serif | Supporting copy and labels within mock-up illustrations. |
| caption | 12px | 400 | 1.33 | 0 | — | ui-sans-serif | Small metadata and secondary asset labels. |
| button | 12px | 500 | 1.33 | 0 | — | ui-sans-serif | Compact purchase and interface action labels. |
| nav | 13px | 500 | 1.5 | 0 | — | ui-sans-serif | Header navigation links and active page label. |
| link | 14px | 500 | 1.43 | 0 | — | ui-sans-serif | Inline links and linked interface text. |
| code | 24px | 600 | 1.33 | 0 | — | Geist Mono | Monospaced technical labels or code-like sample content. |

## Spacing & layout

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

A compact navigation bar sits above a long, single content band. The gallery begins with a wide centered title area, then resolves into a measured three-column grid with fine boundaries and illustration samples centered within cells. The measured content width is 703px, while the screenshot shows the grid spanning much of the viewport; preserve the screenshot's broad, edge-to-edge grid character rather than squeezing every cell into a narrow text column. Cells have generous internal breathing room and a comfortable, repeated rhythm, with varied mock-up sizes balanced by consistent alignment.

## Shape & elevation

- Radius: button `6px` · card `16px` · media `50%` · badge `4px` · nav `6px` · xs `4px` · sm `6px` · md `7px` · lg `8px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.141 0.00136173 -0.00480696 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.141 0.00136173 -0.00480696 / 0.075) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `md` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.075) 0px 0px 0px 1px, oklab(0 0 0 / 0.065) 0px 4px 6px -1px, oklab(0 0 0 / 0.065) `
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.141 0.00136173 -0.00480696 / 0.05) 0px 1px 3px 0px, okla`
- Shadow `sm-2` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.075) 0px 0px 0px 1px, oklab(0 0 0 / 0.065) 0px 1px 3px 0px, oklab(0 0 0 / 0.065) 0`
- Shadow `md-2` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.075) 0px 0px 0px 1px, oklab(0 0 0 / 0.065) 0px 10px 15px -3px, oklab(0 0 0 / 0.065`
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The gallery is mostly flat: fine gray grid lines define the structure, while mock-ups may use discreet outlines or light shadows to read as floating UI. Avoid heavy card shadows or layered page panels. Reserve stronger depth for details inside the illustrations, not the surrounding layout.

## Imagery

The page is an illustration catalogue rather than a photography-led landing page. It contains many small interface and product mock-ups—file formats, cards, charts, calendars, workflows, and occasional dark media panels—set individually into spacious grid cells. Keep artwork crisp and isolated on pale backgrounds; preserve each asset's own colour accents instead of tinting the gallery around it.

## Components

### Top navigation

Light header with Tailark Pro identity, compact navigation links, command-menu affordance, and a deep-ink “Get Tailark Pro” CTA.

### Gallery title cell

Wide, open top grid region with a centered medium-weight title and a light, understated numeric suffix.

### Illustration grid cell

Repeated cell with a fine #ececec boundary and ample empty space around a centered miniature asset.

### File badge

Small coloured format label attached to a document illustration; badges are artwork details, not page-wide accent buttons.

### Interface mock-up

Compact cards, forms, calendars, charts, and workflow diagrams rendered as individual assets with restrained borders and subtle depth.

### Dark media panel

Occasional large near-black illustration panel that provides contrast within the otherwise bright, pale gallery.

### Measured component styles

- **Primary button** (“Get Tailark Pro”): background #09090b · text #ffffff · border 1px solid · radius 6px · padding 0px 12px · 500 12px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“tailark.com”): transparent background · text #ffffff · radius 0px · padding 0px · 500 14px ui-sans-serif
- **Card** (“PDF”): background #fafafa · text #09090b · radius 0px · padding 48px 32px · 400 16px ui-sans-serif
- **Badge** (“PDF”): background #ff2056 · text #ffffff · radius 4px · padding 2px 6px · 600 10px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Tailark Pro ⌘ K Command menu Illustratio”): transparent background · text #09090b · radius 0px · padding 0px · 400 16px ui-sans-serif

## Do

- Use white and pale gray as the dominant page colours.
- Keep the gallery structure visible with fine gray dividers.
- Center each illustration within its spacious cell.
- Use deep ink for primary text and the main CTA.
- Keep bright colours mostly inside the artwork.
- Use the system sans for interface text and mono sparingly.

## Don't

- Do not turn the page into a dark theme.
- Do not apply illustration badge colours to large section backgrounds.
- Do not crowd the assets or remove their surrounding whitespace.
- Do not rely on heavy shadows to separate every cell.
- Do not make the title oversized or overly decorative.
- Do not treat mock-up colours as the core brand palette.

## Agent prompt

Build a new Tailark Pro-style page as a quiet, light illustration gallery. Use Gallery White (#ffffff) as the canvas, Grid Mist (#ececec) for the broad gallery surface and fine cell dividers, and Deep Ink (#09090b) for navigation, headings, and the primary CTA. Keep Slate Copy (#52525c) secondary. Use a compact system-sans navigation and restrained typography; reserve Geist Mono for technical labels or a secondary heading. Lay out content as a spacious, repeated grid with a centered title region and illustrations centered within their cells. Keep artwork colours such as Badge Rose (#ff2056), Badge Blue (#2b7fff), Signal Indigo (#615fff), Bright Aqua (#00e0d9), and Electric Leaf (#63f655) inside the assets rather than spreading them across the page. Prefer flat surfaces, hairline borders, and only subtle mock-up shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Long, pale three-column grid with a wide centered title region followed by repeated illustration cells. | Browse visual assets, Scan by grid, Select individual illustrations | Fine cell dividers, Centered miniature artwork, Small file-format badges, Occasional dark media tile |

## Source CSS custom properties (selected)

```css
--radius: .5rem;
--color-background: #fff;
--color-foreground: lab(2.51107% .242703 -.886115);
--color-card: #fff;
--color-illustration: #fff;
--color-card-foreground: lab(2.51107% .242703 -.886115);
--color-popover: #fff;
--color-popover-foreground: lab(2.51107% .242703 -.886115);
--color-primary: lab(2.51107% .242703 -.886115);
--color-primary-foreground: #fff;
--color-secondary: lab(96.1634% .0993311 -.364041);
--color-secondary-foreground: lab(2.51107% .242703 -.886115);
--color-muted: lab(96.1634% .0993311 -.364041);
--color-muted-foreground: lab(47.8878% 1.65477 -5.77283);
--color-accent: lab(96.1634% .0993311 -.364041);
--color-accent-foreground: lab(2.51107% .242703 -.886115);
--color-destructive: lab(48.4493% 77.4328 61.5452);
--color-border: lab(90.6853% .399232 -1.45452);
--color-border-illustration: #09090b13;
--color-input: lab(90.6853% .399232 -1.45452);
--color-ring: lab(2.51107% .242703 -.886115);
--popover-foreground: lab(2.51107% .242703 -.886115);
--color-destructive-foreground: #fff;
--color-chart-1: lab(54.1736% 13.3369 -74.6839);
--color-chart-2: lab(48.295% 38.3129 -81.9673);
--color-chart-3: lab(52.0183% 66.11 -78.2316);
--color-chart-4: lab(59.866% 22.4834 -64.4485);
--color-chart-5: lab(55.4814% 75.0732 48.8528);
```

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