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

# Tiger Data · Design System

> Industrial-scale data, expressed in stark monochrome

**Theme:** light · **Industry:** devtools · **Source:** https://www.tigerdata.com/ · **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._

Tiger Data pairs a clean, high-contrast SaaS interface with industrial imagery and restrained lime accents. Large type, compact technical labels, and clear conversion paths make the page feel direct and developer-focused.

## North star

Use a white canvas and bold black typography as the default, reserving dark bands and lime details for purposeful contrast.

## Overview

The page is built on a white canvas, using near-black typography and dark, full-width bands to establish contrast without relying on a broad colour system. A vivid yellow-green appears selectively in the hero badge, data callouts, testimonial detail and footer gradient; it acts as a signal, not a general-purpose fill. Geist Sans carries the interface, from the oversized, tightly tracked hero heading to compact navigation and body copy. Geist Mono adds a technical voice to uppercase labels and numerical data. The hero is centered and spacious, then the page shifts into split feature content, a dark testimonial panel, and partner and integration cards. Industrial video and monochrome customer marks give the product context, while thin grey borders separate controls and cards. Sections stay mostly flat, with consistent whitespace and straightforward button styling keeping the focus on evidence and action.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, navigation, hero, and most content sections. |
| Carbon Panel | `#101013` | `--color-carbon-panel` | surface | Inverse section and dark media surface, especially the testimonial band. |
| Graphite Copy | `#27272a` | `--color-graphite-copy` | semantic | Muted supporting text and subtle text or border details. |
| Soft Divider | `#ccccd5` | `--color-soft-divider` | semantic | Hairline borders on outlined buttons, cards, and separators. |
| True Ink | `#000000` | `--color-true-ink` | semantic | Strong headings, footer links, and primary text. |
| Button Black | `#0a0a0c` | `--color-button-black` | brand | Primary CTA fill and navigation or button text. |
| Muted Alloy | `#a1a1aa` | `--color-muted-alloy` | neutral | Input outlines and secondary interface details. |
| Mist Wash | `#f4f4f5` | `--color-mist-wash` | surface | Pale card and section wash blending into the white canvas. |
| Iron Grey | `#3f3f46` | `--color-iron-grey` | surface | Secondary dark surface details and card elements. |
| Signal Lime | `#f1ff5c` | `--color-signal-lime` | accent | Small technical highlights, hero badge, and footer gradient origin. |
| Night Panel | `#1a1a1d` | `--color-night-panel` | surface | Dark security feature card with white text. |
| Lime Haze | `#f7ff9d` | `--color-lime-haze` | accent | Soft lime stop in the footer gradient, not a dominant interface fill. |
| Pale Metal | `#e4e4e7` | `--color-pale-metal` | neutral | Subtle text and decorative details against dark surfaces. |
| Lemon Signal | `#f4ff7d` | `--color-lemon-signal` | accent | Occasional highlighted text detail within technical content. |
| Slate Mockup | `#6a6a6b` | `--color-slate-mockup` | surface | Isolated product-card tone; appears as supporting card content, not a core brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#101013` (Carbon Panel) · `--color-surface-2` → `#3f3f46` (Iron Grey) · `--color-surface-3` → `#ccccd5` (Soft Divider) · `--color-surface-4` → `#1a1a1d` (Night Panel) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#27272a` (Graphite Copy) · `--color-text-subtle` → `#0a0a0c` (Button Black) · `--color-border` → `#ccccd5` (Soft Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#101013` | 1.11:1 | fail |
| `#000000` | `#3f3f46` | 2.01:1 | fail |
| `#000000` | `#ccccd5` | 13.17:1 | AAA |
| `#27272a` | `#ffffff` | 14.89:1 | AAA |
| `#27272a` | `#101013` | 1.28:1 | fail |
| `#27272a` | `#3f3f46` | 1.43:1 | fail |
| `#27272a` | `#ccccd5` | 9.34:1 | AAA |
| `#0a0a0c` | `#ffffff` | 19.78:1 | AAA |
| `#0a0a0c` | `#101013` | 1.04:1 | fail |

### Gradients

- `linear-gradient(rgb(244, 244, 245), rgb(255, 255, 255))`
- `linear-gradient(0deg, rgb(241, 255, 92), rgb(247, 255, 157) 20%, rgb(255, 255, 255) 50.07%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GeistSans | `--font-body` | webfont | 400, 600, 700, 500 | Headings, navigation, body text, buttons, and interface labels | Inter |
| GeistMono | `--font-mono` | webfont | 500 | Technical labels and uppercase data callouts | Roboto Mono |

- **GeistSans:** Use measured weights from 400 to 700; display and h1 are bold with tight negative tracking, while navigation stays medium.
- **GeistMono:** Use medium weight, uppercase labels, and lightly expanded tracking for a compact technical register.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 700 | 1.1 | -0.03em | — | GeistSans | Large, bold campaign or hero statement. |
| h1 | 52px | 600 | 1.1 | -0.03em | — | GeistSans | Primary hero heading, tightly tracked and prominent. |
| h2 | 44px | 400 | 1.25 | 0 | — | GeistSans | Major section headings and partner or CTA titles. |
| h3 | 32px | 600 | 1.2 | -0.01em | — | GeistSans | Feature-group and prominent card headings. |
| h4 | 22px | 600 | 1.5 | -0.01em | — | GeistSans | Feature-row titles and smaller content headings. |
| body | 16px | 400 | 1.5 | 0 | — | GeistSans | Paragraphs, descriptions, and general interface copy. |
| caption | 15px | 400 | 1.5 | 0 | — | GeistSans | Compact supporting text and attribution details. |
| nav | 15px | 500 | 1.5 | 0 | — | GeistSans | Primary navigation links. |
| link | 0px | 400 | normal | 0 | — | GeistSans | Inline and card action links. |
| code | 15px | 500 | 1.4 | 0.02em | uppercase | GeistMono | Uppercase technical labels and data annotations. |

## Spacing & layout

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

The page uses a centered hero, a horizontal customer-logo strip, and a measured content width capped at 1360px. Below the hero, a wide industrial media block leads into a two-column feature split, followed by a dark testimonial area and a partner section with a three-column card arrangement. The overall rhythm alternates broad, open sections with denser lists and cards. Alignment changes by purpose: centered for the hero and CTA, left-aligned for content sections, and compact columns in the footer. Spacing follows a compact scale, with whitespace doing much of the separation.

## Shape & elevation

- Radius: button `4px` · input `4px` · card `8px` · link `8px` · xs `2px` · sm `4px` · md `8px`
- Shadow `hairline` (input): `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`
- Shadow `sm` (footer): `rgb(128, 128, 128) 0px 0px 5px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: white sections meet without prominent shadows, and grey hairlines define outlined buttons, inputs, and card edges. Dark panels create depth through tonal contrast rather than elevation. Rounded corners are restrained on controls and cards; media and broad bands remain visually direct, with layering mainly reserved for callouts over imagery.

## Imagery

An industrial video or photographic scene anchors the upper page, treated in near-monochrome so the interface remains cohesive. The testimonial pairs a dark background with a technical dotted or point-cloud visual and small lime callouts. Customer and partner marks appear as a restrained logo strip; integration logos sit in cards. Illustration details support product explanation rather than becoming a separate colourful visual identity.

## Components

### Primary CTA

Near-black button with white text, compact 4px corner radius, and a direct trial action.

### Secondary CTA

White or transparent button with a #ccccd5 outline, dark text, and matching compact control proportions.

### Hero badge

Small, bright lime label centered above the headline; uppercase technical phrasing gives it a mono-like feel.

### Feature list

Two-column feature section with a left-aligned heading and copy beside stacked rows separated by subtle hairlines.

### Customer proof strip

Horizontal trust label and customer marks, positioned between the hero actions and industrial media.

### Dark feature card

Near-black security panel with white copy, grouped benefits, and low-contrast internal divisions.

### Newsletter form

Footer email field with a thin grey outline and a full-width dark submit button.

### Measured component styles

- **Primary button** (“Start a free trial”): background #0a0a0c · text #ffffff · border 1px solid · radius 4px · padding 12px 20px · 400 16px GeistSans
- **Secondary button** (“Contact sales”): transparent background · text #0a0a0c · border 1px solid #ccccd5 · radius 4px · padding 12px 20px · 400 16px GeistSans
- **Link** (“Automatic partitioning”): transparent background · text #000000 · radius 0px · padding 0px · 400 0px GeistSans
- **Input**: transparent background · text #0a0a0c · border 1px solid #a1a1aa · radius 4px · padding 12px 16px · 400 16px GeistSans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“SECURE Encryption at rest and in transit”): background #1a1a1d · text #ffffff · radius 0px · padding 0px · 400 16px ui-sans-serif
- **Navigation item** (“Product Industry Docs Pricing Developer ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif

## Do

- Keep the main canvas white and typography near-black.
- Use lime only for small, high-salience signals.
- Set the hero headline large, centered, and tightly tracked.
- Use dark bands to frame testimonials or inverse content.
- Separate feature rows with fine grey hairlines.
- Pair industrial imagery with restrained monochrome treatment.

## Don't

- Do not turn lime into a broad section background.
- Do not add colourful gradients beyond the measured lime footer treatment.
- Do not overuse shadows or layered floating cards.
- Do not make every section centered; content areas are often left-aligned.
- Do not style technical labels like oversized marketing headlines.
- Do not introduce extra colours outside the measured palette.

## Agent prompt

Build a new Tiger Data page with a white Gallery White (#ffffff) canvas, True Ink (#000000) headings, and Button Black (#0a0a0c) primary actions. Use Geist Sans or a close Inter substitute for interface and headings, with Geist Mono or Roboto Mono for compact uppercase technical labels. Keep lime accents limited to Signal Lime (#f1ff5c) highlights rather than large fills. Make the layout spacious but compact in its controls: a strong centered opening, then left-aligned content splits, restrained cards, and clear hairline dividers in Soft Divider (#ccccd5). Use dark inverse sections in Carbon Panel (#101013) selectively. Favor monochrome industrial imagery, evidence-led content, and simple CTAs. Keep elevation low and corners modest; preserve strong contrast and clear scanning order.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero on a white canvas, with navigation above and customer marks near the lower edge. | primary and secondary CTA, trust indicators | large bold heading, lime eyebrow badge, horizontal customer logos |
| 2 | video | Full-width industrial media with a compact data overlay. | scale proof, data callouts | monochrome video, dark overlay, lime numeric highlights |
| 3 | feature-split | Two columns: introductory copy at left and stacked feature rows at right. | feature scanning, repeated trial and sales actions | left-aligned section heading, icon-led rows, fine dividers |
| 4 | testimonials | Dark full-width section with media on one side and testimonial content on the other. | customer quotation, research attribution, learn-more link | inverse surface, lime quote detail, technical point-cloud visual |
| 5 | integrations | Partner introduction above a three-column arrangement, followed by side-by-side integration and security cards. | integration discovery, security reassurance | partner marks, light integration card, dark enterprise card |
| 6 | cta | Centered heading and paired actions with generous surrounding whitespace. | trial conversion, sales contact | large section title, dark primary button, outlined secondary button |
| 7 | footer | Multi-column link groups beside a newsletter signup, with a branded lower footer area. | category navigation, email subscription | dense link columns, outlined email field, lime gradient brand treatment |
| 8 | other | Full-bleed closing strip below the footer content. | brand recall, legal and utility links | soft lime-to-white gradient, large wordmark, small legal text |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(255,255,255,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #ffffff;
--osano-button-foreground-color: #1472ec;
--osano-dialog-background-color: #5b9cf2;
--osano-dialog-foreground-color: #ffffff;
--osano-info-dialog-overlay-color: rgba(20,30,53,0.35);
--osano-link-color: #ffffff;
--osano-toggle-off-track-color: #c0c4cc;
--osano-toggle-off-thumb-color: #ffffff;
--osano-toggle-on-track-color: #1472ec;
--osano-toggle-on-thumb-color: #ffffff;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #ffffff;
--osano-button-accept-background-color: #ffffff;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #1472ec;
--osano-button-deny-background-color: #c0c4cc;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #898e9a;
--osano-button-reject-all-background-color: #ffffff;
--osano-button-reject-all-background-color-hover: #ebebeb;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #1472ec;
--osano-button-manage-background-color: #ffffff;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #1472ec;
--osano-info-dialog-link-color: #ffffff;
--osano-info-dialog-button-close-color: #141e35;
--osano-info-dialog-toggle-off-track-color: #c0c4cc;
--osano-info-dialog-toggle-off-thumb-color: #ffffff;
--osano-info-dialog-toggle-on-track-color: #1472ec;
--osano-info-dialog-toggle-on-thumb-color: #ffffff;
--osano-info-dialog-button-background-color: #ffffff;
--osano-info-dialog-button-border-color: #1472ec;
--osano-info-dialog-button-foreground-color: #1472ec;
--osano-dialog-gpc-background-color: #5b9cf2;
```

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