v2.4

Webhooks are live.

Read the changelog →

01

Style guide

Tokens, type and parts

01

Style guide

Tokens, type and parts

01

Style guide

Tokens, type and parts

01

Style guide

Tokens, type and parts

Everything on this site is built from these pieces. Change a token or a text style here and every page follows.

Colour tokens

One accent. Warm neutrals. Nothing else.

Surface/Background

Surface/Alt

Surface/Card

Text/Primary

Text/Muted

Line/Rule

Line/Border

Ink/Base

Ink/2

Ink/3

Accent/Base

Accent/Hover

Accent/Tint

Accent/On Ink

Status/Positive

Status/Caution

Status/Critical

Text/On Ink

Text styles

Anton for display, Geist for reading, Plex Mono for data.

Display/XL

Display/XL

Your whole stack, one plane.

Display/L

Display/L

One plane, not twelve tabs.

Display/Numeral

Display/Numeral

01

Display/Metric

Display/Metric

99.98%

Heading/Step

Heading/Step

Every connection, with its own state

Heading/H3

Heading/H3

Change history you can read

Heading/H4

Heading/H4

Sources panel, redesigned

Body/Lead

Body/Lead

Tessel connects the tools your team already runs and puts them on a single surface.

Body/Base

Body/Base

Each source arrives as a row and keeps its sync status, last update and owner.

Body/Small

Body/Small

Every edit, every sync, every retry — with who, what and when.

Mono/Label

Mono/Label

Section label

Mono/Button

Mono/Button

Start free

Mono/Meta

Mono/Meta

Synced 2 min ago

Mono/Code

Mono/Code

POST /hooks/sync → 200

Parts

Buttons, pills, a question and a form field.

Positive

Caution

New

Neutral

What does a question look like?

Like this. Tap to close it. The plus turns into a minus and the answer collapses.

Field

How to customize

Four places to change, in this order.

01

Colours

Open Styles → Colors. Every token has a role name — Surface, Text, Line, Ink, Accent, Status. Change the value; every page follows. Keep one accent.

02

Type

Styles → Text. Display styles use Anton and should never go below 28 px. Swap the families here, not on the canvas; sizes per breakpoint live inside each style.

03

Content

Everything repeatable is in the CMS: Reviews, Changelog, Integrations, Blog, Careers. Add an item and it appears in every list and detail page. Static copy lives on the page.

04

Layout

Four breakpoints: Large (1440), Desktop (1200), Tablet (810), Phone (390). The grid overlay and nav live in the Site Layout template — edit once. Keep the inset: 128 px desktop, 160 px Large.

04

Layout

Four breakpoints: Large (1440), Desktop (1200), Tablet (810), Phone (390). The grid overlay and nav live in the Site Layout template — edit once. Keep the inset: 128 px desktop, 160 px Large.

Create a free website with Framer, the website builder loved by startups, designers and agencies.