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

# Titan · Design System

> Quietly confident wealth management, framed in cinematic contrast.

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

Titan pairs a restrained, near-monochrome interface with cinematic workplace video and confident editorial typography. Generous whitespace, concise proof points, and rounded calls to action make the financial service feel personal and composed.

## North star

Keep the interface quiet and spacious, using cinematic media and deep ink contrast as punctuation rather than decoration.

## Overview

The page builds its identity from a warm off-white canvas (#fdfefa), deep brown-black text (#12100e), and quiet gray supporting tones. The palette stays deliberately restrained: pale backgrounds carry most content, while near-black bands create a few strong pauses and video overlays use dark gradients for legible white copy. Neue Montreal is used throughout in a regular weight, giving headings and body copy a consistent, contemporary voice rather than a formal finance look. The hero is an immersive full-bleed workplace video with a large wordmark, compact copy, and contrasting pill-shaped actions. Below it, the page moves between open light sections, concise statistics, image-led modules, and dark feature bands. Spacious section rhythm keeps the long homepage calm; cards use fine borders rather than heavy shadows. Photography and video supply human context, while colorful resource imagery remains supporting content rather than defining the brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fdfefa` | `--color-gallery-white` | brand | Main page canvas and light section background; also used on the hero's white primary action. |
| Deep Ink | `#12100e` | `--color-deep-ink` | brand | Primary text and the solid dark bands that divide the long homepage. |
| Quiet Ash | `#878784` | `--color-quiet-ash` | neutral | Muted supporting copy, captions, and secondary information. |
| Soft Hairline | `#e2e2de` | `--color-soft-hairline` | neutral | Fine card and component borders on pale surfaces. |
| Smoked Umber | `#403e3c` | `--color-smoked-umber` | surface | Secondary dark surface and muted text tone within dark sections. |
| Shadow Black | `#070606` | `--color-shadow-black` | surface | Dark gradient stop in the hero media overlay, not a standalone brand field. |
| Cocoa Black | `#0b0a08` | `--color-cocoa-black` | surface | Dark gradient stop layered over imagery for contrast, not a recurring UI fill. |
| Slate Taupe | `#595755` | `--color-slate-taupe` | neutral | Secondary muted text and subdued gray details. |
| Mist Linen | `#f6f7f3` | `--color-mist-linen` | neutral | Light foreground on dark buttons and dark surfaces; a softer white than the canvas. |

### Semantic aliases

`--color-canvas` → `#fdfefa` (Gallery White) · `--color-surface` → `#12100e` (Deep Ink) · `--color-surface-2` → `#403e3c` (Smoked Umber) · `--color-text` → `#12100e` (Deep Ink) · `--color-text-muted` → `#878784` (Quiet Ash) · `--color-text-subtle` → `#403e3c` (Smoked Umber) · `--color-border` → `#e2e2de` (Soft Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#12100e` | `#fdfefa` | 18.74:1 | AAA |
| `#12100e` | `#403e3c` | 1.78:1 | fail |
| `#878784` | `#fdfefa` | 3.56:1 | AA-large |
| `#878784` | `#12100e` | 5.27:1 | AA |
| `#878784` | `#403e3c` | 2.96:1 | fail |
| `#403e3c` | `#fdfefa` | 10.51:1 | AAA |
| `#403e3c` | `#12100e` | 1.78:1 | fail |

### Gradients

- `linear-gradient(60.48deg, rgba(0, 0, 0, 0.6) 6.11%, rgba(0, 0, 0, 0) 95.35%), linear-gradient(245.27deg, rgba(0, 0, 0, 0.4) -0.27%, rgba(0, 0, 0, 0) 25.69%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| neueMontreal | `--font-body` | webfont | 400 | All measured headings, body copy, buttons, and links. | DM Sans |

- **neueMontreal:** Regular weight throughout; sentence case, clean and unembellished, with measured neutral tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1.38 | 0 | — | neueMontreal | Primary hero statement over the full-bleed video. |
| h2 | 28px | 400 | 1.38 | 0 | — | neueMontreal | Major section headings and prominent editorial statements. |
| h3 | 24px | 400 | 1.25 | 0 | — | neueMontreal | Feature, testimonial, or content-card headings. |
| h4 | 20px | 400 | 1.25 | 0 | — | neueMontreal | Smaller module headings and FAQ question titles. |
| body | 16px | 400 | 1.5 | 0 | — | neueMontreal | Introductory descriptions, explanatory copy, and standard page text. |
| caption | 12px | 400 | 1.5 | 0 | — | neueMontreal | Fine print, image notes, and supporting labels. |
| button | 16px | 400 | 1.25 | 0 | — | neueMontreal | Text inside primary and secondary action controls. |
| link | 16px | 400 | 1.25 | 0 | — | neueMontreal | Navigation and inline calls to action. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 12, 16, 24, 32, 40, 48, 50, 80, 96, 112, 124, 148, 168 px.
- Section rhythm 112px · element gap 8px · card padding 62px · max content width 1192px.

The page uses a broad centered content frame measured at 1192px maximum width, with sections that alternate between contained layouts and full-bleed media or dark bands. The hero is a two-part composition: oversized brand lettering above compact copy and actions over video. Subsequent content uses open left-aligned statements, a four-column statistics row, and modular image cards. The measured density is spacious, with a 112px section rhythm and generous internal separation. Center alignment appears selectively for testimonials and FAQ framing.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `16px` · link `9999px` · xs `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with no measured shadow system. Pale cards rely on a fine #e2e2de outline and a 16px radius rather than lift. Dark bands and video overlays create depth through tonal contrast and layered media, while pill-shaped actions provide the main compact component contrast.

## Imagery

Workplace video anchors the hero and a later full-bleed media section, treated with dark overlays where copy sits over footage. Supporting imagery mixes people, office details, and editorial resource thumbnails; rounded image cards provide a softer edge against the clean canvas. Small diagram-like illustrations and colorful thumbnails belong to content modules, not the core brand palette.

## Components

### Hero video

Full-bleed workplace footage with a dark gradient treatment, oversized white wordmark, compact copy, and contrasting rounded actions.

### Primary action

Pill-shaped button using a dark fill and light text, with measured 16px type and compact horizontal padding.

### Secondary action

Pill-shaped text link that contrasts against its context, including the white Log in action in the dark hero.

### Statistics row

Four-column proof-point layout with prominent figures and smaller muted explanatory labels.

### Feature card

Pale card with a #e2e2de hairline, 16px radius, and generous measured internal padding.

### Dark feature band

Full-width #12100e section that separates content and supports light text or media-led feature storytelling.

### FAQ rows

Open, stacked questions on the light canvas, with large question text and simple icon controls.

### Measured component styles

- **Primary button** (“Learn more”): background #1d1b19 · text #f6f7f3 · radius 3.35544e+07px · padding 16px 24px · 400 16px neueMontreal
- **Secondary button** (“Is Titan a fiduciary?”): transparent background · text #12100e · border 1px solid · radius 0px · padding 32px 148px · 400 20px neueMontreal
- **Link** (“Get started”): transparent background · text #171717 · radius 3.35544e+07px · padding 16px 24px · 400 16px neueMontreal
- **Card** (“Featured Titan Diversify Diversify conce”): background #fdfefa · text #12100e · border 1px solid #e2e2de · radius 16px · padding 96px 50px 50px 50px · 400 14px neueMontreal
- **Navigation item**: transparent background · text #12100e · radius 0px · padding 0px · 400 14px neueMontreal

## Do

- Use #fdfefa as the main canvas.
- Reserve deep dark bands for meaningful section breaks.
- Use Neue Montreal or a close neutral sans-serif throughout.
- Let workplace video carry the hero's emotional context.
- Keep copy concise and use statistics as proof points.
- Prefer fine borders and whitespace over card shadows.

## Don't

- Do not introduce a bright accent palette.
- Do not make every section dark or image-heavy.
- Do not use decorative gradients away from media overlays.
- Do not crowd the generous section spacing.
- Do not use heavy shadows to simulate depth.
- Do not let resource-image colors redefine the interface.

## Agent prompt

Build a new Titan-style fintech page with a calm, editorial rhythm. Use Gallery White (#fdfefa) for the main canvas, Deep Ink (#12100e) for primary text and occasional full-width dark bands, and Quiet Ash (#878784) for supporting copy. Set all text in a neutral sans-serif close to Neue Montreal, using regular weights and sentence case. Keep the content frame broad and centered, but allow hero media and selected section bands to bleed to the viewport edges. Start with cinematic workplace video, a clear headline, concise supporting text, and pill-shaped actions. Organize proof points and feature cards with generous whitespace; use fine Soft Hairline (#e2e2de) borders and avoid shadows. Treat colorful editorial images as content, not brand colors. Maintain a composed, human financial-services tone.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with overlaid wordmark, compact copy, and two pill-shaped actions. | Get started action, Log in link | dark media gradient, oversized wordmark, white text, full-bleed video |
| 2 | stats | Open light section with an introductory statement above four aligned proof-point columns. | trust metrics, learn more action | left-aligned heading, four-column statistics, muted labels |
| 3 | feature-grid | Dark single-column band with a central feature message and surrounding visual modules. | explore services action | near-black surface, modular imagery, centered message |
| 4 | video | Light full-bleed media area with a centered vertical video frame and small disclaimer. | video viewing, disclosure note | centered device-like media, fine-print caption |
| 5 | testimonials | Light section with a centered heading, testimonial cards, and supporting imagery. | read more action, testimonial browsing | three-column card layout, centered section title, image-led cards |
| 6 | feature-split | Full-width near-black band with a single-column composition and immersive visual treatment. | brand storytelling | dark section band, cinematic media |
| 7 | content-feed | Three-column editorial resource imagery above a heading, description, and action. | browse resources | dark canvas, image tiles, editorial content layout |
| 8 | faq | Single-column light section with a clear heading and stacked question rows. | expandable questions | open list rows, simple icon controls, light canvas |

## Source CSS custom properties (selected)

```css
--radius: .625rem;
--brand-00: #fdfefa;
--brand-10: #f6f7f3;
--brand-20: #e9eae6;
--brand-30: #e2e2de;
--brand-40: #d0d0cc;
--brand-50: #878784;
--brand-60: #595755;
--brand-70: #403e3c;
--brand-80: #2a2826;
--brand-90: #1d1b19;
--brand-100: #12100e;
--gradient-primary: #8b8885;
--gradient-secondary: #9e9fa2;
--success-bg: #adb97f26;
--warning-bg: #d49b4826;
--progress-bg: #d49b4826;
--error-bg: #b0807f26;
--modal-background: #f6f7f3f2;
--surface: #f6f7f3;
--border: #e2e2de;
--primary: #1d1b19;
--secondary: #595755;
--background: #fdfefa;
--foreground: #12100e;
--card-foreground: #12100e;
--popover-foreground: #12100e;
--primary-foreground: #f6f7f3;
--secondary-foreground: #1d1b19;
--muted-foreground: #878784;
--accent: #e9eae6;
--accent-foreground: #1d1b19;
--sidebar-foreground: #878784;
--sidebar-primary: #12100e;
--sidebar-primary-foreground: #fdfefa;
--sidebar-accent: #e2e2de;
--sidebar-accent-foreground: #2a2826;
--sidebar-border: #e2e2de;
--brand-primary: #556b2f;
--brand-secondary: #595755;
```

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