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

# Sequel · Design System

> A dark, cinematic stage for lasting impact.

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

Sequel pairs a near-black canvas with cinematic founder stories and restrained editorial typography. The homepage uses generous pauses, compact content cards, and a subdued footer to frame its long-term investment proposition.

## North star

Keep the page as a continuous black cinematic canvas, using editorial type and real human stories as the primary contrast.

## Overview

The visual system is anchored by a near-black canvas (#000000), with white (#ffffff) for prominent text and softer grays for supporting copy and footer details. Dark surfaces distinguish cards and the footer without breaking the continuous black field; fine charcoal borders define separation quietly. VisueltPro carries nearly all typography, from light, spacious headlines to compact body copy and uppercase eyebrows. Bradford appears sparingly as an editorial contrast, notably in italicized legacy language. The layout alternates centered statements and media-led blocks, with two-up founder and membership cards, then an asymmetrical testimonial composition and a restrained metrics band. Large vertical pauses give the page a deliberate pace. Photography and video dominate: people, workspaces, and founder portraits are darkened with overlays so text remains legible. Pill-shaped light CTAs provide the strongest interface contrast; other actions remain understated text links.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Stage Black | `#000000` | `--color-stage-black` | brand | Primary page canvas and section backgrounds; also anchors dark media overlays. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Headings, navigation, prominent body text, and quiet text-only actions. |
| Footer Charcoal | `#0d0d0d` | `--color-footer-charcoal` | surface | Distinct footer band behind the legacy headline, navigation, and legal details. |
| Soft Silver | `#d9d9d9` | `--color-soft-silver` | neutral | Muted supporting copy on the dark canvas. |
| Footer Gray | `#6e6e6e` | `--color-footer-gray` | semantic | Low-emphasis footer labels and secondary details. |
| Hairline Charcoal | `#262626` | `--color-hairline-charcoal` | semantic | Subtle section and interface separators on dark backgrounds. |
| Card Edge | `#1a1a1a` | `--color-card-edge` | surface | Card-related dark detail, appearing primarily as a fine edge rather than a major surface. |
| Panel Charcoal | `#202020` | `--color-panel-charcoal` | surface | Testimonial and founder quote card backgrounds. |
| Deep Divider | `#333333` | `--color-deep-divider` | semantic | Minor dark structural details and separators. |
| Quiet Gray | `#9e9e9e` | `--color-quiet-gray` | neutral | Low-emphasis footer text; not a primary reading color. |
| Shadow Black | `#161616` | `--color-shadow-black` | surface | Subtle dark gradient and background transition detail. |
| Muted Edge | `#4d4d4d` | `--color-muted-edge` | semantic | Secondary border detail in dark interface areas. |
| Near Black | `#050505` | `--color-near-black` | surface | Near-black tonal transition detail within gradients, not a distinct section band. |

### Semantic aliases

`--color-canvas` → `#000000` (Stage Black) · `--color-surface` → `#0d0d0d` (Footer Charcoal) · `--color-surface-2` → `#202020` (Panel Charcoal) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#d9d9d9` (Soft Silver) · `--color-text-subtle` → `#6e6e6e` (Footer Gray) · `--color-border` → `#262626` (Hairline Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#0d0d0d` | 19.44:1 | AAA |
| `#ffffff` | `#202020` | 16.29:1 | AAA |
| `#d9d9d9` | `#000000` | 14.88:1 | AAA |
| `#d9d9d9` | `#0d0d0d` | 13.77:1 | AAA |
| `#d9d9d9` | `#202020` | 11.54:1 | AAA |
| `#6e6e6e` | `#000000` | 4.12:1 | AA-large |
| `#6e6e6e` | `#0d0d0d` | 3.81:1 | AA-large |
| `#6e6e6e` | `#202020` | 3.2:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7))`
- `linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6))`
- `linear-gradient(oklab(0.159066 0 0 / 0.4) 0%, oklab(0 0 0 / 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| VisueltPro | `--font-body` | webfont | 400, 500, 300 | Primary display, heading, body, navigation, button, and caption type. | Inter |
| Bradford | `--font-display` | webfont | 500 | Occasional editorial serif contrast in legacy-focused display language. | Cormorant Garamond |

- **VisueltPro:** Use light weights for large statements and medium weights for controls; keep body copy clean and eyebrows uppercase with tracking.
- **Bradford:** Use sparingly, often italicized beside sans-serif display text; retain a refined editorial feel.

### Type scale — Golden Ratio (ratio ≈ 1.58, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 128px | 500 | 1 | -0.025em | — | VisueltPro | Oversized legacy statements and prominent brand moments. |
| h1 | 54px | 300 | 1.2 | 0 | — | VisueltPro | Primary hero and major section statements. |
| h2 | 32px | 500 | 1.2 | -0.05em | — | Bradford | Editorial serif contrast for select section headlines. |
| h3 | 30px | 300 | 1.2 | -0.025em | — | VisueltPro | Supporting feature and content-section headings. |
| h4 | 21.5px | 500 | 1.2 | -0.02em | — | VisueltPro | Card titles, smaller feature headings, and emphasized labels. |
| body | 13px | 400 | 1.4 | 0 | — | VisueltPro | Descriptions, founder context, and supporting narrative. |
| caption | 12px | 400 | 1.33 | 0 | — | VisueltPro | Image captions, testimonials, and compact footer details. |
| eyebrow | 11px | 500 | 1.5 | 0.05em | uppercase | VisueltPro | Uppercase section labels and card category markers. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 11, 12, 16, 19, 20, 24, 28, 29, 32, 40, 80, 96 px.
- Section rhythm 80px · element gap 16px · card padding — · max content width —.

Use a full-width black canvas with centered content areas and occasional media-led panels. The measured page includes single-column full-bleed moments, two-column feature layouts, a twelve-column media strip, and compact three-column footer locations. Center major statements, while the footer aligns its content to the left. Maintain a comfortable, spacious rhythm with large gaps between major sections; use closer spacing within cards and navigation. Keep density low, letting imagery and empty black space carry the pacing. Do not infer a fixed maximum width from the measurements.

## Shape & elevation

- Radius: button `9999px` · card `10px` · xs `10px` · pill `9999px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset`
- Shadow `md` (button): `rgba(0, 0, 0, 0.15) 0px 4px 20px 0px`
- Shadow `inset-2` (footer): `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, rgb(44, 44, 44) 0px 2px 0px 0px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat against black, with dark cards differentiated by surface tone and restrained borders. Use subtle inset and button shadows only where appropriate; avoid stacked, glossy elevation. Media overlays provide depth and text legibility, while the footer separates through its charcoal fill rather than a pronounced shadow.

## Imagery

Use cinematic photography and video stills of founders, performers, and workspaces rather than decorative illustration. Frame images as broad panels or compact testimonial cards, and apply dark overlays or gradients so white copy remains readable. The hero image’s warm architectural lighting and cool shadows are photographic content, not additional brand palette colors. Keep image treatment subdued and let faces and environments feel documentary.

## Components

### Primary pill CTA

Light #f5f5f0 fill, black label, fully rounded silhouette, and subtle button shadow; used for founder-oriented actions.

### Text action

White label on the black canvas, presented as an understated pill-shaped or text-led action rather than a filled control.

### Audience cards

Two side-by-side photographic panels for founders and members, with dark overlays, concise copy, and light pill CTAs.

### Testimonial cards

#202020 cards combine founder portraits, small uppercase category labels, compact quotes, and identity details.

### Hero media

Wide cinematic workspace imagery with dark tonal treatment; overlay navigation and concise brand messaging.

### Footer location columns

Three-location footer area on #0d0d0d, balancing navigation, company links, and location names.

### Measured component styles

- **Primary button** (“For founders”): background #f5f5f0 · text #000000 · radius 9999px · padding 0px 20px · 500 16px VisueltPro · shadow rgba(0, 0, 0, 0.15) 0px 4px 20px 0px
- **Card** (“SERIES A Neil Tanna CEO & CO-FOUNDER OF ”): background #202020 · text #ffffff · radius 10px · padding 0px · 400 16px VisueltPro
- **Navigation item** (“Sequel home Founders Membership Stories ”): transparent background · text #ffffff · radius 0px · padding 40px · 400 16px VisueltPro

## Do

- Keep the canvas consistently near-black.
- Reserve white for high-priority text and controls.
- Use editorial serif type as a rare contrast.
- Let photography carry the emotional storytelling.
- Place dark overlays behind copy on imagery.
- Separate cards with subtle tonal shifts, not bright borders.

## Don't

- Do not introduce bright accent colors.
- Do not turn every section into a card grid.
- Do not use dense paragraphs or crowded layouts.
- Do not make shadows the main source of hierarchy.
- Do not treat photographic browns and blues as brand colors.
- Do not overuse serif typography or uppercase labels.

## Agent prompt

Build a new Sequel-style page as a cinematic, editorial experience on Stage Black (#000000). Use Gallery White (#ffffff) for key headlines and actions, Soft Silver (#d9d9d9) for supporting copy, and Footer Charcoal (#0d0d0d) for a distinct closing band. Use VisueltPro or a close sans-serif substitute for nearly all interface text, with rare Bradford-like italic serif accents. Keep the layout spacious and quiet: alternate centered statements, broad photography, and selective two-column content. Treat photographs with dark overlays so text remains readable; do not sample their warm or blue tones as brand accents. Use Panel Charcoal (#202020) for testimonial cards, subtle charcoal hairlines, and rounded light CTAs. Preserve strong negative space and avoid decorative gradients, crowded grids, or excessive elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport cinematic media with brand navigation and overlaid messaging. | watch-film action, persistent navigation, hero brand statement | darkened workspace image, white text, pill CTA |
| 2 | feature-grid | Centered two-column audience cards beneath centered section statements. | founder pathway, membership pathway | photographic cards, dark text overlays, light pill actions |
| 3 | video | Single broad media panel with centered editorial copy. | manifesto link, immersive storytelling | photographic media, dark overlay, centered white type |
| 4 | testimonials | Centered testimonial composition in two columns with portrait and quote cards. | founder proof, testimonial browsing | portrait cards, #202020 quote panels, category labels |
| 5 | stats | Single-row metrics band with several concise indicators. | scan metrics | large numeric emphasis, uppercase labels |
| 6 | logo-cloud | Twelve-column logo strip on the black canvas. | recognize portfolio brands | image logos, even horizontal rhythm |
| 7 | feature-split | Centered single-column statement with supporting copy and one action. | learn more | large white heading, muted body copy, simple CTA |
| 8 | cta | Legacy headline aligned to the start of a charcoal footer band. | brand recall | oversized display type, serif italic accent, dark footer surface |
| 9 | footer | Three-column footer arrangement for navigation, company links, and locations. | site navigation, location discovery | small uppercase labels, low-contrast text, location columns |
| 10 | footer | Compact legal and contact row below the main footer content. | email contact, legal disclosure, social links | muted small text, thin inset divider, icon links |

## Source CSS custom properties (selected)

```css
--color-bg: #000000;
--color-text: #ffffff;
--font-display: "VisueltPro", system-ui, sans-serif;
```

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