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

# Tines · Design System

> Enterprise security, with a vivid human touch

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

Tines pairs a warm off-white canvas and confident violet typography with expressive, colorful illustrations and product imagery. The long-form homepage balances enterprise-focused messaging with approachable color, rounded interface elements, and clear calls to action.

## North star

Use a warm, spacious editorial canvas to make violet-led enterprise messaging feel vivid, human, and easy to scan.

## Overview

The page is built on a warm off-white canvas (#fcf9f5), allowing vivid violet (#714bd0) to carry the brand voice across navigation, headlines, links, and large feature panels. Green appears as a strong secondary accent in workflow content and product sections, while pale green tones and light borders soften interface modules. Roobert provides clean, compact sans-serif navigation and body copy; Reckless adds an editorial serif contrast to selected headings and supporting statements, with Roobert Mono reserved for uppercase labels and small utility text. The layout moves from a spacious, oversized hero into a customer logo row, large illustrated product media, narrative content, feature panels, and workflow cards. Colorful hand-drawn floral artwork and interface screenshots create contrast without replacing the product message. Rounded buttons, cards, and media frames keep the otherwise clean layout approachable and tactile.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Tines Violet | `#714bd0` | `--color-tines-violet` | brand | Primary brand color for navigation, links, headlines, feature panels, and card backgrounds. |
| Warm Canvas | `#fcf9f5` | `--color-warm-canvas` | neutral | Main page background and light text on prominent colored buttons and panels. |
| Workflow Green | `#007f4a` | `--color-workflow-green` | accent | Secondary accent for workflow sections and green product or action panels. |
| Mint Border | `#aedac2` | `--color-mint-border` | semantic | Pale green outlines on buttons and media frames. |
| Soft Mint | `#cae4d4` | `--color-soft-mint` | surface | Light green surface used on selected buttons and interface details. |
| Deep Violet | `#542f9c` | `--color-deep-violet` | accent | High-contrast demo CTA and small badge or label accents. |
| Teal Detail | `#008784` | `--color-teal-detail` | semantic | Minor interface accent, appearing in isolated button details rather than defining the page. |
| Burnt Orange | `#c05100` | `--color-burnt-orange` | semantic | Small color accent inside workflow or interface examples; not a primary brand color. |
| Interface Blue | `#3565cc` | `--color-interface-blue` | semantic | Limited blue accent in product interface or workflow examples. |
| Lilac Mist | `#ebe4f0` | `--color-lilac-mist` | surface | Subtle footer and badge detail, used sparingly against the warm canvas. |

### Semantic aliases

`--color-canvas` → `#fcf9f5` (Warm Canvas) · `--color-surface` → `#cae4d4` (Soft Mint) · `--color-text` → `#714bd0` (Tines Violet) · `--color-text-muted` → `#fcf9f5` (Warm Canvas) · `--color-border` → `#aedac2` (Mint Border) · `--color-accent` → `#714bd0` (Tines Violet) · `--color-accent-2` → `#007f4a` (Workflow Green) · `--color-accent-3` → `#542f9c` (Deep Violet) · `--color-on-accent` → `#fcf9f5` (Warm Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#714bd0` | `#fcf9f5` | 5.53:1 | AA |
| `#714bd0` | `#cae4d4` | 4.3:1 | AA-large |
| `#fcf9f5` | `#cae4d4` | 1.29:1 | fail |
| `#714bd0` | `#fcf9f5` | 5.53:1 | AA |
| `#714bd0` | `#cae4d4` | 4.3:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert | `--font-body` | webfont | 500, 400, 600, 700 | Primary sans-serif for navigation, body copy, buttons, links, and large display headings. | Inter |
| Reckless | `--font-display` | webfont | 400, 500, 700 | Editorial serif for supporting headings and selected narrative statements. | Newsreader |
| Roobert Mono | `--font-mono` | webfont | 700, 600 | Uppercase eyebrow labels, captions, and compact utility or code-like text. | Space Mono |

- **Roobert:** Use clean, open sans forms; display text is regular weight with tight negative tracking, while navigation and controls are semibold.
- **Reckless:** Use expressive serif contrast for story-led content; keep it readable and avoid applying it to dense interface text.
- **Roobert Mono:** Use bold uppercase labels with conspicuous letter spacing for small navigational and section markers.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.05 | -0.03em | — | Roobert | Large hero or statement headlines with a light, clean sans-serif voice. |
| h1 | 56px | 400 | 1.05 | -0.03em | — | Roobert | Primary page headline, set prominently in the hero. |
| h2 | 52px | 700 | 1.1 | -0.03em | — | Reckless | Editorial section headline, often in a bold serif. |
| h3 | 24px | 400 | 1.25 | -0.01em | — | Reckless | Supporting section or card heading in serif. |
| h4 | 22px | 500 | 1.4 | 0 | — | Reckless | Smaller serif subheading for feature content. |
| body | 14px | 500 | 1.2 | 0 | — | Roobert | Compact supporting paragraphs and product descriptions. |
| caption | 13px | 700 | 1 | 0.05em | uppercase | Roobert Mono | Small uppercase labels and compact interface captions. |
| button | 14px | 600 | 1.15 | 0 | — | Roobert | CTA labels and action controls. |
| nav | 14px | 600 | 1.15 | 0 | — | Roobert | Main navigation links and menu items. |
| link | 14px | 600 | 1.15 | 0 | — | Roobert | Inline and standalone text links. |
| eyebrow | 13px | 700 | 1 | 0.05em | uppercase | Roobert Mono | Uppercase section markers above major headings. |
| code | 13px | 700 | 1 | 0.05em | uppercase | Roobert Mono | Compact mono labels and code-like interface text. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 5, 6, 8, 10, 12, 14, 18, 20, 24, 30, 40, 55 px.
- Section rhythm 40px · element gap 4px · card padding 24px · max content width 1360px.

The page uses a centered, wide desktop composition with a measured maximum width of 1360px. The hero is left-aligned, with a prominent headline, short supporting copy, paired CTAs, and a customer logo row before large media. Below, the long single-column page alternates centered editorial narratives, broad colored feature bands, product demonstrations, and multi-column cards. Section spacing is generous relative to compact body text; internal card padding and grid gaps create clear grouping without heavy dividers. Preserve the vertical sequence and keep each section visually distinct.

## Shape & elevation

- Radius: button `9999px` · card `14px` · media `19px` · badge `8px` · nav `9999px` · xs `14px` · sm `19px` · md `24px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

The interface relies on flat color fields and crisp outlines rather than visible shadows. Pale green borders define selected controls and media, while rounded corners distinguish cards, buttons, and screenshot frames. Large product imagery and illustrations layer over section backgrounds to create depth; keep this layering controlled and let contrast and framing do the work.

## Imagery

The first screen combines an oversized decorative typographic video graphic, customer logos, and a product interface preview. Across the page, hand-drawn floral motifs, whimsical connected-screen illustrations, and small illustrated card accents add personality. Product screenshots remain legible within rounded frames, while illustrations use lively violet, green, orange, and pink details. Treat artwork as colorful supporting content, not as a replacement for functional product UI.

## Components

### Primary demo button

Use a deep violet (#542f9c) pill with warm off-white text, uppercase Roobert Mono styling, and a compact, high-contrast treatment.

### Hero CTA pair

Place a filled violet action beside a light outlined secondary action beneath the hero copy.

### Navigation

Keep the top navigation compact and text-led in violet, with a pill-shaped active item and a prominent demo button.

### Feature panel

Use a broad violet panel with rounded corners, white text, a strong headline, concise feature copy, and decorative floral artwork.

### Workflow cards

Organize workflow categories as adjacent colored cards, then show a large product interface preview beneath them.

### Product media frame

Present screenshots in generously rounded frames with fine pale green outlines and visible interface detail.

### Trust cards

Use violet cards with light text, concise proof points, and small illustrative accents anchored near the bottom.

### Measured component styles

- **Primary button** (“BOOK A DEMO”): background #542f9c · text #fcf9f5 · radius 990px · padding 10px 20px · 700 13px Roobert Mono · uppercase
- **Secondary button** (“IT MCP and AI client management with an ”): background #007f4a · text #fcf9f5 · radius 14px · padding 30px 30px 22px 30px · 400 16px Roobert
- **Link** (“BOOK A DEMO”): transparent background · text #714bd0 · radius 0px · padding 0px · 400 16px Roobert
- **Card** (“Born in security, built for the enterpri”): background #714bd0 · text #fcf9f5 · border 1px solid #fcf9f5 · radius 14px · padding 24px · 400 16px Roobert
- **Badge** (“Preview workflow frontend”): background #eae5fb · text #542f9c · radius 8px · padding 4.5px 9px 2px 9px · 600 12.5px Roobert
- **Navigation item** (“Product Solutions Customers Discover Pri”): transparent background · text #714bd0 · radius 0px · padding 0px · 400 16px Roobert

## Do

- Keep the warm off-white canvas as the dominant background.
- Use Tines Violet for primary headlines, links, and navigation.
- Pair clean sans-serif messaging with selective editorial serif headings.
- Reserve mono uppercase styling for short labels and captions.
- Use illustrations as lively accents around clear product content.
- Give screenshots and cards rounded frames with restrained outlines.

## Don't

- Do not replace the warm canvas with stark pure white.
- Do not use gradients or heavy shadows as defining effects.
- Do not make every heading serif or every section violet.
- Do not use decorative illustrations where product UI must be legible.
- Do not overfill the page with dense copy or tight card layouts.
- Do not treat isolated interface colors as core brand colors.

## Agent prompt

Build a new Tines-style SaaS page on a warm, spacious #fcf9f5 canvas. Use Tines Violet (#714bd0) for navigation, links, and major messaging, with Deep Violet (#542f9c) reserved for high-contrast demo actions. Introduce Workflow Green (#007f4a) in selected product or workflow sections and use Soft Mint (#cae4d4) and Mint Border (#aedac2) sparingly for surfaces and outlines. Set large clean sans-serif headlines in a Roobert-like face, contrast selected editorial statements with a Reckless-like serif, and use uppercase mono labels for section eyebrows. Compose clear, left-aligned hero messaging and CTAs, followed by product media, narrative sections, and colored feature cards. Use rounded frames, flat color fields, restrained borders, and lively hand-drawn illustration accents. Keep interface screenshots readable and the overall rhythm open.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | A long, single-column homepage on a warm off-white canvas, alternating hero content, media, narrative sections, feature panels, and footer. | Persistent top navigation, Prominent demo CTA, Sequential scroll storytelling | Violet typography, Rounded feature panels, Illustrated product media, Compact footer links |

## Source CSS custom properties (selected)

```css
--darkModeBg: color(display-p3 .0839 .0739 .1149);
--pageBg: #fcf9f5;
--pageForegroundColor: color(display-p3 .4203 .3017 .7863);
--panelBg: #fcf9f5;
--pageAccent: #8d75e6;
--fontSans: Roobert, -apple-system, BlinkMacSystemFont, Arial, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
--fontSerif: Reckless, Georgia, serif;
--fontSerifDisplay: "Reckless Neue VF", "Reckless Neue", Georgia, serif;
--areaNavPillBg: color(display-p3 .9238 .9119 .9846);
--areaNavPillBgHover: color(display-p3 .8668 .8464 .9956);
--areaNavActiveColor: color(display-p3 .3827 .2622 .7236);
--pxTextSm: 9px;
--pxText: 18px;
--fontSystem: -apple-system, BlinkMacSystemFont, Arial, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
--fontMonospace: "Roobert Mono", menlo, monospace;
--fontPixel: "Pangea 4px Sans", monospace;
--fontPixelMono: "Pangea 4px Mono", monospace;
--phoneEdgeGap: 0px;
--layoutWithSidebarGap: 7.2rem;
--gap: 2.4rem;
--radius: 1.4rem;
--gridGap: 2.4rem;
--wideGridGap: 2.4rem;
--unfilledHoverBg: color-mix(in srgb, color-mix(in srgb, color(display-p3 .4203 .3017 .7863) 10%, #fcf9f5) 85%, transparent);
--primaryColor: #8d75e6;
--primary50: #f3ecf7;
--primary100: #eadff8;
--primary200: #d7c4fa;
--primary300: #c2aafa;
--primary400: #a990f5;
--primary500: #8d75e6;
--primary600: #7f69ce;
--primary700: #6956a8;
--primary800: #4d3e78;
--primary900: #32274b;
--navGap: 1.8rem;
--areaNavGap: calc((calc(68px - 1.8rem + 1.2rem) - 1px - calc(1.4rem * 1.15 + .7rem * 2)) / 2);
--navBackdropRadius: 99rem;
--navBackdropMergedRadius: calc(calc(68px - 1.8rem + 1.2rem) / 2);
--footerBackgroundColor: transparent;
```

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