Sequence

---
version: alpha
name: Sequence
description: Replace broken tools with Sequence—run Finance at sales speed.
colors:
  primary: "#505050"
  secondary: "#202120"
  tertiary: "#344054"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-hidcote: "#9c949c"
  brand-armor-wash: "#040404"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: moderatSerif
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: moderatSerif
    fontSize: 30px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -0.025em
  headline-sm:
    fontFamily: twkLausanne
    fontSize: 25px
    fontWeight: 300
    lineHeight: 1.2
  headline-xs:
    fontFamily: twkLausanne
    fontSize: 21px
    fontWeight: 300
    lineHeight: 1.19
  body-md:
    fontFamily: twkLausanne
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.56
rounded:
  sm: 4px
  md: 12px
  lg: 20px
spacing:
  xs: 6px
  sm: 16px
  md: 36px
  lg: 74px
  xl: 112px
components:
  button-primary:
    backgroundColor: "#efefef"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Sequence: Aurora-Washed Hero, Enterprise-Calm UI Below

## Overview

Sequence targets finance and RevOps teams working with complex, custom contracts. The interface should read professional and calm: high-contrast text, white surfaces, and subtle chroma only in imagery. Space is generous at section level but compact inside modules to fit dense data. When tokens are missing, prefer grayscale with borders and typographic hierarchy over color fills or shadows.

## Colors

- Primary (#505050): Graphite body text and default UI copy.
- Secondary (#202120): Near-black for headings, key labels, and high-emphasis text.
- Tertiary (#344054): Cool slate for links, metadata, and tertiary headings.
- Neutral (#ffffff): Paper-white surfaces for pages, cards, and modals.
- Border (#e5e7eb): Keyline gray for dividers, table rows, and card outlines.
- Brand-hidcote (#9c949c): Lavender-gray accent for subtle UI chrome and backgrounds in illustrations.
- Brand-armor-wash (#040404): Inkwell black for rare, highest-emphasis text or CTAs.
- Surface ({colors.neutral}): Default background layer for content regions.
- On-surface ({colors.primary}): Default text color on white surfaces.

## Typography

- Display: headline-lg (Moderat Serif, 36px/1.0, 400) and headline-md (Moderat Serif, 30px/1.0, 300) carry hero and major section headlines. Font source is custom/self-hosted; agents cannot load it directly. Recommended substitutes: Source Serif 4, IBM Plex Serif, or Merriweather.
- Section/Widget titles: headline-sm (Twk Lausanne, 25px/1.2, 300) and headline-xs (Twk Lausanne, 21px/1.19, 300) for card titles and module headers. Twk Lausanne is custom/self-hosted; use Inter, IBM Plex Sans, or Work Sans as substitutes.
- Body: body-md (Twk Lausanne, 18px/1.56, 300) for paragraphs, lists, and descriptions. Keep copy lengths short inside dense modules; rely on weight and spacing rather than color for hierarchy.
- Pairing guidance: Serif for marquee statements only; all utilities, tables, and labels remain in the sans family for clarity.

## Layout

- Spacing scale: xs 6px for tight gaps, sm 16px for card padding and inline gutters, md 36px as the base block spacing, lg 74px for section tops/bottoms, xl 112px for hero bands.
- Grid: Use a 12-column layout with wide outer gutters; inside feature modules, switch to two or three columns with 16–36px gutters.
- Rhythm: Vertically stack elements in 36px increments; in dense lists, alternate 16px content spacing with 6px micro gaps for labels and meta.
- Constrain demo UIs to readable widths; prefer white margins over edge-to-edge blocks.

## Elevation & Depth

Shadows are largely absent. Use 1px keylines (border #e5e7eb) and the measured sm outline (lab(...) 0px 0px 0px 1px) for focus or hover rings. The 'inner' inset hairline may be used to hint at input wells. Hierarchy is communicated by spacing, type scale, and occasional tonal shifts rather than drop shadows.

## Shapes

Corner language is geometric-soft: sm 4px for pills, tags, and chips; md 12px for cards and screenshots; lg 20px for the primary CTA. Use one radius per component; don't mix 4px and 12px within the same block.

## Components

Buttons and card tokens
- Button — Primary: 40px tall, 12px×16px padding, lg radius 20px, background #efefef, text #505050. Use for principal CTAs.
- Button — Secondary: 40px, 12px×16px, sm radius 4px, text #505050 on transparent/white; rely on keyline for affordance.
- Button — Link: No radius, text #505050; inline, no container.
- Card: White background, text #505050, md radius 12px, 16px padding. Add 1px border #e5e7eb when placed on white to preserve edges.

Distinctive page components

### Announcement Bar
- Full-width strip above the nav. Text in body-md, secondary color for emphasis. Use 16px vertical padding and keyline separator.

### Top Navigation with CTA
- Left logo, centered product menus, right auth + "Book demo." Maintain 74px overall header height; CTA uses lg 20px radius and 12×16px padding.

### Hero with Aurora Wash
- Centered copy: headline-lg at 36px, body-md description, single primary button. Section padding xl 112px with generous white margins; avoid heavy shadows.

### Customer Proof Strip
- Row of monochrome logos under hero with G2 rating link. Use 16px vertical padding and 1px top/bottom keylines.

### Product Suite Grid
- 2–4 columns depending on width. Each item: card (12px radius, 16px padding), title in headline-xs (21px), one-line body in 18px. Icons or simple line illustrations may sit left with 16px gap.

### Agent Canvas Demo
- Central contract card (md 12px radius) with small satellite docs labeled "Sent." Use border #e5e7eb and sm outline on hover; labels in tertiary #344054.

### Pricing Engine Playground
- Two-panel editor: controls at left, live invoice examples at right. Titles at 21–25px, monos or numerals in body-md; table rows separated by #e5e7eb keylines.

### Watchtower Review Inbox
- Left column: task feed; right: selected case detail. List items are 56–64px rows with 1px separators; status chips use sm 4px radius and secondary text color.

### Agent Builder
- Tabbed editor (Overview, Instructions, Guardrails). Use cards with 16px padding; checklist bullets in body-md; tool/app badges at sm 4px radius.

### Automation Workflow Builder
- Trigger/Condition/Action blocks stacked with 16–36px gaps; each block is a card with 12px radius and 1px border. Titles at 21px, body-md explainer below.

### Invoice List and Bulk Actions
- Grid of invoice cards; each card 12px radius, 16px padding. Bulk toolbar docks with keyline; primary actions 'Finalise' and 'Send' use button tokens.

## Do's and Don'ts

- Do reserve the serif (Moderat Serif or substitute) for large headlines only; keep UI text in the sans.
- Do use the spacing ladder (16/36/74/112) rather than arbitrary values to preserve rhythm.
- Do outline cards and rows with #e5e7eb; when on white, add the 1px keyline to avoid floating text.
- Don't introduce saturated brand colors into UI surfaces; keep color minimal and rely on type and spacing.
- Don't add drop shadows; use the sm outline or borders for focus and elevation.
- Don't mix radii inside a component; pick 4px for chips, 12px for cards, 20px for the marquee CTA.

## Agent Prompt Guide

Quick reference
- Text: #505050 (primary)
- Background: #ffffff (neutral / surface)
- Border: #e5e7eb
- Accent: #344054 (tertiary) or #040404 for rare, high-emphasis text

Prompts
1) Build a hero section
- Container: max-width 1200px, centered, padding-top/bottom 112px, sides 36px. Background #ffffff.
- H1: 36px/1.0, weight 400, family "Source Serif 4", fallback serif; color #202120.
- Subcopy: 18px/1.56, family "Inter", fallback sans; color #505050; max-width 720px.
- Primary button: height 40px; padding 12px 16px; radius 20px; background #efefef; text #505050.
- Add a monochrome logo strip below with 16px vertical padding and borders #e5e7eb.

2) Create a 3-column Product Suite grid
- Each card: background #ffffff; radius 12px; padding 16px; 1px border #e5e7eb.
- Title: 21px/1.19, family "Inter"; color #202120.
- Body: 18px/1.56, family "Inter"; color #505050.
- Grid gap: 36px; section padding-top 74px, bottom 74px.

3) Build the Watchtower inbox module
- Layout: left list (360px) + right detail (flex 1); gap 36px; container padding 36px.
- Row: 56px height; bottom border #e5e7eb; title 21px sans #202120; meta 18px #344054.
- Detail panel: card with radius 12px, padding 16px; headings 25px sans; body 18px.

4) Automation workflow builder
- Stack Trigger, Condition, Actions as individual cards (radius 12px, padding 16px, border #e5e7eb), 16px gaps.
- Section title: 30px serif, color #202120. Labels in 18px sans #505050. Chips (Yes/No): radius 4px, 1px border #e5e7eb.

## Similar Brands

- Stripe: Similar grayscale restraint and keyline-first hierarchy; Sequence adds a serif in headlines and aurora imagery for warmth.
- Ramp: Shares the enterprise-clean tables and outlines; Sequence leans more into agent/automation demos.
- Linear: Minimal UI with precise borders; Sequence introduces a serif and finance-specific modules.
- Intercom: Marketing pages mixing serif display with sans UI text; Sequence is cooler and more data-dense.
- Vercel: White surfaces and black typography discipline; Sequence applies the same rigor to finance workflows with fewer dark sections.

:root {
  /* Colors */
  --color-primary: #505050;
  --color-secondary: #202120;
  --color-tertiary: #344054;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-hidcote: #9c949c;
  --color-brand-armor-wash: #040404;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 36px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 30px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1;
  --text-headline-md-tracking: -0.025em;
  --text-headline-sm-size: 25px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 21px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 18px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.56;
  --font-moderatserif: "moderatSerif";
  --font-twklausanne: "twkLausanne";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 36px;
  --spacing-lg: 74px;
  --spacing-xl: 112px;

  /* Components */
  --button-primary-background-color: #efefef;
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-lg);
  --button-primary-padding: 12px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 12px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Replace broken tools with Sequence—run Finance at sales speed.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.314,
          0.314,
          0.314
        ],
        "hex": "#505050"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.125,
          0.129,
          0.125
        ],
        "hex": "#202120"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.204,
          0.251,
          0.329
        ],
        "hex": "#344054"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "brand-hidcote": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.612,
          0.58,
          0.612
        ],
        "hex": "#9c949c"
      }
    },
    "brand-armor-wash": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.016,
          0.016,
          0.016
        ],
        "hex": "#040404"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.314,
          0.314,
          0.314
        ],
        "hex": "#505050"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 74,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 112,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 20,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "moderatSerif",
        "fontSize": {
          "value": 36,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.025,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "moderatSerif",
        "fontSize": {
          "value": 30,
          "unit": "px"
        },
        "fontWeight": 300,
        "letterSpacing": {
          "value": -0.025,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "twkLausanne",
        "fontSize": {
          "value": 25,
          "unit": "px"
        },
        "fontWeight": 300
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "twkLausanne",
        "fontSize": {
          "value": 21,
          "unit": "px"
        },
        "fontWeight": 300
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "twkLausanne",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 300
      }
    }
  }
}