DESIGN.md · measured October 21, 2026

Typefully design system

Dark interface measured from typefully.com: Inter type with inter-arrows-subset, vivid blue accents, tonal surfaces and 6px corners.

Background: #111418
Primary: #199AF5
Type: Inter
Corners: 6px

Download DESIGN.md

From typefully.com ↗ · 382 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with Typefully

Typefully colors

16 roles measured on the page, grouped by where each color is used.

Surfaces

Cool Charcoal#111418background · --bg0Page background · 1×

Cool Graphite#282B31surface-container-lowRaised areas one step from the page · 25×

Cool Graphite 30%#32363E4DoverlayTranslucent fill for cards and controls · 1×

Blue 30%#5A62724Doverlay-strongStronger translucent fill · 1×

Text

Cool Silver#C4C9D4on-surfacePrimary text and headings · 52×

White#FFFFFFon-surface-strong · --color-typ-verified-badgeHeadings and emphasis · 37×

Blue#8B94A7on-surface-variant · --c3Secondary text · 25×

Blue#5A6272on-surface-mutedMuted text and metadata · 8×

White#FFFFFFon-primaryText and icons on primary

Accents

Vivid Blue#199AF5primaryPrimary buttons and calls to action · 13×

Vivid Teal#00E5CCsecondaryAccent · 2×

Borders

Blue 50%#5A627280outlineBorders and dividers · 25×

Blue 30%#5A62724Doutline-variantSecondary dividers · 25×

Status

Red#FF4D4DerrorErrors and destructive states · 2×

Green#34A853successSuccess and positive states · 1×

Vivid Amber#FBBC05warningWarnings and highlights · 1×

Gradients

Typefully fonts

3 families.

AaInterWeights 400, 500, 600, 700Inter, -apple-system, system-ui, Helvetica Neue

Aainter-arrows-subsetWeights 400inter-arrows-subset, GT America, Helvetica Neue, Arial

Aaui-monospaceMonospace · Weights 400ui-monospace, SFMono-Regular, Menlo, Monaco

headline-displayPage title (h1)Typefully44px · 700 · 1.14
mobile 28px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog36px · 700 · 1.16
mobile 26px

body-mdBody textThe quick brown fox jumps over the lazy dog14px · 400 · 1.45

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog16px · 400 · 1.25 · -0.019em

body-smSecondary and small textThe quick brown fox jumps over the lazy dog11px · 400 · 1

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 600 · 1.5

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog15.5px · 600 · 1.5

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog15px · 500 · 1.3

codeCode and technical valuesconst ready = true;14.5px · 400 · 1.5

Contrast

Text on #111418

AaAAA11.1:1

AaAAA18.5:1

AaAA6.1:1

AaLarge only3.0:1

Spacing

No strict grid · 54% are multiples of 4px

xs3px

sm8px

md12px

lg18px

xl64px

gutter12px

section64px

container1292px

Breakpoints: 375px 420px 520px 600px 640px 680px 720px 800px 840px 1024px 1280px 1440px

Shapes

Corner radii, most used first.

sm6px · 24×

md9.6px · 8×

lg12px · 4×

Depth

Shadow

Components

Rebuilt from the measured CSS.

button-primaryFilled button

Google

button-secondaryFilled button

button-ghostText button

Inline link

linkInline link

Motion

Interface transitions

0.2s0.15s0.3s

cubic-bezier(0.4, 0, 0.2, 1)ease

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #111418 for the page and lift surfaces in small steps: #282B31.
Keep text in 4 levels: #C4C9D4, #FFFFFF, #8B94A7, #5A6272.
Reserve #199AF5 for primary actions and key highlights.
Reuse the measured spacing steps (8px, 12px, 18px).
Use 6px corners on most elements; larger surfaces also use 9.6px and 12px.
Use #5A6272 for body text; it reaches 3.0:1 on #111418. Keep it for large text or metadata.
Introduce new font families beyond Inter, inter-arrows-subset and ui-monospace.
Use #199AF5 for large backgrounds or body text.
Make interface transitions slower than 0.3s.

DESIGN.md215 lines

---
version: alpha
name: Typefully
description: "Dark interface measured from typefully.com: Inter type with inter-arrows-subset, vivid blue accents, tonal surfaces and 6px corners."
colors:
  background: "#111418"
  surface: "#111418"
  on-surface: "#C4C9D4"
  on-background: "#C4C9D4"
  on-surface-strong: "#FFFFFF"
  on-surface-variant: "#8B94A7"
  on-surface-muted: "#5A6272"
  surface-container-low: "#282B31"
  overlay: "#32363E4D"
  overlay-strong: "#5A62724D"
  outline: "#5A627280"
  outline-variant: "#5A62724D"
  primary: "#199AF5"
  on-primary: "#FFFFFF"
  secondary: "#00E5CC"
  error: "#FF4D4D"
  success: "#34A853"
  warning: "#FBBC05"
typography:
  headline-display:
    fontFamily: Inter
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.14
  headline-lg:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.16
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
  body-lg:
    fontFamily: inter-arrows-subset
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.019em
  body-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1
  label-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
  label-md:
    fontFamily: Inter
    fontSize: 15.5px
    fontWeight: 600
    lineHeight: 1.5
  label-sm:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.3
  code:
    fontFamily: ui-monospace
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.14
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.16
rounded:
  sm: 6px
  md: 9.6px
  lg: 12px
spacing:
  xs: 3px
  sm: 8px
  md: 12px
  lg: 18px
  xl: 64px
  gutter: 12px
  section: 64px
  container: 1292px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 0px 10px
    height: 26px
  button-secondary:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    padding: 0px 18px
    height: 40px
  button-ghost:
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.md}"
    padding: 0px 10px
  link:
    textColor: "{colors.primary}"
---

# Typefully Design System

## Overview

Typefully describes itself as: “Create, schedule, and publish social media posts on X (Twitter), LinkedIn, Threads, Bluesky, and more. Grow faster with analytics, tools and automations.” The interface is dark, built on **Cool Charcoal (#111418)** with **Cool Silver (#C4C9D4)** text, and **Vivid Blue (#199AF5)** as the main accent.

Type is set in **Inter** and **inter-arrows-subset**, with **ui-monospace** for code. Headlines run large; body text is 14px. Depth comes from soft drop shadows. Corners are mostly 6px.

Measured from [typefully.com](https://typefully.com/) on October 21, 2026 at 1440×900 and 390×844 from 382 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 16 roles, plus gradient stops #7B63F2, #8B5CF6.

- **Cool Charcoal (#111418):** Page background, seen 1 time. Token `background`, CSS `--bg0`.
- **Cool Silver (#C4C9D4):** Primary text and headings, seen 52 times. Token `on-surface`.
- **White (#FFFFFF):** Headings and emphasis, seen 37 times. Token `on-surface-strong`, CSS `--color-typ-verified-badge`.
- **Blue (#8B94A7):** Secondary text, seen 25 times. Token `on-surface-variant`, CSS `--c3`.
- **Blue (#5A6272):** Muted text and metadata, seen 8 times. Token `on-surface-muted`.
- **Cool Graphite (#282B31):** Raised areas one step from the page, seen 25 times. Token `surface-container-low`.
- **Cool Graphite 30% (#32363E4D):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Blue 30% (#5A62724D):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Blue 50% (#5A627280):** Borders and dividers, seen 25 times. Token `outline`.
- **Blue 30% (#5A62724D):** Secondary dividers, seen 25 times. Token `outline-variant`.
- **Vivid Blue (#199AF5):** Primary buttons and calls to action, seen 13 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Teal (#00E5CC):** Accent, seen 2 times. Token `secondary`.
- **Red (#FF4D4D):** Errors and destructive states, seen 2 times. Token `error`.
- **Green (#34A853):** Success and positive states, seen 1 time. Token `success`.
- **Vivid Amber (#FBBC05):** Warnings and highlights, seen 1 time. Token `warning`.

## Typography

**Inter**, **inter-arrows-subset** and **ui-monospace** (monospace) share the interface. Fallback stack: `Inter, -apple-system, system-ui, Helvetica Neue`. Other loaded fonts: Roboto, GT America.

- **headline-display:** Inter 44px at weight 700, line height 1.14 (28px on mobile). Page title (h1).
- **headline-lg:** Inter 36px at weight 700, line height 1.16 (26px on mobile). Section headings (h2).
- **body-md:** Inter 14px at weight 400, line height 1.45. Body text.
- **body-lg:** inter-arrows-subset 16px at weight 400, line height 1.25, tracking -0.019em. Lead paragraphs.
- **body-sm:** Inter 11px at weight 400, line height 1. Secondary and small text.
- **label-lg:** Inter 16px at weight 600, line height 1.5. Large buttons and tabs.
- **label-md:** Inter 15.5px at weight 600, line height 1.5. Buttons, navigation and labels.
- **label-sm:** Inter 15px at weight 500, line height 1.3. Small labels and badges.
- **code:** ui-monospace 14.5px at weight 400, line height 1.5. Code and technical values.

## Layout

Spacing does not follow a strict grid: 54% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 3px, sm 8px, md 12px, lg 18px, xl 64px.
- **Sections:** 64px vertical padding between major sections.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1292px.
- **Breakpoints:** 375px, 420px, 520px, 600px, 640px, 680px, 720px, 800px, 840px, 1024px, 1280px, 1440px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `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, oklab(0.666339 -0.0653025 -0.156603 / 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 3px -1px, rgba(0, 0, 0, 0.04) 0px 1px 4px -1px`
- `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, rgba(255, 255, 255, 0.6) 0px 0px 6px 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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px -1px, rgba(0, 0, 0, 0.04) 0px 1px 4px -1px`

## Shapes

Most elements use 6px corners. Measured radii, most used first:

- **sm (6px):** 24 elements.
- **md (9.6px):** 8 elements.
- **lg (12px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Sign up”):** #199AF5 fill, #FFFFFF text, 13.5px/600, 9.6px radius, padding 0px 10px.
- **button-secondary (“Google”):** #282B31 fill, #C4C9D4 text, 15px/500, 3.22639e+07px radius, padding 0px 18px, border 0.96px solid #5A627280, shadow `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, oklab(0.666339 -0.0653025 -0.156603 / 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 3px -1px, rgba(0, 0, 0, 0.04) 0px 1px 4px -1px`.
- **button-ghost (“Log in”):** transparent fill, #8B94A7 text, 13.5px/500, 9.6px radius, padding 0px 10px.
- **link:** transparent fill, #199AF5 text, padding 0px.

## Do's and Don'ts

- Do use #111418 for the page and lift surfaces in small steps: #282B31.
- Do keep text in 4 levels: #C4C9D4, #FFFFFF, #8B94A7, #5A6272.
- Do reserve #199AF5 for primary actions and key highlights.
- Do reuse the measured spacing steps (8px, 12px, 18px).
- Do use 6px corners on most elements; larger surfaces also use 9.6px and 12px.
- Don't use #5A6272 for body text; it reaches 3.0:1 on #111418. Keep it for large text or metadata.
- Don't introduce new font families beyond Inter, inter-arrows-subset and ui-monospace.
- Don't use #199AF5 for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.2s, 0.15s, 0.3s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/typefully.com/), the free DESIGN.md generator.

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need more than one page?

Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.

Explore the tool

More designs

See all →

GrammarlyBrand grammarly.com · matter

HootsuiteBrand hootsuite.com · Montserrat

SmartSkill smartskill.shop · IRANYekanX

Just Falafel jfvegancafe.com · Bodoni Moda

Greenpaktourism greenpaktourism.com/destinations · Poppins

Pusho pusho.fun · Yatra One

FAQ

Questions

What can I build with the Typefully DESIGN.md?

Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, Inter type, spacing, corners and buttons instead of its own defaults.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Typefully’s official design system?

No. Sitepeel measured it from typefully.com’s public page on October 21, 2026. It is an independent analysis, not made or approved by Typefully.

Can I use Typefully’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Typefully’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.