Skip to content
Markdown
All sites
Unify logo

Unify

Outbound AI agents for every sales rep

Collect Unify

Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.

Visit site (opens unifygtm.com in a new tab)Use this style

The style

A confident, editorial sales-tech language. Warm cream paper, heavy serif headlines set very tight, and near-black ink for text and actions. Buttons are small-cornered rectangles rather than pills, dark bands break up long pages, and a single hot orange-red from the brand mark adds energy.

Colours

  • Brand#201c1e
  • Buttons#201c1e
  • Highlight#fe1c01
  • Background#fdfdf9
  • Text#241e20

Click a colour to copy it.

Fonts

Source Serif 4

For headings

DM Sans

For everything else

Free fonts that look like Unify’s own, so you can use them anywhere.

Buttons

Get startedContinueCancel

47px near-black buttons with cream labels and 5px corners.

Use this style in your project

Pick the way that suits you. The first one needs no design or coding knowledge.

With an AI tool

Your AI tool builds the page for you, in Unify’s style.

2. Open it in

For developers

Ready-made CSS variables, a Tailwind theme and design tokens, with light and dark modes.

See the code

Make it your own

Change the colours, fonts and shapes, and see the result straight away before you use it.

Customise

Files

The code, ready to copy

Every file says where the style came from.

tokens.css — Colours, fonts and sizes as CSS variables, with light and dark modes.

/* Paper Outbound — design tokens generated by Markdown */
/* Derived from an analysis of unifygtm.com; how different from the source: a little different (30/100). */
/* Inspired by, not a copy of, the source. Adapt before commercial use; no logos, imagery, copy or proprietary fonts are included. */

:root {
  color-scheme: light;
  --color-background: #fdfdf9;
  --color-surface: #f8f7f3;
  --color-surface-muted: #f2f2ee;
  --color-text: #241e20;
  --color-text-muted: #716e6d;
  --color-border: #dcdcdc;
  --color-primary: #201c1e;
  --color-on-primary: #ffffff;
  --color-brand: #201c1e;
  --color-on-brand: #ffffff;
  --color-accent: #fe1c01;
  --color-success: #2f7e54;
  --color-warning: #9c691c;
  --color-danger: #a3443e;
  --font-display: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-display: 6rem;
  --text-display-line-height: 1;
  --text-display-weight: 700;
  --text-display-tracking: -0.035em;
  --text-h1: 4.1875rem;
  --text-h1-line-height: 1.03;
  --text-h1-weight: 700;
  --text-h1-tracking: -0.028em;
  --text-h2: 2.9375rem;
  --text-h2-line-height: 1.06;
  --text-h2-weight: 700;
  --text-h2-tracking: -0.021em;
  --text-h3: 2.0625rem;
  --text-h3-line-height: 1.15;
  --text-h3-weight: 700;
  --text-h3-tracking: -0.014em;
  --text-lead: 1.4375rem;
  --text-lead-line-height: 1.5;
  --text-lead-weight: 400;
  --text-lead-tracking: -0.005em;
  --text-body: 1rem;
  --text-body-line-height: 1.6;
  --text-body-weight: 400;
  --text-body-tracking: 0em;
  --text-small: 0.6875rem;
  --text-small-line-height: 1.5;
  --text-small-weight: 400;
  --text-small-tracking: 0.005em;
  --text-caption: 0.6875rem;
  --text-caption-line-height: 1.4;
  --text-caption-weight: 400;
  --text-caption-tracking: 0.01em;
  --text-label: 0.8125rem;
  --text-label-line-height: 1.3;
  --text-label-weight: 600;
  --text-label-tracking: 0.01em;
  --text-code: 0.875rem;
  --text-code-line-height: 1.55;
  --text-code-weight: 400;
  --text-code-tracking: 0em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 120px;
  --space-10: 160px;
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 13px;
  --radius-full: 9999px;
  --border-width: 1px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --duration-fast: 110ms;
  --duration-base: 190ms;
  --duration-slow: 310ms;
  --ease-standard: ease;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --container: 1216px;
  --gutter: 24px;
  --button-radius: 5px;
  --button-padding: 14px 16px;
  --input-radius: 5px;
  --input-height: 48px;
  --card-radius: 8px;
  --card-padding: 24px;
  --badge-radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-background: #161610;
    --color-surface: #22221c;
    --color-surface-muted: #272721;
    --color-text: #f0f0ea;
    --color-text-muted: #9d9d97;
    --color-border: #42423c;
    --color-primary: #a5989e;
    --color-on-primary: #141210;
    --color-brand: #a5989e;
    --color-on-brand: #141210;
    --color-accent: #fe523e;
    --color-success: #72ca9b;
    --color-warning: #e0a752;
    --color-danger: #cd7f7a;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #161610;
  --color-surface: #22221c;
  --color-surface-muted: #272721;
  --color-text: #f0f0ea;
  --color-text-muted: #9d9d97;
  --color-border: #42423c;
  --color-primary: #a5989e;
  --color-on-primary: #141210;
  --color-brand: #a5989e;
  --color-on-brand: #141210;
  --color-accent: #fe523e;
  --color-success: #72ca9b;
  --color-warning: #e0a752;
  --color-danger: #cd7f7a;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}
See every detail

Buttons

Inputs

Badges

New ActivePendingOverdue

Project

Quarterly field notes

Draft

A card groups one idea: a title, one line of support and a clear next step.

Updated 2h agoOpen project

Weekly digest is ready

Three new comments and one approval.

npm i @brandless/ui

01

Colour

Semantic roles for light mode. Contrast is checked against WCAG AA as you edit.

  • Background

  • Surface

  • Surface muted

  • AA 16.1:1

    Text

  • AA 5.0:1

    Text muted

  • Border

  • AA 16.5:1

    Primary

  • AA 16.9:1

    On primary

  • Brand

  • AA 16.9:1

    On brand

  • AA 3.8:1

    Accent

  • AA 4.9:1

    Success

  • AA 4.6:1

    Warning

  • AA 6.0:1

    Danger

02

Typography

Base 16px on a 1.432 modular scale. Only open-licence fonts are recommended.

display

Source Serif 4

Open alternative to Feature Text

body

DM Sans

Open alternative to Saans

mono

Space Mono

Suggested
  • display · 96px / 1 · 700 · -0.035em

    The quiet grammar of form

  • h1 · 67px / 1.03 · 700 · -0.028em

    The quiet grammar of form

  • h2 · 47px / 1.06 · 700 · -0.021em

    The quiet grammar of form

  • h3 · 33px / 1.15 · 700 · -0.014em

    The quiet grammar of form

  • lead · 23px / 1.5 · 400 · -0.005em

    Readable text sets the pace of an interface.

  • body · 16px / 1.6 · 400 · 0em

    Readable text sets the pace of an interface.

  • small · 11px / 1.5 · 400 · 0.005em

    Readable text sets the pace of an interface.

  • caption · 11px / 1.4 · 400 · 0.01em

    Readable text sets the pace of an interface.

  • label · 13px / 1.3 · 600 · 0.01em

    Readable text sets the pace of an interface.

  • code · 14px / 1.55 · 400 · 0em

    const tokens = await load();

03

Spacing

A 8px base unit. Use the scale for padding, gaps and section rhythm.

  • 4px
  • 8px
  • 12px
  • 16px
  • 32px
  • 40px
  • 64px
  • 80px
  • 120px
  • 160px

04

Shape & surface

Flat, paper-like planes separated by fine rules instead of elevation.

Radii

  • none

    0px

  • sm

    3px

  • md

    5px

  • lg

    8px

  • xl

    13px

  • full

    pill

Shadows & borders

shadow-sm

none

shadow-md

none

shadow-lg

none

Borders: 1px hairline · Surfaces: paper

06

Layout

1216px container · 12 columns · 24px gutters

Patterns

  • Wide single-column hero with generous vertical rhythm between sections.
  • Twelve-column grid; content blocks usually span 4, 6 or 8 columns.
  • Contained sections with consistent side gutters.
  • Reading text limited to roughly 65–72 characters per line.

Responsive principles

  • Below md, grids collapse to a single column and side gutters drop to 16px.
  • Type steps above h2 scale down one step on small screens.
  • Navigation collapses to a disclosure menu below lg.
  • Touch targets stay at least 44×44px on every breakpoint.

07

Motion

Durations and easing curves. Previews respect your reduced-motion setting.

  • fast
    110ms
  • base
    190ms
  • slow
    310ms
  • ease-standard

  • ease-enter

  • ease-exit

Principles

  • Motion is measured and calm, easing into place rather than snapping.
  • Animate opacity and transform only; avoid animating layout.
  • Respect prefers-reduced-motion by replacing movement with instant state changes or fades.

Unify, its logo and trademarks belong to their owner and are shown only to say where this style comes from. This is our own study of their public website — not made or endorsed by Unify. Use your own words and images.

  • New

    Collect Granola

    Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.

    Granola logo

    Granola

    An AI notepad for back-to-back meetings

  • New

    Collect Cloudflare

    Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.

    Cloudflare

    The connectivity cloud that powers a fifth of the internet

  • New

    Collect Vercel

    Keep the sites you like in one place and come back to them any time. Browsing stays free — no account needed.

    Vercel

    A cloud platform for building and shipping websites