---
version: "alpha"
name: "Cerette"
description: "Architecture and interior design studio website: a warm cream page, black type, big photos under a dark veil, one brown accent, square corners everywhere, set in Plus Jakarta Sans."
colors:
  ink: "#000000"
  grey: "#707070"
  line: "#B4B4B4"
  brown: "#C36036"
  page: "#F5F1E5"
  white: "#FFFFFF"
  field: "rgba(187, 187, 187, 0.25)"
  icon: "#999999"
  spinner: "#999999"
  veil: "rgba(0, 0, 0, 0.5)"
  error: "#FF2244"
  error-fill: "rgba(255, 34, 68, 0.15)"
  primary: "{colors.brown}"
  on-primary: "{colors.white}"
  secondary: "{colors.ink}"
  on-secondary: "{colors.white}"
  neutral: "{colors.page}"
  surface: "{colors.white}"
  on-surface: "{colors.ink}"
  on-surface-variant: "{colors.grey}"
  outline: "{colors.line}"
typography:
  display:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "120px"
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  h1:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "56px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h2:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "42px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h3:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "36px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h4:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "28px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h5:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h6:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  number:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "94px"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "-0.03em"
  big:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "18px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.03em"
  paragraph:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.03em"
  small:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.03em"
  menu:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  tiny:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  quote:
    fontFamily: "Marcellus"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  field:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "0em"
  result:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "0em"
rounded:
  none: "0px"
  round: "9999px"
spacing:
  gutter: "30px"
  gutter-phone: "15px"
  gutter-tablet: "20px"
  section-padding: "100px"
  section-padding-phone: "60px"
  section-padding-tablet: "80px"
  section-gap: "80px"
  section-gap-phone: "60px"
  section-gap-tablet: "60px"
  header-height: "83px"
  header-height-phone: "58px"
  content-max: "1440px"
  text-max: "850px"
components:
  button-primary:
    backgroundColor: "{colors.brown}"
    textColor: "{colors.white}"
    typography: "{typography.menu}"
    padding: "15px 30px"
    height: "43px"
  button-black:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.menu}"
    padding: "15px 30px"
    height: "43px"
  button-white:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
    padding: "15px 30px"
    height: "43px"
  button-simple:
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
  nav-link-active:
    textColor: "{colors.brown}"
  footer-link:
    textColor: "{colors.white}"
    typography: "{typography.small}"
  label:
    textColor: "{colors.grey}"
    typography: "{typography.menu}"
  project-card:
    textColor: "{colors.ink}"
    typography: "{typography.h6}"
  service-card:
    textColor: "{colors.ink}"
    typography: "{typography.h6}"
  post-card:
    textColor: "{colors.ink}"
    typography: "{typography.h6}"
  testimonial-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.big}"
    padding: "20px"
  value-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.h6}"
    padding: "20px"
  stat-number:
    textColor: "{colors.ink}"
    typography: "{typography.number}"
  input-field:
    textColor: "{colors.ink}"
    typography: "{typography.field}"
    padding: "12px"
    height: "43px"
  submit-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.menu}"
    padding: "15px 30px"
    height: "43px"
  submit-button-hover:
    backgroundColor: "{colors.brown}"
---

# Cerette Design System

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

Cerette is a website template for architecture and interior design studios: projects and services with a page each, the studio and its team, testimonials, a blog and an inquiry form. It should feel calm, precise and crafted: a warm paper-like page, large tight headings, full-bleed photographs and films under a dark veil, and a single earthy accent.

The look is built from few parts. The page is a cream Background (#F5F1E5); type is Black (#000000), with Grey (#707070) for paragraphs, leads, card texts and field labels, and Line (#B4B4B4) for the ruler's ticks, the hairlines of the award table and the footer, and field placeholders. Brown (#C36036) is the accent: the Primary buttons, the current header link, the hovered card titles, the footer links' hover, the logo's mark, the figures' units, the stars and the value icons. White fills cards and panels (testimonials, values, the services panel) and the open phone menu; Black fills the footer, the Black buttons and the Submit button. Photos that carry text sit under the `veil` (Black at 50%) and a soft grain texture.

Everything is set in Plus Jakarta Sans — 600 for titles, headings, figures and the upper-case `menu` style (12px) of links, buttons and labels, 500 for text — with every style set a little tight (−0.03em). Marcellus sets only the founder's quote and Inter only what is typed into the form. Everything is square: photos, cards, panels, buttons and fields have no rounded corners; only the small marks are round (the Label's ring and dot, the buttons' and footer links' dots, portraits). Motion is soft and deliberate: blocks rise 18px into view once, the inner pages' big titles come out of a blur word by word, the Home hero's title appears letter by letter, button labels roll up to a second copy, card photos settle from 105% to 100% and the header turns solid as you scroll past a dark hero.

## Colors

- **Black (#000000)** — `ink`, `secondary`, `on-surface`. Headings and text, the Black buttons, the footer, the Submit button, the header's logo and links on the page colour.
- **Grey (#707070)** — `grey`, `on-surface-variant`. Paragraphs and leads on the page colour, card texts and excerpts, field labels, captions, the grey Label, the ring of a Black footer link.
- **Line (#B4B4B4)** — `line`, `outline`. The ruler ticks, the footer's line (at 50%), the award table's lines (at 50%), field placeholders and the empty select's text.
- **Brown (#C36036)** — `brown`, `primary`. The accent: the Primary buttons, the current header link, the hovered card titles, the footer links' hover copy and dot, the logo mark, the units of the figures, the stars, the value cards' icons, the Submit button's hover.
- **Background (#F5F1E5)** — `page`, `neutral`. The page, the header once it is solid, the inquiry section.
- **White (#FFFFFF)** — `white`, `on-primary`, `on-secondary`, `surface`. Cards and panels (testimonials, values, the services panel), text on photos and on the footer, the open phone menu, a field while it has focus.
- **Form Fill (rgba(187, 187, 187, 0.25))** — `field`. The fill of every form field (white while the field has focus).
- **Icon (#999999)** — `icon`. The select's chevron.
- **Spinner (#999999)** — `spinner`. The ring of the load-more spinner.
- **Black 50 (rgba(0, 0, 0, 0.5))** — `veil`. The veil over the photos of the Home hero, the quote band, the call to action, a project's hero and the 404 page.
- **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.

Semantic names in the front matter point at these colours: `primary` → `brown`, `on-primary` → `white`, `secondary` → `ink`, `on-secondary` → `white`, `neutral` → `page`, `surface` → `white`, `on-surface` → `ink`, `on-surface-variant` → `grey`, `outline` → `line`.

## Typography

**Plus Jakarta Sans, sans-serif.** Plus Jakarta Sans from Google Fonts, one variable font: weight 500 for the paragraph styles and Tiny, 600 for Display 1, the headings, Number and Menu; 700 only for bold runs in rich text. Every style but Quotes and the field text uses it.

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` | 50px / 100px / 120px | 1.1 | 600 | -0.03em | Display 1 — the inner pages' big titles ("Studio.", "Services.", "Articles.", "Contact us.") |
| `h1` | 40px / 48px / 56px | 1.2 | 600 | -0.03em | Heading 1 — the Home hero's title, a service's, a post's and a legal page's title, the 404 title, the team names on About |
| `h2` | 30px / 36px / 42px | 1.2 | 600 | -0.03em | Heading 2 — section titles (Title section), the call to action's title |
| `h3` | 28px / 32px / 36px | 1.2 | 600 | -0.03em | Heading 3 — the headings inside posts and legal pages, a service's "About service" and "What’s included in the services?" |
| `h4` | 24px / 26px / 28px | 1.2 | 600 | -0.03em | Heading 4 — the service titles of the Home services switcher |
| `h5` | 20px / 22px / 24px | 1.2 | 600 | -0.03em | Heading 5 — the units beside the figures ("+", "%", "y"), in Brown |
| `h6` | 18px / 19px / 20px | 1.2 | 600 | -0.03em | Heading 6 — card titles (project, service, post, team, value), the 404 subtitle |
| `number` | 52px / 62px / 94px | 1 | 600 | -0.03em | Number — the figures on Home and About (static text, no counter) |
| `big` | 18px | 1.4 | 500 | -0.03em | Big Paragraph — the small text beside an inner page's title, a legal page's date line, a testimonial's quote |
| `paragraph` | 16px | 1.4 | 500 | -0.03em | Medium Paragraph — body text, leads, post excerpts, rich text, a service's deliverables, the footer's column headings |
| `small` | 14px | 1.4 | 500 | -0.03em | Small Paragraph — card texts (service, project line, team), field labels, the contact details, every footer text and link |
| `menu` | 12px | 1.1 | 600 | -0.03em, uppercase | Menu — the header links, button labels, the Label before section titles, a post card's date and category, the cards' "View …" actions |
| `tiny` | 12px | 1.2 | 500 | -0.03em | Tiny — the role under a person's name (quote band, testimonials) |
| `quote` | 20px / 19px / 24px | 1.2 | 400 | -0.03em | Quotes (Marcellus) — the founder's quote band; the tablet size is smaller than the phone's, as the template has it |
| `field` | 16px | 1.2 | 400 | 0em | The text typed into a form field, its placeholder and the select's choices (Inter, no letter spacing) |
| `result` | 14px | 1.2 | 600 | 0em | The Submit button's "Thank you" and "Something went wrong" labels (Inter SemiBold, as typed, no capitals) |

## 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, the header and the footer |
| `section-padding` | 60px / 80px / 100px | Vertical padding of a section (top and bottom) |
| `section-gap` | 60px / 60px / 80px | Between the blocks of a section (a page title and its cards, a post's photo and its text) |
| `header-height` | 58px / 83px / 83px | The fixed header bar; inner pages start under an empty band this tall (Home, a project and the 404 page start under the transparent bar) |
| `content-max` | 1440px | Maximum content width (inside the gutters), centred; also the header's and the footer's |
| `text-max` | 850px | The reading column of a post's text, a service's details and a legal page, centred |

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 of a section (a title and its cards, a post's photo and its text) are `section-gap` apart. Reading columns (a post, a service's details, a legal page) are at most `text-max` (850px), centred. The header is fixed to the top of the window over the page (`header-height`): inner pages start under an empty band as tall as it, while Home, a project page and the 404 page start at the top of the window under a transparent header that turns the page colour once the next section reaches the middle of the window.

Section titles are a Title section: the Label (a ringed dot and an upper-case `menu` word) 10px above the heading (`h2`), split left and right of a lead on desktops. Inner pages open with a huge `display` title and a small text beside it. A Ruler — a row of short vertical ticks, like an architect's scale — separates many sections. Card grids run three or more across on desktops, two on tablets and one on phones; long lists (the blog, the team on smaller screens) load more as you scroll.

## Elevation & Depth

Cerette is flat: no shadows anywhere. Depth comes from photographs and fills: full-bleed photos and the Home film under the `veil` (Black at 50%) with a grain texture over them, White cards and panels on the cream page, and the Black footer.

## Shapes

Everything is square (`none`): photos, cards, panels, buttons, the header and its phone menu, fields and the Submit button. `round` is kept for the small marks only: the Label's ring and dot, the Primary button's and the footer links' dots, the round portraits of the testimonials and the quote band, the spinners and the phone services accordion's toggle.

- **`none` (0px):** Everything is square: photos, cards, panels, buttons, fields.
- **`round` (9999px):** Only the small round marks: the Label's ring and dot, the button and footer link dots, the list dots, portraits in the quote band and testimonials.

## Motion

Two tweens and two springs carry nearly everything: `appear` (1 s, a slight overshoot) for blocks rising 18px into view and the inner pages' title effects, `hover` (0.4 s, easing in) for the project and service cards, `spring` (0.4 s, no bounce) for label rolls, dots, the header's background and the phone menu, and `spring-soft` (0.4 s, a slight overshoot) for the hamburger's X, the accordion's toggle and the team rows. The Home hero's label and buttons rise 50px with `ease-hero`, and its title and paragraph appear character by character out of a 10px blur. The Submit button's fills take `form` (0.2 s).

Reduced motion: rises, rolls, zooms and height changes happen at once, title words and characters fade without their blur and the spinners stand still, while fades and colour changes still animate; the hero film keeps playing.

- **`appear`** — type tween, duration 1s, ease 0.59,0.25,0.12,1.17. T1 — every scroll-appear and the inner pages' title effects: 1 s, overshoots about 2% and settles.
- **`ease-appear`** — `cubic-bezier(0.59, 0.25, 0.12, 1.17)`. The ease of T1.
- **`appear-offset`** — distance 18px, stagger 0.1s. Scroll-appear: a block starts transparent and 18px low and rises with T1 as soon as it enters the view (a few wait until half of it is in view), once; staggered blocks (the figures, the award photos) start 0.1 s apart.
- **`hero-rise`** — distance 50px, delay 0.2s, ease 0.79,0.01,0.15,0.99. The Home hero's label (0.6 s) and buttons (0.4 s): rise 50px out of a fade after 0.2 s, from the first paint.
- **`ease-hero`** — `cubic-bezier(0.79, 0.01, 0.15, 0.99)`. The ease of the Home hero's rise.
- **`char-appear`** — distance 10px, blur 10px, stagger 0.05s, delay 0.1s. The Home hero's title and paragraph, character by character: each rises 10px out of a 10px blur with a spring without bounce (0.2 s the title, 0.3 s the paragraph), 0.05 s after the one before, from 0.1 s.
- **`title-words`** — distance 10px, blur 7px, stagger 0.05s. The big title of About and Projects (and the small text beside it): each word rises 10px out of a 7px blur with T1, 0.05 s after the one before.
- **`intro-lines`** — distance 7px, delay 0.2s, stagger 0.05s. The intro under the title of About and Projects: each line rises 7px out of a fade with T1 from 0.2 s, 0.05 s after the line before.
- **`load-rise`** — distance 7px, delay 0.15s. The buttons and photo under the title of About and Projects, and the Projects cards: rise 7px out of a fade with T1 after 0.15 s, together, from the first paint.
- **`spring`** — spring (duration 0.4 s, bounce 0). S0 — the label roll of every button and link, the button and footer link dots, the header's background, the phone menu's height, the post cards' zoom; the default of every state change.
- **`spring-soft`** — spring (duration 0.4 s, bounce 0.2). S2 (a slight overshoot) — the hamburger's X, the services accordion's plus and minus, the services titles' colour, the team rows' dimming.
- **`hover`** — type tween, duration 0.4s, ease 0.5,0,0.88,0.77. TI (ease in) — the project and service cards' hover: zoom out, Brown title, the action rolling in.
- **`ease-hover`** — `cubic-bezier(0.5, 0, 0.88, 0.77)`. The ease of TI.
- **`form`** — type tween, duration 0.2s, ease 0.44,0,0.56,1. The Submit button's fill on hover and press.
- **`ease-form`** — `cubic-bezier(0.44, 0, 0.56, 1)`. The ease of the Submit button's fills.
- **`spin`** — duration 1s, ease linear, repeat infinite. The spinners (load more, sending): one turn a second.
- **`card-zoom`** — scale 1.05. Photos in the project, service and post cards sit at 105% and zoom out to 100% on hover.

## 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 / Black / White / Simple)). A square Brown box: the label and, 10px after it, an 8px White ring. On hover the label rolls up to a second copy and the ring shrinks to 4px and fills White; the fill never changes. "Let's talk" is 136px wide.
- **`button-black`** (Button (Primary / Black / White / Simple)). Black with a White label and no dot ("Our Works", "All Projects"); the same label roll on hover.
- **`button-white`** (Button (Primary / Black / White / Simple)). White with a Black label and no dot, over photos ("Book a call" in the Home hero).
- **`button-simple`** (Button (Primary / Black / White / Simple)). No box: the label and, 5px after it, a 12px arrow pointing up-right. On hover the label turns Brown and the arrow turns Brown and 45°.
- **`nav-link`** (Nav link). A header link with no padding, in the header's text colour (White over a dark hero); on hover the label rolls up one line to a second copy.
- **`nav-link-active`** (Nav link). The current page's link: Brown, no roll.
- **`footer-link`** (Footer link (White / Black)). A text link and, 5px after it, a 6px ring; on hover the label rolls up to a Brown copy and the ring shrinks to 4px and fills Brown. Black, with a Grey ring, on the page colour (Contact's e-mail and phone).
- **`label`** (Label). The small label before a title: a 12px ring with a 6px dot inside, then the word 10px after it; Grey, Black or White.
- **`project-card`** (Project card (Small / Landscape / Square)). The photo in a square-cornered frame (Small 1.1462 : 1, Landscape 1.6508 : 1, Square 1 : 1) at 105%, then the title in `h6` and "category / year" in `small`. On hover (`hover`, 0.4 s) the photo settles to 100%, the title turns Brown and "View Project" with its arrow rolls into view.
- **`service-card`** (Service card). The photo at 1.6508 : 1, then the name in `h6` and the summary in `small` Grey cut after two lines; the same hover as the project card, with "View Details".
- **`post-card`** (Post card). The photo at 1.8962 : 1, then the date • category line in `menu` Grey (the category Black), the title in `h6` and the excerpt in `paragraph` Grey cut after two lines; on hover only the photo settles to 100%.
- **`testimonial-card`** (Testimonial card). A White card: the quote in `big`, then 80px below a 38px round photo, the name over the role, and at the right a 20px Brown star with the rating. No hover.
- **`value-card`** (Value card). A White card: a 32px Brown line icon at the top, the title in `h6` and the text in `paragraph` Grey at the bottom. No hover.
- **`stat-number`** (Stat number). A figure in `number` with its unit ("+", "%", "y") at its top right in `h5` Brown and the caption under it in `small` Grey. Static text: it never counts up.
- **`input-field`** (Field). A square box with no border, filled with the Form Fill (`field`, a translucent grey) and turning White at once while it has focus; Inter 16 for the text, Line for the placeholder; the label in `small` Grey 10px above. A select has a 16px chevron in Icon; the text area is at least 200px tall.
- **`submit-button`** (Submit button). One form column wide. While sending a 20px White ring turns in place of the label; after a send it reads "Thank you" (`result`), after a failure "Something went wrong" in Error on a 15% Error fill.
- **`submit-button-hover`** (Submit button). Hover: Brown (0.2 s, `ease-form`); pressed: Brown at 80%.

Other components of the template, described in its spec: Logo, Icon, Team card, Hamburger, Award table, Rich text, Load spinner, Services switcher, Team picker, Char appear, Word appear, Line rise, Appear, Rise, Section, Title section, Ruler, Masonry, Photo, Grain, Quote band, CTA band, Form, Header and Footer, Current year.

## Do's and Don'ts

- Do set headings and text in Black on the cream Background, and use Grey for paragraphs, leads, card texts and labels.
- Do keep Brown for the Primary buttons, the current link, hovered titles, the logo's mark, units, stars and icons — one accent, used sparingly.
- Do write links, buttons, labels and dates in the upper-case 12px `menu` style, and headings at weight 600 with line height 1.2 and −0.03em.
- Do keep every photo, card, panel, button and field square; round only the small dots, rings and portraits.
- Do lay the `veil` and the grain over any photo or film that carries White text.
- Do let blocks rise 18px into view once with `appear`, roll button labels up to a second copy and settle card photos from 105% to 100%.
- Don't add shadows, rounded corners or new colours; the palette above is the whole palette.
- Don't use Brown for running text or large backgrounds; it marks actions and details.
- Don't put White text on a photo without the `veil` under it.
- Don't use Marcellus or Inter outside the founder's quote and the form's fields; Plus Jakarta Sans sets everything else.
- Don't add parallax, counters, carousels or page transitions; the design has none.

## Source

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

Demo photos (Unsplash, Pexels) and the Home hero film (a Pexels clip) 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