sequencehq.com — Design System

1. Visual Theme & Atmosphere

Sequence communicates trust and precision — the visual language of a serious B2B finance tool that has invested in taste. The palette is near-monochrome: a very dark charcoal body text on a clean white canvas, softened by a warm mid-grey border system. Nothing shouts. The typography is restrained to a single bespoke typeface at low weights, letting white space do the heavy lifting. The overall feeling is that of a well-typeset financial report: efficient, considered, and deliberately undecorated. Shadows appear sparingly and only at low opacity to lift interactive cards without drama.

2. Color Palette & Roles

The palette is intentionally minimal — no accent color appears in the extracted data. Brand differentiation is carried entirely by typography and layout, not color. Avoid introducing any color that feels “startup blue” or attention-grabbing; neutrality is the brand.

3. Typography Rules

Typeface: twkLausanne (custom, with system fallback). A geometric grotesk with optically balanced strokes — it reads as modern-neutral rather than tech-cold.

Notable: headings use the same size as body or smaller — hierarchy is established through layout and spacing, not size jumps or weight changes. Letter-spacing is kept at normal throughout; no expanded or condensed tracking. Font weight never rises above 400 in base styles — variations (if any) are contextual.

4. Component Stylings

• Buttons: Transparent background with rgb(229, 231, 235) border, secondary-grey label. Low visual footprint — text-forward over icon-forward.
• Cards / surfaces: White background with a very subtle drop shadow (rgba(0,0,0,0.05) 0 10px 15px -3px, rgba(0,0,0,0.05) 0 4px 6px -4px). This is the only elevation used.
• Inputs / dividers: Unified border color (rgb(229, 231, 235)) — no special focus ring colors detected; minimalist treatment.
• Header: Full white, no shadow, flush edges.
• No border-radius values were detected — components likely use sharp or very subtly rounded corners, or radius is applied inline per component via utility classes.

5. Layout Principles

• Zero margin/padding on body, main, header — layout is handled entirely by inner components and grid containers.
• Footer uses a minimal bottom padding (4px) — almost flush.
• Breakpoints detected: 1266px and 1280px — a single wide-layout breakpoint, implying a primarily desktop-first product (likely a SaaS dashboard).
• Stack: Next.js — App Router likely, with Tailwind-managed spacing via class names rather than global CSS rules.
• Dense information layouts are expected; the type scale skews small (12–16px) to accommodate data-rich views.

6. Depth & Elevation

Sequence uses a single-level elevation system. The only shadow found (rgba(0,0,0,0.05) at two offsets) is used to lift card-like surfaces above the page — essentially a layer-1 floating surface. There is no layer-2 or modal-level shadow in the extracted data. This restraint prevents visual noise in data-heavy interfaces.

• Layer 0: Page background (white/transparent)
• Layer 1: Cards, dropdowns — box-shadow: rgba(0,0,0,0.05) 0 10px 15px -3px, rgba(0,0,0,0.05) 0 4px 6px -4px
• No glassmorphism, no gradients, no border-glow effects.

7. Do’s and Don’ts

Do:

• Use twkLausanne at weight 400 exclusively for UI text.
• Establish hierarchy through spacing, not font size or weight escalation.
• Keep all borders at rgb(229, 231, 235) — one border color, used everywhere.
• Use rgb(29, 29, 32) for all primary text; never pure #000.
• Limit elevation to a single soft two-layer shadow.

Don’t:

• Add accent colors, gradient fills, or colorful CTAs.
• Use bold (700+) font weights in the main UI.
• Apply border-radius unless it matches existing component patterns.
• Introduce multiple shadow levels or glows.
• Use uppercase or tracked-out letter-spacing for labels.

8. Responsive Behavior

Single major breakpoint at ~1280px. The design is desktop-first and primarily serves a professional dashboard context. Mobile layout data is minimal, suggesting:

• Sidebar navigation likely collapses.
• Dense table/data views reflow to single-column or horizontal scroll.
• Type sizes remain constant (no detected responsive scaling).
• No fluid typography (clamp) patterns in extracted data.

9. Agent Prompt Guide

Build a Sequence-style UI: monochrome professional with twkLausanne at 400 weight throughout. Use #1d1d20 for text, #fff surfaces, and #e5e7eb for all borders and dividers. No accent colors — hierarchy via spacing only. Cards float with a single two-layer rgba(0,0,0,0.05) shadow. Keep font sizes in the 12–16px range. Think financial SaaS: precise, quiet, trustworthy.

Generated by Sparkbites — extracted from live CSS analysis