DESIGN.md · Free

Compose Digi design system

Digital marketing agency website: a near-white page, near-black type and dark bands, one lime accent, pill-shaped buttons and links, set in DM Sans.

The style

Compose Digi is a website template for digital marketing agencies: services with weekly and monthly plans, case studies, careers with job openings, a blog and a contact form. It should feel confident, clean and current: a light page with large type, big photos with rounded corners, and one loud accent colour used sparingly.

The look is built from few parts. The page is a near-white Background (#FCFCFC); type is Ink (#101010), with Grey (#595959) for leads, descriptions and card meta, and Silver (#BFBFBF) for every 1px rule and divider. The header sits in a pale Surface bar (#F5F5F5) with round ends, its links in a Line pill (#D9D9D9). Lime (#B3FF00) is the accent: the current nav link, the primary buttons, the round arrow button and the hover fill of the dark buttons. Ink fills the dark parts — the footer's ticker band, the Load More and Submit buttons, the chosen client chip and the slider of the plan switch — with light text on them.

Everything is set in DM Sans (Inter only for the footer's huge service names and the line under its logo): 500 for headings, 400 for text, and an upper-case menu style (13px, 0.03em) for nav links, buttons, text links, eyebrows and dates. Buttons, nav links, chips and the switch are pills; photos and cards have 10px corners (8px on project cards), fields 4px. Motion is quick and springy: labels roll up to a second copy on hover, arrows turn 45°, underlines grow from the left, card photos zoom out from 105% to 100%, rows of cards and names run sideways in endless tickers, and a custom cursor follows the pointer and turns into a dark pill ("View Project", "Read") over cards. Nothing appears on load or on scroll.

Colours

Ink#101010ink · on-primary · secondary · on-surfaceBlack 13: headings and body text, the dark buttons (Load More, Submit), the footer's ticker band, the dark More box, the cursor dot, ticked checkboxes, the open accordion circle, outlines of the outlined buttons.
Ink soft#262626ink-softBlack 10: text typed into a field, a text link's hover colour in the footer and in rich text, the Submit button while pressed, one bar of the process chart.
Charcoal#454545charcoalBlack 09: the testimonial words on project cards, one bar of the process chart.
Grey#595959grey · on-surface-variantBlack 08: leads and descriptions, card meta (dates, client and year), card excerpts, the post meta labels, a field's border on focus, the job type on the job page.
Silver#BFBFBFsilver · outlineBlack 06: every 1px rule and divider, field borders, placeholders, a nav link's hover fill, the back circle of the footer's action button, the period switch's track, the quote mark on project cards.
Line#D9D9D9lineBlack 05: the header's link pill, the footer's main block, an unticked checkbox, a client chip's hover fill.
Mist#F0F0F0mistBlack 04: the fill of fields and of the pricing card.
Surface#F5F5F5surfaceBlack 03: the header bar (tablets and desktops), a focused field's fill.
Background#FCFCFCbackground · on-secondary · neutralWhite: the page, the header, light text on dark (ticker band, buttons, cursor pill, More box).
White#FFFFFFwhitePure white: the tick of a checked box, the minus of an open accordion row, the Submit spinner.
Black#000000blackPure black: the footer's line under the logo.
Accent#B3FF00accent · primaryAccent (lime): the current nav link, the primary buttons and the round arrow button, the Load More and Submit hover fill, the plus circle of the user rating.
Night#222222nightThe cursor pill (fill and border) and the year in the footer's bottom line.
Axisrgba(24, 33, 45, 0.5)axisThe process chart's dashed lines and percent labels.
Checkbox edgergba(24, 33, 45, 0.05)checkbox-edgeThe hairline around a checkbox.
Rulergba(6, 7, 9, 0.5)ruleThe 1 x 20 line between the phone number and the e-mail in the footer.
Veilrgba(16, 16, 16, 0.5)veilBlack 13 at 50%: the veil over the Home quote photo and the About video card (30% while the video card is hovered).
Veil darkrgba(16, 16, 16, 0.8)veil-darkBlack 13 at 80%: the veil over the Services call to action photo.
Backdroprgba(0, 0, 0, 0.8)backdropBehind the video player overlay.
Error#FF2244errorA field's message and border after a failed check, the Submit label after a failed send.
Error fillrgba(255, 34, 68, 0.15)error-fillThe Submit button's fill after a failed send.

Typography · DM Sans, Inter

display
72px · 500 · 1.2 · -0.04emCompose Digi
h1
56px · 500 · 1.2 · -0.04emCompose Digi
h2
42px · 500 · 1.2Compose Digi
h3
32px · 500 · 1.2Compose Digi
h4
28px · 500 · 1.2Compose Digi
h5
24px · 500 · 1.2Compose Digi
h6
20px · 500 · 1.2Build a site that feels designed
huge
54px · 500 · 1.2 · -0.01emCompose Digi
huge-stroke
54px · 500 · 1.2 · -0.01emCompose Digi
big
18px · 400 · 1.4Build a site that feels designed
paragraph
16px · 400 · 1.4Build a site that feels designed
small
14px · 400 · 1.4Build a site that feels designed
menu
13px · 500 · 1.2 · 0.03emBuild a site that feels designed

Corners

pill · 50px
bar · 100px
card · 10px
project-photo · 8px
field · 4px
round · 9999px

Spacing

gutter · 40px
gutter-phone · 20px
gutter-tablet · 30px
section-padding · 100px
section-padding-phone · 60px
section-padding-tablet · 80px
content-max · 1440px
header-height · 112px
header-height-phone · 68px
header-height-tablet · 104px
divider-inset · 50px
divider-inset-phone · 20px
divider-inset-tablet · 30px
card-gap · 30px

Parts

Get startedGet startedGet startedGet started

client chip active

Compose Digi

A card in its own colours and corners.

Drawn from the file’s component tokens.

Do's and don'ts

set headings and body text in Ink on the Background, and use Grey for leads, descriptions and card meta.
keep lime for the current nav link, the primary buttons, the round arrow button and the hover of the dark buttons — one accent, used sparingly.
write nav links, buttons, text links, eyebrows and dates in the upper-case menu style, and headings at weight 500 with line height 1.2.
make buttons, nav links, chips and switches pills; give photos and cards 10px corners and fields 4px.
separate rows and sections with 1px Silver lines, not with boxes or shadows.
animate hovers with the springs: roll labels up to a second copy, turn arrows 45°, grow underlines from the left, zoom card photos from 105% to 100%.

add shadows or new colours; the palette above is the whole palette.
use lime for running text or large backgrounds; it is a marker and a fill for small controls.
put light text on a photo without the veil under it.
use Inter outside the footer's huge service names and the line under its logo; DM Sans sets everything else.
make things appear on load or on scroll; motion answers the pointer, the tickers and the scroll-linked photos only.

Get Compose Digi

Compose Digi

Digital marketing agency website template

Framer
Next.js
Astro
HTML
Figma
AI prompt

12 pages

This file describes Compose Digi’s style. The template is the whole site: every page, its content and its motion, free to remix in Framer, with code editions for selected plans.

Remix free in Framer Live preview Every edition

---
version: "alpha"
name: "Compose Digi"
description: "Digital marketing agency website: a near-white page, near-black type and dark bands, one lime accent, pill-shaped buttons and links, set in DM Sans."
colors:
  ink: "#101010"
  ink-soft: "#262626"
  charcoal: "#454545"
  grey: "#595959"
  silver: "#BFBFBF"
  line: "#D9D9D9"
  mist: "#F0F0F0"
  surface: "#F5F5F5"
  background: "#FCFCFC"
  white: "#FFFFFF"
  black: "#000000"
  accent: "#B3FF00"
  night: "#222222"
  axis: "rgba(24, 33, 45, 0.5)"
  checkbox-edge: "rgba(24, 33, 45, 0.05)"
  rule: "rgba(6, 7, 9, 0.5)"
  veil: "rgba(16, 16, 16, 0.5)"
  veil-dark: "rgba(16, 16, 16, 0.8)"
  backdrop: "rgba(0, 0, 0, 0.8)"
  error: "#FF2244"
  error-fill: "rgba(255, 34, 68, 0.15)"
  primary: "{colors.accent}"
  on-primary: "{colors.ink}"
  secondary: "{colors.ink}"
  on-secondary: "{colors.background}"
  neutral: "{colors.background}"
  on-surface: "{colors.ink}"
  on-surface-variant: "{colors.grey}"
  outline: "{colors.silver}"
typography:
  display:
    fontFamily: "DM Sans"
    fontSize: "72px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.04em"
  h1:
    fontFamily: "DM Sans"
    fontSize: "56px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.04em"
  h2:
    fontFamily: "DM Sans"
    fontSize: "42px"
    fontWeight: 500
    lineHeight: 1.2
  h3:
    fontFamily: "DM Sans"
    fontSize: "32px"
    fontWeight: 500
    lineHeight: 1.2
  h4:
    fontFamily: "DM Sans"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.2
  h5:
    fontFamily: "DM Sans"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.2
  h6:
    fontFamily: "DM Sans"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.2
  huge:
    fontFamily: "Inter"
    fontSize: "54px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.01em"
  huge-stroke:
    fontFamily: "Inter"
    fontSize: "54px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.01em"
  big:
    fontFamily: "DM Sans"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.4
  paragraph:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.4
  small:
    fontFamily: "DM Sans"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.4
  menu:
    fontFamily: "DM Sans"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "0.03em"
rounded:
  pill: "50px"
  bar: "100px"
  card: "10px"
  project-photo: "8px"
  field: "4px"
  round: "9999px"
spacing:
  gutter: "40px"
  gutter-phone: "20px"
  gutter-tablet: "30px"
  section-padding: "100px"
  section-padding-phone: "60px"
  section-padding-tablet: "80px"
  content-max: "1440px"
  header-height: "112px"
  header-height-phone: "68px"
  header-height-tablet: "104px"
  divider-inset: "50px"
  divider-inset-phone: "20px"
  divider-inset-tablet: "30px"
  card-gap: "30px"
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
    rounded: "{rounded.pill}"
    padding: "10px 18px"
    height: "40px"
  button-outline:
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
    rounded: "{rounded.pill}"
    padding: "10px 18px"
    height: "40px"
  button-icon:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.ink}"
    rounded: "{rounded.round}"
    size: "40px"
  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
    rounded: "{rounded.pill}"
    padding: "6px 12px"
    height: "28px"
  nav-link-active:
    backgroundColor: "{colors.accent}"
  text-link:
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
    height: "18px"
  load-more:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.menu}"
    rounded: "{rounded.pill}"
    padding: "10px 18px"
    height: "40px"
    width: "150px"
  load-more-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.ink}"
  social-button:
    textColor: "{colors.ink}"
    rounded: "{rounded.round}"
    padding: "8px"
    size: "32px"
  project-card:
    textColor: "{colors.ink}"
    typography: "{typography.h5}"
    rounded: "{rounded.project-photo}"
  post-card:
    textColor: "{colors.ink}"
    typography: "{typography.h5}"
    rounded: "{rounded.card}"
  service-accordion:
    textColor: "{colors.ink}"
    typography: "{typography.h5}"
  pricing-card:
    backgroundColor: "{colors.mist}"
    textColor: "{colors.ink}"
    rounded: "{rounded.card}"
    padding: "20px"
  plan-switch:
    backgroundColor: "{colors.silver}"
    rounded: "{rounded.pill}"
    padding: "4px"
    width: "168px"
    height: "36px"
  client-chip-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.menu}"
    rounded: "{rounded.pill}"
    padding: "5px 10px 5px 5px"
    width: "186px"
    height: "47px"
  input-field:
    backgroundColor: "{colors.mist}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.paragraph}"
    rounded: "{rounded.field}"
    padding: "0px 12px"
    height: "40px"
  checkbox:
    backgroundColor: "{colors.line}"
    rounded: "{rounded.round}"
    size: "16px"
  submit-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.menu}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: "36px"
  submit-button-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.ink}"
  cursor-pill:
    backgroundColor: "{colors.night}"
    textColor: "{colors.background}"
    typography: "{typography.menu}"
    rounded: "{rounded.pill}"
    padding: "8px 14px"
    height: "32px"
---

# Compose Digi Design System

> The design tokens and style rules of **Compose Digi**, a website template by Marcframe (live Framer site: https://compose-digital.framer.website). Read it before you build or change a page so new work matches the template. The front matter holds the exact values; the sections below say where and how to use them. Format: [DESIGN.md](https://github.com/google-labs-code/design.md), spec version `alpha`.

## Overview

Compose Digi is a website template for digital marketing agencies: services with weekly and monthly plans, case studies, careers with job openings, a blog and a contact form. It should feel confident, clean and current: a light page with large type, big photos with rounded corners, and one loud accent colour used sparingly.

The look is built from few parts. The page is a near-white Background (#FCFCFC); type is Ink (#101010), with Grey (#595959) for leads, descriptions and card meta, and Silver (#BFBFBF) for every 1px rule and divider. The header sits in a pale Surface bar (#F5F5F5) with round ends, its links in a Line pill (#D9D9D9). Lime (#B3FF00) is the accent: the current nav link, the primary buttons, the round arrow button and the hover fill of the dark buttons. Ink fills the dark parts — the footer's ticker band, the Load More and Submit buttons, the chosen client chip and the slider of the plan switch — with light text on them.

Everything is set in DM Sans (Inter only for the footer's huge service names and the line under its logo): 500 for headings, 400 for text, and an upper-case `menu` style (13px, 0.03em) for nav links, buttons, text links, eyebrows and dates. Buttons, nav links, chips and the switch are pills; photos and cards have 10px corners (8px on project cards), fields 4px. Motion is quick and springy: labels roll up to a second copy on hover, arrows turn 45°, underlines grow from the left, card photos zoom out from 105% to 100%, rows of cards and names run sideways in endless tickers, and a custom cursor follows the pointer and turns into a dark pill ("View Project", "Read") over cards. Nothing appears on load or on scroll.

## Colors

- **Ink (#101010)** — `ink`, `on-primary`, `secondary`, `on-surface`. Black 13: headings and body text, the dark buttons (Load More, Submit), the footer's ticker band, the dark More box, the cursor dot, ticked checkboxes, the open accordion circle, outlines of the outlined buttons.
- **Ink soft (#262626)** — `ink-soft`. Black 10: text typed into a field, a text link's hover colour in the footer and in rich text, the Submit button while pressed, one bar of the process chart.
- **Charcoal (#454545)** — `charcoal`. Black 09: the testimonial words on project cards, one bar of the process chart.
- **Grey (#595959)** — `grey`, `on-surface-variant`. Black 08: leads and descriptions, card meta (dates, client and year), card excerpts, the post meta labels, a field's border on focus, the job type on the job page.
- **Silver (#BFBFBF)** — `silver`, `outline`. Black 06: every 1px rule and divider, field borders, placeholders, a nav link's hover fill, the back circle of the footer's action button, the period switch's track, the quote mark on project cards.
- **Line (#D9D9D9)** — `line`. Black 05: the header's link pill, the footer's main block, an unticked checkbox, a client chip's hover fill.
- **Mist (#F0F0F0)** — `mist`. Black 04: the fill of fields and of the pricing card.
- **Surface (#F5F5F5)** — `surface`. Black 03: the header bar (tablets and desktops), a focused field's fill.
- **Background (#FCFCFC)** — `background`, `on-secondary`, `neutral`. White: the page, the header, light text on dark (ticker band, buttons, cursor pill, More box).
- **White (#FFFFFF)** — `white`. Pure white: the tick of a checked box, the minus of an open accordion row, the Submit spinner.
- **Black (#000000)** — `black`. Pure black: the footer's line under the logo.
- **Accent (#B3FF00)** — `accent`, `primary`. Accent (lime): the current nav link, the primary buttons and the round arrow button, the Load More and Submit hover fill, the plus circle of the user rating.
- **Night (#222222)** — `night`. The cursor pill (fill and border) and the year in the footer's bottom line.
- **Axis (rgba(24, 33, 45, 0.5))** — `axis`. The process chart's dashed lines and percent labels.
- **Checkbox edge (rgba(24, 33, 45, 0.05))** — `checkbox-edge`. The hairline around a checkbox.
- **Rule (rgba(6, 7, 9, 0.5))** — `rule`. The 1 x 20 line between the phone number and the e-mail in the footer.
- **Veil (rgba(16, 16, 16, 0.5))** — `veil`. Black 13 at 50%: the veil over the Home quote photo and the About video card (30% while the video card is hovered).
- **Veil dark (rgba(16, 16, 16, 0.8))** — `veil-dark`. Black 13 at 80%: the veil over the Services call to action photo.
- **Backdrop (rgba(0, 0, 0, 0.8))** — `backdrop`. Behind the video player overlay.
- **Error (#FF2244)** — `error`. A field's message and border after a failed check, the Submit label after a failed send.
- **Error fill (rgba(255, 34, 68, 0.15))** — `error-fill`. The Submit button's fill after a failed send.
- **Gradient `ticker-fade`:** `linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 12.5%, #000000 87.5%, rgba(0, 0, 0, 0) 100%)`. A mask, not a fill: the footer's text ticker rows and the About logo ticker fade out over their first and last 12.5%.
- **Gradient `spinner`:** `conic-gradient(from 0deg, rgba(255, 255, 255, 0) 7.2deg, #FFFFFF 342deg)`. The 20px loading ring of the Submit button (a 2px ring cut from it, a 2 x 2 White dot at its head).

Semantic names in the front matter point at these colours: `primary` → `accent`, `on-primary` → `ink`, `secondary` → `ink`, `on-secondary` → `background`, `neutral` → `background`, `on-surface` → `ink`, `on-surface-variant` → `grey`, `outline` → `silver`.

## Typography

**DM Sans, sans-serif.** DM Sans from Google Fonts (weights 400, 500 and 700 in use): every text style except Huge Text and the footer's line.

Font sizes change at the breakpoints (phone / tablet from 810px / desktop from 1200px); the front matter gives the desktop size. Line height is a multiple of the font size.

| Token | Size (phone / tablet / desktop) | Line height | Weight | Letter spacing | Use |
|---|---|---|---|---|---|
| `display` | 42px / 56px / 72px | 1.2 | 500 | -0.04em | Display 01: the Home hero's title |
| `h1` | 42px / 48px / 56px | 1.2 | 500 | -0.04em | Heading 1: page titles (page heroes, Careers, a job, a post, Contact, the 404) |
| `h2` | 30px / 36px / 42px | 1.2 | 500 | — | Heading 2: section titles (More Blog, Our Services…), the rating score |
| `h3` | 28px / 30px / 32px | 1.2 | 500 | — | Heading 3: headings inside a post and a job, the job type on the job page, prices |
| `h4` | 24px / 26px / 28px | 1.2 | 500 | — | Heading 4: the pricing card's title |
| `h5` | 20px / 22px / 24px | 1.2 | 500 | — | Heading 5: card titles (post, project, service, job), accordion rows, the video caption |
| `h6` | 18px / 19px / 20px | 1.2 | 500 | — | Heading 6: footer column titles, Prev / Next labels, team names, the ticker cards' client, the process phases |
| `huge` | 38px / 46px / 54px | 1.2 | 500 | -0.01em | Huge Text (Inter): the footer ticker's solid service names (White) and the big service names |
| `huge-stroke` | 54px | 1.2 | 500 | -0.01em | Huge Text Stroke (Inter): Black 13 letters with a 0.5px White outline, the footer ticker's every second service name. One size at every breakpoint, as measured |
| `big` | 18px | 1.4 | 400 | — | Big Paragraph: leads of heroes, the 404's lead, testimonial quotes |
| `paragraph` | 16px | 1.4 | 400 | — | Medium Paragraph: body text, rich text, descriptions, field labels, footer links |
| `small` | 14px | 1.4 | 400 | — | Small Paragraph: card excerpts and meta, the post meta labels, checkbox names, the footer's bottom line |
| `menu` | 13px | 1.2 | 500 | 0.03em, uppercase | Menu: nav links, button and text-link labels, eyebrows, card dates, the cursor pill's label |

## Layout

Three layouts: phone below 810px, tablet from 810px, desktop from 1200px. Spacing tokens without a suffix are the desktop values; `-tablet` and `-phone` give the smaller screens where they differ.

| Token | Phone / tablet / desktop | Use |
|---|---|---|
| `gutter` | 20px / 30px / 40px | Side padding of sections, the header and the footer |
| `section-padding` | 60px / 80px / 100px | Vertical padding (top and bottom) of most sections |
| `content-max` | 1440px | Maximum content width of every section, the header bar and the footer |
| `header-height` | 68px / 104px / 112px | The sticky header, part of the page flow: every page starts below it |
| `divider-inset` | 20px / 30px / 50px | Side inset of the divider line between two sections (20px above and below it) |
| `card-gap` | 30px | Between the columns and rows of every card grid |

Every section is centred, at most `content-max` (1440px) wide inside the `gutter` on each side, and padded top and bottom by `section-padding` unless it sets its own. The header is sticky at the top of the window and part of the page flow (`header-height`): every page starts below it, and it never hides or shrinks; on phones its menu opens over the page without moving it. Two sections are often separated by a Divider: a 1px Silver line with 20px above and below, inset `divider-inset` from the screen's edges.

Section titles are a Section title: a small upper-case label (`menu`) 10px above the heading (`h2`). Card grids (projects, posts, services, the team) are three columns on desktops, two on tablets and one on phones, `card-gap` (30px) apart; lists of rows (services, job openings) are separated by 1px Silver lines. Long collections show a page at a time with a Load More button under them.

## Elevation & Depth

Compose Digi is flat: the only shadow is the custom cursor's faint glow (`cursor`). Depth comes from fills and photos: the pale Surface header bar on the Background, the Line footer block, the Ink ticker band and More box, and the `veil` (Ink at 50%) over the Home quote photo and the About video card, `veil-dark` (Ink at 80%) behind the Services call to action. The video player opens over a `backdrop` of black at 80%.

- **`cursor`:** `box-shadow: 2px 2px 20px 5px rgba(255, 255, 255, 0.03), 2px 2px 20px 5px rgba(255, 255, 255, 0.05)`. The custom cursor's faint glow (all looks).

## Shapes

Interactive things are pills: buttons, nav links, the header bar and its link pill, client chips, the plan switch, the cursor pill and the process chart's bars (`pill`, `bar`). Photos, cards, the pricing card and the video card have `card` corners (10px), a project card's photo `project-photo` (8px), text fields `field` (4px). Circles (`round`) are kept for the cursor dot and ring, checkboxes, avatars, social buttons, the Play button and the footer's action button.

- **`pill` (50px):** Buttons, nav links, text-field pills, client chips, the cursor pill, the switch, process bars (fully round at their height).
- **`bar` (100px):** The header bar and its link pill.
- **`card` (10px):** Photos of cards, the post cover, the video card, the pricing card, the More box.
- **`project-photo` (8px):** The photo of a project card.
- **`field` (4px):** Text fields and the text area.
- **`round` (9999px):** Circles: the cursor dot and ring, checkboxes, avatars, the footer's action circles, the Play button, social buttons.

## Motion

Four springs carry nearly every state change: `spring` (0.4 s, no bounce) for label rolls and the phone menu, `spring-soft` (0.4 s, a slight overshoot) for fills, arrows, underlines, accordions and the switch, `spring-card` (over-damped, about 0.65 s) for card photos, the cursor, chips and social buttons, `spring-pop` for the video card. Tickers run at a constant speed (20 to 30 px a second) and never stop for the pointer.

Reduced motion: rolls, slides, turns, zooms, height changes, parallax and scroll transforms happen at once or not at all (scroll-linked blocks sit at their end values) and the tickers stand still, while fades and colour changes still animate.

- **`spring`** — spring (duration 0.4 s, bounce 0). S0, no overshoot, settles in about 0.42 s: the label roll of every button, nav link and the menu button, the phone menu opening and closing. As a CSS curve: linear(0, 0.041, 0.134, 0.248, 0.364, 0.472, 0.569, 0.652, 0.722, 0.78, 0.827, 0.864, 0.894, 0.918, 0.937, 0.951, 0.963, 0.971, 0.978, 0.983, 0.987, 0.99, 0.993, 0.995, 0.996, 0.997, 0.998, 0.998, 0.999, 1) over 0.45 s.
- **`spring-soft`** — spring (duration 0.4 s, bounce 0.2). S2, a 1 to 2% overshoot, settles in about 0.42 s: a nav link's fill, the arrow turn of the buttons, the text link's underline and arrow, the accordion rows, the menu button's lines, the period switch and the pricing card's height, the team dimming, the process bars. As a CSS curve: linear(0, 0.041, 0.138, 0.262, 0.393, 0.518, 0.631, 0.727, 0.806, 0.869, 0.917, 0.953, 0.978, 0.995, 1.006, 1.012, 1.015, 1.015, 1.014, 1.013, 1.011, 1.009, 1.007, 1.005, 1.004, 1.003, 1.002, 1.001, 1.001, 1) over 0.45 s.
- **`spring-card`** — spring (stiffness 500, damping 60, mass 1). SC, over-damped (no overshoot), settles in about 0.65 s: the card photos zooming from 105% to 100%, the cursor changing look, the footer's action button, the social buttons growing, the testimonial chips. As a CSS curve: linear(0, 0.096, 0.257, 0.409, 0.535, 0.636, 0.715, 0.777, 0.826, 0.864, 0.893, 0.917, 0.935, 0.949, 0.96, 0.969, 0.976, 0.981, 0.985, 0.988, 0.991, 0.993, 0.994, 0.996, 0.997, 0.997, 0.998, 0.998, 0.999, 1) over 0.714 s.
- **`spring-pop`** — spring (stiffness 400, damping 30, mass 1). SP, about 1% overshoot, settles in about 0.45 s: the About video card's veil and its Play icon growing.
- **`ease-form`** — `cubic-bezier(0.44, 0, 0.56, 1)`. The ease-in-out of the Submit button's fills.
- **`submit-fill`** — duration 0.2s, ease `ease-form`. TB: the Submit button's fill, Black 13 to lime on hover and Black 10 while pressed (its label colour changes at once).
- **`instant`** — duration 0s. T0, no transition: the Load More hover, a field's focus, a checkbox, footer and rich-text link hovers, the text link's underline going away, the video overlay opening and closing.
- **`spin`** — type tween, duration 1s, ease linear, repeat infinite. The Submit button's loading ring turns once a second; it stands still with reduced motion.
- **`ticker`** — hero 20px/s to the left (the Home hero's project cards, no fade); footer 30px/s, row 1 to the left, row 2 to the right (the footer's service names, faded edges); logos 15px/s to the left (the About client logos, faded edges). Endless rows at a constant speed; the pointer does not slow them; they stand still with reduced motion.
- **`scroll-in`** — progress (scroll + window height - block top) / block height, clamped 0 to 1, ease linear. Scroll transforms while a block scrolls in (the Service and Project pages' photos and testimonial). Reduced motion: the end values.
- **`parallax`** — move (scroll - block top + offset) x (1 - speed / 100). Photos that lag behind the page (the Services call to action at speed 50 with offset 50, the Project page's photos at 80, 95 on phones). Reduced motion: they scroll with the page.
- **`tap-close`** — delay 0.1s. A tap on a link, the logo or the empty parts of the open phone menu closes it after 0.1 s.
- **`autoplay`** — interval 5s. The Services testimonials move on every 5 s; choosing a chip restarts the wait.

## Components

Component tokens below use the exact values of the template. Variants with a suffix (`-hover`, `-active`) only list what changes.

- **`button-primary`** (Button (Primary / Outline / Outline without arrow / Icon)). The lime pill with a 1px lime border: the label and, 10px to its right, an 18px arrow pointing up-right. On hover the label rolls up to a second copy and the arrow turns 45° to point right; nothing changes colour.
- **`button-outline`** (Button (Primary / Outline / Outline without arrow / Icon)). No fill, a 1px Ink border, with or without the arrow ("Contact Us" in the header has none); the same hover as the primary button.
- **`button-icon`** (Button (Primary / Outline / Outline without arrow / Icon)). The round lime arrow button beside "Contact Us"; its arrow turns 45° on hover.
- **`nav-link`** (Nav link (Default / Active)). A header link inside the Line pill; on hover a Silver fill fades in and the label rolls up.
- **`nav-link-active`** (Nav link (Default / Active)). The current page's link: a lime fill, no hover.
- **`text-link`** (Text link (with arrow / down-right arrow / no icon)). The label and a 16px arrow 5px to its right; on hover a 1px line grows under the label from the left and the arrow slides 4px right. Light (Background) on dark boxes.
- **`load-more`** (Load More). Centred under a list, at least 150px wide; gone once every item shows.
- **`load-more-hover`** (Load More). Hover: lime with an Ink label, at once.
- **`social-button`** (Social button and Social list). A 1px Ink ring around a 16px network logo; on hover an Ink fill fades in, the logo turns light and the button grows to show the network's name.
- **`project-card`** (Project card (Default / Simple)). The photo at 1.4334 : 1 with 8px corners, then the client and year in `small` Grey and the title in `h5`; the Default card adds the client's words under a Silver quote mark. The photo zooms from 105% to 100% on hover and the cursor becomes the "View Project" pill.
- **`post-card`** (Post card). The photo at 353 : 420 with 10px corners, then the date in `menu` Grey, the title in `h5` and the excerpt in `small` Grey; the photo zooms out on hover and the cursor becomes the "Read" pill.
- **`service-accordion`** (Service accordion). Rows separated by 1px Silver lines; the title and a 24px circle (open: an Ink fill with a white minus; closed: an Ink ring with a plus). One row is always open; the description in `paragraph` Grey and a text link grow open under it.
- **`pricing-card`** (Pricing card and Switch). A Mist card with a 1px Silver line inside its edge: the title in `h4` with the Weekly / Monthly switch, "What's Included:" and the plan's lines with checks, the price in `h3` and a lime button.
- **`plan-switch`** (Pricing card and Switch). Two options in `small`; the chosen one sits on an Ink slider with light text, which slides across with a slight overshoot.
- **`client-chip-active`** (Testimonial slider and Client chip). The chosen client: a 36px round photo, the name over the role. The other chips have no fill, Ink text and 50% opacity.
- **`input-field`** (Form field). A Mist fill with a 1px Silver border and a Silver placeholder; the label (`paragraph`) sits 5px above. Focus turns the border Grey and the fill Surface at once. The text field is 40px tall with 12px at the sides; the message area is 200px tall with 12px all round.
- **`checkbox`** (Checkbox group). A round Line box with a hairline; checked, it turns Ink with a white tick at once. Its name sits 10px to the right in `small` Grey.
- **`submit-button`** (Submit button). As wide as the form. While sending, a 20px light ring turns in place of the label; after a send it reads "Thank you", after a failed send "Something went wrong" in Error on a 15% Error fill.
- **`submit-button-hover`** (Submit button). Hover: lime (0.2 s, `ease-form`), the label Ink at once; pressed: Ink Soft with a light label.
- **`cursor-pill`** (Cursor (Default / Active / Pill)). Over cards and the Play button the cursor dot (12px, Ink) morphs into this pill with a label and a small icon, centred on the pointer; over the About photos and Home's service list it opens into a 44px ring. Mouse devices only.

Other components of the template, described in its spec: Flip text, Action button, Hamburger, Logo, Icon, Section, Section title, Divider, Rich text, Post nav card (Prev / Next), Project ticker card, Service card, Job card (Desktop / Mobile), Team list and Team card, Ticker, User rating, Process graph, Video card, Form, Scroll transform, Parallax, Collapse.

## Do's and Don'ts

- Do set headings and body text in Ink on the Background, and use Grey for leads, descriptions and card meta.
- Do keep lime for the current nav link, the primary buttons, the round arrow button and the hover of the dark buttons — one accent, used sparingly.
- Do write nav links, buttons, text links, eyebrows and dates in the upper-case `menu` style, and headings at weight 500 with line height 1.2.
- Do make buttons, nav links, chips and switches pills; give photos and cards 10px corners and fields 4px.
- Do separate rows and sections with 1px Silver lines, not with boxes or shadows.
- Do animate hovers with the springs: roll labels up to a second copy, turn arrows 45°, grow underlines from the left, zoom card photos from 105% to 100%.
- Don't add shadows or new colours; the palette above is the whole palette.
- Don't use lime for running text or large backgrounds; it is a marker and a fill for small controls.
- Don't put light text on a photo without the `veil` under it.
- Don't use Inter outside the footer's huge service names and the line under its logo; DM Sans sets everything else.
- Don't make things appear on load or on scroll; motion answers the pointer, the tickers and the scroll-linked photos only.

## Source

Every value here was measured from the published Compose Digi template (https://compose-digital.framer.website); when this file and the live site disagree, the site is right.

Demo photos (Unsplash, Pexels) and the About video (a YouTube film) are placeholders and not part of the design system.

This DESIGN.md is licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/): use and adapt it freely, with credit to Framebrick. The template itself (its pages, code and images) is covered by the Framebrick license: https://framebrick.co/license

Use it with your agent

Save it as DESIGN.md at your project’s root.
Ask Claude Code, Cursor, v0 or Lovable to follow it for every page and component it builds.
Or let the agent fetch it: the Framebrick MCP server’s get_design_md tool with { "slug": "compose-digi" }, or the raw file at framebrick.co/templates/compose-digi/design.md.

Connect the MCP server

Be the first to know

One short email when we release a template or a free component. No spam — unsubscribe anytime.

We use your email only for Framebrick updates. Privacy policy

The style

Colours

Typography · DM Sans, Inter

Corners

Spacing

Parts

Do's and don'ts

Get Compose Digi

Compose Digi

Get new templates and components first