---
version: "alpha"
name: "Catchup"
description: "Creative agency website: a light grey page, white cards, black type, one mint accent and an orange highlight, set in Manrope."
colors:
  ink: "#000000"
  body: "#444A46"
  accent: "#7CE3AC"
  orange: "#FF7E5D"
  soft: "#DADADA"
  page: "#F5F5F5"
  white: "#FFFFFF"
  ink-80: "rgba(0, 0, 0, 0.8)"
  ink-50: "rgba(0, 0, 0, 0.5)"
  ink-30: "rgba(0, 0, 0, 0.3)"
  ink-20: "rgba(0, 0, 0, 0.2)"
  ink-05: "rgba(0, 0, 0, 0.05)"
  white-20: "rgba(255, 255, 255, 0.2)"
  spinner: "#999999"
  error: "#FF2244"
  error-fill: "rgba(255, 34, 68, 0.15)"
  ink-hover: "rgba(51, 51, 51, 0.85)"
  ink-pressed: "#333333"
  primary: "{colors.accent}"
  on-primary: "{colors.ink}"
  secondary: "{colors.ink}"
  on-secondary: "{colors.white}"
  tertiary: "{colors.orange}"
  neutral: "{colors.page}"
  surface: "{colors.white}"
  on-surface: "{colors.ink}"
  on-surface-variant: "{colors.body}"
  outline: "{colors.ink-20}"
typography:
  display:
    fontFamily: "Manrope"
    fontSize: "62px"
    fontWeight: 600
    lineHeight: 1.2
  h1:
    fontFamily: "Manrope"
    fontSize: "54px"
    fontWeight: 600
    lineHeight: 1.2
  h2:
    fontFamily: "Manrope"
    fontSize: "44px"
    fontWeight: 600
    lineHeight: 1.2
  h3:
    fontFamily: "Manrope"
    fontSize: "36px"
    fontWeight: 500
    lineHeight: 1.2
  h4:
    fontFamily: "Manrope"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.2
  h5:
    fontFamily: "Manrope"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.2
  h6:
    fontFamily: "Manrope"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.2
  huge:
    fontFamily: "Manrope"
    fontSize: "54px"
    fontWeight: 500
    lineHeight: 1.2
  big:
    fontFamily: "Manrope"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.4
  paragraph:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.4
  small:
    fontFamily: "Manrope"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.4
  menu:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.2
  tiny:
    fontFamily: "Manrope"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.2
  subtitle:
    fontFamily: "Manrope"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "0.03em"
  caption:
    fontFamily: "Manrope"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "0.03em"
rounded:
  card: "10px"
  small: "5px"
  round: "9999px"
spacing:
  gutter: "30px"
  gutter-phone: "15px"
  gutter-tablet: "20px"
  section-padding: "100px"
  section-padding-phone: "60px"
  section-padding-tablet: "80px"
  section-gap: "100px"
  section-gap-phone: "60px"
  section-gap-tablet: "80px"
  page-top: "150px"
  page-top-phone: "60px"
  page-top-tablet: "80px"
  header-height: "100px"
  header-height-phone: "60px"
  header-height-tablet: "90px"
  content-max: "1440px"
components:
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
    rounded: "{rounded.round}"
    padding: "10px 10px 10px 16px"
    height: "40px"
  button-black:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.menu}"
    rounded: "{rounded.round}"
    padding: "10px 10px 10px 16px"
    height: "40px"
  button-white:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
    rounded: "{rounded.round}"
    padding: "10px 10px 10px 16px"
    height: "40px"
  meta-tag:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.tiny}"
    rounded: "{rounded.round}"
    padding: "5px 8px"
    height: "24px"
  meta-tag-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.ink}"
  work-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.card}"
    padding: "20px"
  service-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.h5}"
    rounded: "{rounded.card}"
    padding: "15px"
  service-card-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
  post-card:
    textColor: "{colors.ink}"
    typography: "{typography.h6}"
    rounded: "{rounded.card}"
    padding: "10px"
  category-pill:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.ink}"
    typography: "{typography.tiny}"
    rounded: "{rounded.round}"
    padding: "5px 8px"
  testimonial-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.paragraph}"
    rounded: "{rounded.card}"
    padding: "20px"
    size: "300px"
  check-mark:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.ink}"
    rounded: "{rounded.round}"
    size: "22px"
  section-label:
    textColor: "{colors.ink}"
    typography: "{typography.subtitle}"
  input-field:
    textColor: "{colors.ink}"
    height: "40px"
    padding: "0px 0px 10px 0px"
  choice-chip:
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
    rounded: "{rounded.round}"
    padding: "10px 16px"
  choice-chip-checked:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
  submit-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.menu}"
    rounded: "{rounded.round}"
    height: "40px"
---

# Catchup Design System

> The design tokens and style rules of **Catchup**, a website template by Erapee (live Framer site: https://catchup.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

Catchup is a website template for creative agencies — branding, web design, development and photography studios: works and services with their own pages, pricing plans, a blog, testimonials, about and contact. It should feel bold and polished but friendly: large confident headings, full-bleed photos, and plenty of air between sections.

The look is built from few parts. The page is a light grey Background (#F5F5F5); content sits on White cards and panels with 10px corners; type is Black, with Body (#444A46, a grey-green) for leads, summaries and anything secondary. One accent, mint (#7CE3AC), carries the main buttons and the small markers (the arrow discs on work cards, the check discs, the post category pills), always with Black text or icons on it. Orange (#FF7E5D) appears once as a highlight card on Home and as the hover colour of text links. The footer is a black card; photos under a Black 30 or Black 80 veil carry White text.

Everything is set in Manrope: 600 for the display and the big titles, 500 for smaller headings, numbers and buttons, 400 for text. Buttons and pills are fully round, boxes have 10px corners. Motion is crisp: button labels roll up on hover while their arrow turns 45°, cards zoom their photo, page titles appear word by word out of a blur, and blocks rise 18px into view once.

## Colors

- **Black (#000000)** — `ink`, `on-primary`, `secondary`, `on-surface`. Headings and body text, the black buttons, the Meta tags, the footer card, the heading pills of a project's tables, the active pricing option, the hovered service card panel.
- **Body (#444A46)** — `body`, `on-surface-variant`. Leads under page titles, card summaries and excerpts, roles, the captions over a post's or legal page's date, prices' units, plan notes.
- **Accent (mint) (#7CE3AC)** — `accent`, `primary`. The Accent buttons (Contact, Start a Project, Learn More), the round arrow on work cards, the check discs, the post category pills, the hovered Meta tag.
- **Orange (#FF7E5D)** — `orange`, `tertiary`. The orange number card on Home, links in rich text and the contact form note on hover.
- **Soft Grey (#DADADA)** — `soft`. Defined by the template for quiet fills; no page uses it.
- **Background (#F5F5F5)** — `page`, `neutral`. The page, the header once it is fixed and the open phone menu.
- **White (#FFFFFF)** — `white`, `on-secondary`, `surface`. Cards and panels (work, service, post details, testimonials, pricing), the White buttons, text on photos and on the footer card.
- **Black 80 (rgba(0, 0, 0, 0.8))** — `ink-80`. The cover over the projects card photo on tablets and phones (Home).
- **Black 50 (rgba(0, 0, 0, 0.5))** — `ink-50`. The "/" before each service of a project's details, the award numbers.
- **Black 30 (rgba(0, 0, 0, 0.3))** — `ink-30`. The cover over the Home hero photos, field placeholders, the select chevron.
- **Black 20 (rgba(0, 0, 0, 0.2))** — `ink-20`, `outline`. Field underlines, the line above a project's testimonial, the award rows' lines, the carousel arrows and dots pill.
- **Black 05 (rgba(0, 0, 0, 0.05))** — `ink-05`. The track of the pricing switch.
- **White 20 (rgba(255, 255, 255, 0.2))** — `white-20`. The line in the footer card, the Home hero's description card and thumbnail frame.
- **Spinner (#999999)** — `spinner`. The ring of the load-more spinner.
- **Error (#FF2244)** — `error`. The Submit button's label after a failed send.
- **Error fill (rgba(255, 34, 68, 0.15))** — `error-fill`. The Submit button's fill after a failed send.
- **Ink hover (rgba(51, 51, 51, 0.85))** — `ink-hover`. The Submit button's fill on hover.
- **Ink pressed (#333333)** — `ink-pressed`. The Submit button's fill while pressed.
- **Gradient `photo-bottom`:** `linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, #000000 100%)`. Over the brands photo card on Home: Black 30 at the top, black at the bottom.
- **Gradient `photo-left`:** `linear-gradient(90deg, #000000 39%, rgba(0, 0, 0, 0) 75%)`. Over the projects photo card on Home (desktop): black on the left, clear from 75%.

Semantic names in the front matter point at these colours: `primary` → `accent`, `on-primary` → `ink`, `secondary` → `ink`, `on-secondary` → `white`, `tertiary` → `orange`, `neutral` → `page`, `surface` → `white`, `on-surface` → `ink`, `on-surface-variant` → `body`, `outline` → `ink-20`.

## Typography

**Manrope, sans-serif.** Manrope from Google Fonts, the only family: one variable font, weights 400 (paragraphs, Tiny, Subtitle), 500 (Heading 3–6, Huge, Menu, field text) and 600 (Display 1, Heading 1–2); 700 only for bold runs in rich text.

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 / 52px / 62px | 1.2 | 600 | — | Display 1 — the Home hero title |
| `h1` | 40px / 46px / 54px | 1.2 | 600 | — | Heading 1 — page titles (Work, Services, a project, a service, Blog, a post, Contact, a legal page, 404) |
| `h2` | 32px / 38px / 44px | 1.2 | 600 | — | Heading 2 — section titles ("Other works", "More Services", "More Blog") |
| `h3` | 28px / 32px / 36px | 1.2 | 500 | — | Heading 3 — a project's story titles, a service's offer and pricing titles, headings inside posts and legal pages |
| `h4` | 24px / 26px / 28px | 1.2 | 500 | — | Heading 4 — the lead beside a page title (Work, Services, a project, Blog) |
| `h5` | 20px / 22px / 24px | 1.2 | 500 | — | Heading 5 — card titles (work, service), a service row's name, "Our … Deliverables Include:" |
| `h6` | 18px / 19px / 20px | 1.2 | 500 | — | Heading 6 — post card titles, "What’s Included:", the number captions |
| `huge` | 40px / 46px / 54px | 1.2 | 500 | — | Huge — the counters and a plan's price |
| `big` | 18px | 1.4 | 400 | — | Big Paragraph — the line beside a page title (years, tagline), a service's overview text, a post's excerpt, a project's client quote |
| `paragraph` | 16px | 1.4 | 400 | — | Medium Paragraph — body text, card summaries, check lists, table rows, post and legal text, footer links |
| `small` | 14px | 1.4 | 400 | — | Small Paragraph — a plan's notes, the Home hero's service links |
| `menu` | 16px | 1.2 | 500 | — | Menu — the header links, button labels, the pricing switch, the form's chips |
| `tiny` | 12px | 1.2 | 400 | — | Tiny — Meta tags, post categories and dates, roles under a client's name, the heading pills of a project's tables |
| `subtitle` | 14px | 1.2 | 400 | 0.03em, uppercase | Subtitle — the labels before section titles |
| `caption` | 14px | 1.2 | 400 | 0.03em | Subtitle lettering without the capitals — the captions over a post's date and category and a legal page's date |

## 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` | 15px / 20px / 30px | Side padding of sections and the header |
| `section-padding` | 60px / 80px / 100px | Vertical padding of a section; also the bottom padding of a page-title section |
| `section-gap` | 60px / 80px / 100px | Between the blocks of a section (a title block and its cards, a story and its photos) |
| `page-top` | 60px / 80px / 150px | Top padding of the section that opens an inner page (under the header's own space) |
| `header-height` | 60px / 90px / 100px | The header bar; inner pages start below an empty band this tall |
| `content-max` | 1440px | Maximum content width (inside the gutters), centred; the Home hero, the header and the footer use 1728px |

Every section is centred, at most `content-max` (1440px) wide inside the `gutter` on each side, and padded top and bottom by `section-padding`; the blocks inside a section (a title block and its cards) are `section-gap` apart. The Home hero, the header and the footer may grow to 1728px. Inner pages start under an empty band as tall as the fixed header (`header-height`) and their first section has `page-top` above it. Cards in a grid are 20px apart: three columns on desktops, two on tablets, one on phones for services and posts, two, one and one for works.

Section titles come in two forms: split (the label and the title on the left, the lead at the right, aligned to the bottom) and centred (the label underlined, the title and the lead centred). A Section label is the Subtitle style (upper case, 3% tracking) with a 40px line before it.

## Elevation & Depth

Catchup is flat: there are no shadows anywhere. Depth comes from fills: White cards on the grey Background, the Black footer card and Black number cards for emphasis, and photos under a Black 30 veil (`ink-30`, the Home hero), a Black 80 veil (`ink-80`) or a gradient to Black (`photo-bottom`, `photo-left`) wherever White text sits on them.

## Shapes

Boxes have 10px corners (`card`): photos, cards, panels, the footer card. The small 5px corner (`small`) is only for the table headings of a project, the hero's description card and the team chips. Everything that is a control or a marker is fully round (`round`): buttons, tags, pills, the pricing switch, the form chips and submit button, arrow and check discs, portraits.

- **`card` (10px):** Photos, cards and panels (work, service, post, testimonial, pricing, the footer card).
- **`small` (5px):** The heading pills of a project's tables, the Home hero's description card and thumbnail, the team chips.
- **`round` (9999px):** Buttons, Meta tags, category pills, the pricing switch and its options, the form chips and Submit button, arrow and check discs, portraits.

## Motion

Hovers and state changes use `spring` (0.4 s, no bounce) or `spring-soft` (a slight overshoot) for the footer links, the chips and the pricing switch; card hovers use `hover` (0.4 s, ease 0.44, 0, 0.56, 1). Blocks below a page's top rise 18px into view with `appear` (1 s, a slight overshoot) once half of them is in view, and never hide again; page titles appear word by word out of a 7px blur; counters count up once. Reduced motion: nothing moves (rises, rolls, turns and zooms happen in place), tickers and spinners stand still, counters show their final number, while fades and colour changes still animate.

- **`appear`** — type tween, duration 1s, ease 0.59,0.25,0.12,1.17. T1 — every scroll-appear, the on-load rises, the title words and the Home intro: 1 s, overshoots about 3% and settles.
- **`ease-appear`** — `cubic-bezier(0.59, 0.25, 0.12, 1.17)`. The ease of T1.
- **`hover`** — type tween, duration 0.4s, ease 0.44,0,0.56,1. T4 — the card hovers (work, service, post), the nav underline, the hamburger bars.
- **`hover-delayed`** — type tween, duration 0.4s, ease 0.44,0,0.56,1, delay 0.2s. T4 after 0.2 s — the fixed header's fade and the phone menu opening and closing.
- **`ease-hover`** — `cubic-bezier(0.44, 0, 0.56, 1)`. The ease of T4; also the Submit button's fills (0.2 s) and the spinner's fade (0.3 s).
- **`spring`** — spring (duration 0.4 s, bounce 0). S0 — the button label roll and arrow turn, the Meta tags; the default of every state change.
- **`spring-soft`** — spring (duration 0.4 s, bounce 0.2). S2 (a slight overshoot) — the footer links' roll and dimming, a project's service links, the pricing switch, the form chips, the contact links' arrow.
- **`appear-offset`** — distance 18px, threshold 0.5. Scroll-appear: a block starts 18px low and transparent and rises with T1 once half of it is in view, once.
- **`load-rise`** — distance 7px, delay 0.15s. On-load rise at the top of inner pages: 7px with T1, 0.15 s after load (the blocks under a title, the main photo).
- **`intro-lines`** — distance 7px, delay 0.2s. The text under a page title: rises 7px with T1, 0.2 s after the title starts.
- **`title-words`** — distance 10px, blur 7px, stagger 0.05s. Page titles: each word rises 10px out of a 7px blur with T1, 0.05 s after the one before.
- **`ticker`** — logos 20px/s (the client logos on Home); slow 15px/s (the clients' avatars and the testimonial rows on Home).
- **`hero-interval`** — duration 6s. The Home hero moves to the next project every 6 s on tablets and phones (desktops change on hover only).
- **`counter-step`** — duration 5ms. The counters step +1 (or +0.1) every 5 ms, linear, once they are in view.

## Components

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

- **`button-accent`** (Button (Accent / Black / White, with or without the arrow)). The mint pill: the label and, 10px to its right, a 20px Black disc holding a White 14px arrow (up-right). Without the disc the padding is 10px 16px. Hover: the label rolls up one line and the arrow turns 45°; the colours never change.
- **`button-black`** (Button (Accent / Black / White, with or without the arrow)). The Black pill with a White disc and a Black arrow — "View All Works", "More About Us", "Book a 15-min call" on a service page.
- **`button-white`** (Button (Accent / Black / White, with or without the arrow)). The White pill, on photos and on the black footer card.
- **`meta-tag`** (Meta tag). A work card's service tag, a link to the service.
- **`meta-tag-hover`** (Meta tag). Hover: mint with a Black label, while the label rolls up.
- **`work-card`** (Work card). The photo over the details on desktops and phones, beside them on tablets; details: the service tags, the title in `h5` and the summary in `paragraph`, Body, with a 36px mint disc and its arrow at the top right. Hover (desktops): the photo zooms to 105% and the arrow turns 45°.
- **`service-card`** (Service card). A square photo and, 10px below, a White panel with the name and the summary (`paragraph`, Body).
- **`service-card-hover`** (Service card). Hover: the panel turns Black with White text while the photo zooms out from 105% to 100%.
- **`post-card`** (Post card). One link: the photo (367 : 240) and, under it, the category on a mint pill and the date (`tiny`), the title and a two-line excerpt (`paragraph`, Body); no card fill.
- **`category-pill`** (Post card). A post's category.
- **`testimonial-card`** (Testimonial card). Five 16px stars and the quote at the top, the client at the bottom: a 45px round photo, "— Name" and the role (`tiny`, Body).
- **`check-mark`** (Check list). The mint disc with a Black check before each item of a deliverables or plan list, 10px before the text.
- **`section-label`** (Section label). Upper case with a 1px line in the text colour: 40px before the label, or under it for centred titles.
- **`input-field`** (Field). No box: a 1px Black 20 line along the bottom that turns Black on focus, 16px text at weight 500, a Black 30 placeholder; the label (`paragraph`) 15px above. A text area is at least 150px tall.
- **`choice-chip`** (Choice chips). A pill with a 1px Black outline at 50% opacity; full opacity on hover.
- **`choice-chip-checked`** (Choice chips). The chosen chip, at full opacity.
- **`submit-button`** (Submit button). As wide as the form gives it. Hover: `ink-hover`; pressed: `ink-pressed` (0.2 s). While sending, a 20px White ring turns in place of the label; after a send it reads "Thank you"; after a failed send "Something went wrong" in `error` on the pale `error-fill`, and the fields keep what was typed.

Other components of the template, described in its spec: Nav link, Icon link, Link column, Logo, Icon, Hamburger, Counter, Rich text, Ticker, Word appear, Load spinner, Appear, Rise, Collapse, Section, Section title, Page title, Form, Current year.

## Do's and Don'ts

- Do use mint (`accent`) only for the main buttons and the small markers (arrow and check discs, category pills, the hovered service tag), with Black text or icons on it.
- Do set Manrope at 600 for `display`, `h1` and `h2`, 500 for `h3`–`h6`, `huge` and `menu`, and 400 for text; line height 1.2 for headings and 1.4 for paragraphs.
- Do use Body for leads, summaries, excerpts, roles and captions on light surfaces, and Black for titles.
- Do give boxes (photos, cards, panels) 10px corners and make every button, tag, pill and disc fully round.
- Do roll a button's label up one line on hover and turn its arrow 45°, without changing its colours.
- Do let page titles appear word by word and blocks rise 18px into view once, with `appear`.
- Don't add shadows or new colours; the palette above is the whole palette.
- Don't put White text on mint.
- Don't use Orange for buttons: it is the highlight number card and the hover of text links only.
- Don't let a button label wrap.
- Don't mix fonts: Manrope is the only family.

## Source

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

Demo photos (Unsplash and Pexels) 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