---
version: "alpha"
name: "Balancee"
description: "Business and consulting website: a white page, near-black ink, light grey cards and black bands, with no accent colour."
colors:
  ink: "#121512"
  text: "#222222"
  grey: "#5a5a5a"
  line: "#e5e5e5"
  soft: "#f5f5f5"
  white: "#ffffff"
  black: "#000000"
  error: "#d92d20"
  danger: "#ff2244"
  field-line: "rgba(136, 136, 136, 0.1)"
  focus: "#0099ff"
  placeholder: "rgba(47, 47, 47, 0.5)"
  dim: "rgba(47, 47, 47, 0.5)"
  spinner: "#999999"
  primary: "{colors.ink}"
  on-primary: "{colors.white}"
  secondary: "{colors.text}"
  on-secondary: "{colors.white}"
  neutral: "{colors.white}"
  surface: "{colors.soft}"
  on-surface: "{colors.ink}"
  on-surface-variant: "{colors.grey}"
  outline: "{colors.line}"
typography:
  h1:
    fontFamily: "Inter"
    fontSize: "52px"
    fontWeight: 500
    lineHeight: 1.2
  h2:
    fontFamily: "Inter"
    fontSize: "48px"
    fontWeight: 500
    lineHeight: 1.2
  h3:
    fontFamily: "Inter"
    fontSize: "36px"
    fontWeight: 500
    lineHeight: 1.2
  h4:
    fontFamily: "Inter"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.2
  h5:
    fontFamily: "Inter"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.2
  h6:
    fontFamily: "Inter"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.2
  paragraph:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.4
  small:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.4
  tiny:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.4
  eyebrow:
    fontFamily: "Inter"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: 1.2
  button:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.2
rounded:
  card: "10px"
  chip: "4px"
  result: "8px"
  pill: "100px"
spacing:
  gutter: "30px"
  gutter-phone: "15px"
  gutter-tablet: "20px"
  section-padding: "100px"
  section-padding-phone: "60px"
  section-padding-tablet: "80px"
  content-max: "1440px"
  header-height: "75px"
  header-height-phone: "60px"
  header-height-tablet: "71px"
components:
  button-black:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "8px 8px 8px 16px"
  button-white:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "8px 8px 8px 16px"
  menu-link:
    textColor: "{colors.text}"
    typography: "{typography.paragraph}"
    rounded: "{rounded.pill}"
    padding: "6px 12px"
  menu-link-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
  chip-soft:
    backgroundColor: "{colors.soft}"
    textColor: "{colors.ink}"
    typography: "{typography.small}"
    rounded: "{rounded.chip}"
    padding: "5px 10px"
  chip-ink:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.small}"
    rounded: "{rounded.chip}"
    padding: "5px 10px"
  service-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.h6}"
    rounded: "{rounded.card}"
    padding: "15px 20px"
  post-card:
    backgroundColor: "{colors.soft}"
    textColor: "{colors.ink}"
    typography: "{typography.h6}"
    rounded: "{rounded.card}"
    padding: "20px 20px 15px"
  case-card-title:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.h5}"
    rounded: "{rounded.card}"
    padding: "15px"
  result-strip:
    backgroundColor: "{colors.soft}"
    textColor: "{colors.ink}"
    typography: "{typography.paragraph}"
    rounded: "{rounded.result}"
    padding: "10px 15px"
  step-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.h5}"
    rounded: "{rounded.card}"
    padding: "20px"
    height: "400px"
  value-card:
    backgroundColor: "{colors.soft}"
    textColor: "{colors.ink}"
    typography: "{typography.h6}"
    rounded: "{rounded.card}"
    padding: "20px"
    height: "250px"
  detail-card:
    backgroundColor: "{colors.soft}"
    textColor: "{colors.ink}"
    typography: "{typography.h5}"
    rounded: "{rounded.card}"
    padding: "20px"
    height: "125px"
  testimonial-dark:
    backgroundColor: "{colors.black}"
    textColor: "{colors.white}"
    typography: "{typography.paragraph}"
    rounded: "{rounded.result}"
    padding: "20px"
    height: "400px"
  testimonial-light:
    backgroundColor: "{colors.soft}"
    textColor: "{colors.ink}"
    typography: "{typography.paragraph}"
    rounded: "{rounded.card}"
    padding: "20px"
    height: "400px"
  logo-tile:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.card}"
    width: "250px"
    height: "125px"
  input-field:
    backgroundColor: "{colors.soft}"
    textColor: "{colors.ink}"
    typography: "{typography.paragraph}"
    rounded: "{rounded.chip}"
    padding: "12px"
    height: "40px"
  input-field-focus:
    textColor: "{colors.ink}"
  submit-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.chip}"
    width: "240px"
    height: "40px"
  newsletter-button:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.chip}"
    height: "45px"
  footer:
    backgroundColor: "{colors.black}"
    textColor: "{colors.white}"
    typography: "{typography.paragraph}"
---

# Balancee Design System

> The design tokens and style rules of **Balancee**, a website template by Framebrick (live Framer site: https://balance.framer.media). 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

Balancee is a website template for business consultants and agencies: services, case studies, insights and a contact form. It should feel clear, confident and unfussy: professional rather than decorative, with generous space between sections and tidy cards inside them.

The look is built from very few parts. The page is White; content sits on White and Soft (#f5f5f5) cards with 10px corners; type and buttons are Ink (#121512), with Grey (#5a5a5a) for anything secondary. There is no accent colour: the only contrast comes from Black bands (the footer, the dark testimonial, the About timeline) and from photos under a Black cover. Primary actions are Ink pills with a small round arrow.

Everything is set in Inter, at weight 500 for headings, buttons and labels and 400 for text, at normal letter spacing. Motion is quiet and short: a button label that rolls up on hover while its arrow turns, springs of about 0.4 s for cards and accordion rows, a photo that grows to 105%, and logos that run past at a slow, steady speed. Nothing appears on scroll and nothing counts up.

## Colors

- **Ink (#121512)** — `ink`, `primary`, `on-surface`. Headings and text on the light page, the dark buttons, the active menu pill, dark chips, the checked ring of a radio.
- **Text (#222222)** — `text`, `secondary`. The menu's links.
- **Grey (#5a5a5a)** — `grey`, `on-surface-variant`. Body text on light backgrounds, meta, field labels, the dates.
- **Line (#e5e5e5)** — `line`, `outline`. Hairlines, the light text on black (timeline, footer links on hover).
- **Soft (#f5f5f5)** — `soft`, `surface`. Alternate section backgrounds, chips, the soft cards and the form fields.
- **White (#ffffff)** — `white`, `on-primary`, `on-secondary`, `neutral`. The page, cards, text on dark.
- **Black (#000000)** — `black`. The footer, the dark testimonial and the About timeline, and the covers over photos (at 80%).
- **Error (#d92d20)** — `error`. A form field that failed its check: its hairline and its message.
- **Danger (#ff2244)** — `danger`. The Submit label after a failed send, on a 15% fill of the same colour.
- **Field Line (rgba(136, 136, 136, 0.1))** — `field-line`. The 1px hairline of a form field at rest.
- **Focus (#0099ff)** — `focus`. The hairline of a focused text field.
- **Placeholder (rgba(47, 47, 47, 0.5))** — `placeholder`. The placeholder text of a field.
- **Dim (rgba(47, 47, 47, 0.5))** — `dim`. The year pills of the About timeline, on black.
- **Spinner (#999999)** — `spinner`. The ring of the blog list's loading spinner.

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

## Typography

**Inter, sans-serif.** Inter from Google Fonts (variable; weights 400, 500 and 600 in use), normal letter spacing.

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 |
|---|---|---|---|---|---|
| `h1` | 32px / 48px / 52px | 1.2 | 500 | — | Heading 1: page titles |
| `h2` | 30px / 36px / 48px | 1.2 | 500 | — | Heading 2: section titles |
| `h3` | 28px / 32px / 36px | 1.2 | 500 | — | Heading 3: the figures (facts, the About figure cards, the result strip numbers) |
| `h4` | 24px / 26px / 28px | 1.2 | 500 | — | Heading 4: an open case study's headline, the call to action band's title |
| `h5` | 20px / 22px / 24px | 1.2 | 500 | — | Heading 5: card and row titles, the title of the logo ticker |
| `h6` | 18px / 19px / 20px | 1.2 | 500 | — | Heading 6: service and post titles, step promises, the footer's column titles |
| `paragraph` | 16px | 1.4 | 400 | — | Paragraph: leads, descriptions, rich text, footer links |
| `small` | 14px | 1.4 | 400 | — | Small: chips, dates, captions, field labels |
| `tiny` | 12px | 1.4 | 400 | — | Tiny: the case study tags on the photo cards, the legal line under a form |
| `eyebrow` | 13px | 1.2 | 500 | —, upper case | Eyebrow: the small label above a section title |
| `button` | 16px | 1.2 | 500 | — | Button: button and menu labels |

## 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 of the header |
| `section-padding` | 60px / 80px / 100px | Vertical padding (top and bottom) of most sections |
| `content-max` | 1440px | Maximum content width: the content column stops growing here and is centred (1140 wide at 1200) |
| `header-height` | 60px / 71px / 75px | The fixed header bar; every page starts below a spacer of this height |

Every section is centred, at most `content-max` wide inside the `gutter` on each side, and padded top and bottom by `section-padding`; the blocks inside a section are usually 50 apart (60, 80 and 100 between the large blocks of the inner pages). Cards in a grid are 20px apart across and 30 down: three columns on desktops, two on tablets, one on phones for lists; the four process steps sit in two columns by two rows on desktops and tablets, in one column on phones. The parts of one card (a framed photo and its text box) are only 5px apart, so the page shows through as a thin line between them.

Every page starts below a white header bar of `header-height`, fixed to the top; it never changes with the scroll. Pages end with a black call to action band (not on Contact and Services) and the black footer.

## Elevation & Depth

Balancee is flat: there are no shadows anywhere. Depth comes from fills: Soft cards on a White section or White cards on a Soft section, Black bands for emphasis, and photos or videos under a Black cover (80%) wherever White text sits on them. A form field is Soft with a hairline (`field-line`) at rest and gets a blue `focus` hairline when focused.

## Shapes

Cards, photos and rows have 10px corners; chips, form fields and the Submit button 4px; buttons, menu links and the round marks are fully rounded (pill).

- **`card` (10px):** Cards, photos and rows.
- **`chip` (4px):** Chips, form fields and the Submit button.
- **`result` (8px):** The result strip, the dark testimonial.
- **`pill` (100px):** Buttons, menu links (50), round icons.

## Motion

Reduced motion: the videos stay on their poster, the logo ticker stands still and the rows open at once, while fades and colour changes still animate.

- **`spring`** — spring (duration 0.4 s, bounce 0). Card paddings, accordion rows, the phone menu and the hamburger lines; settles in about 450 ms, never overshoots. As a CSS curve: linear(0, 0.037, 0.123, 0.229, 0.34, 0.445, 0.54, 0.623, 0.695, 0.754, 0.803, 0.844, 0.876, 0.903, 0.924, 0.94, 0.953, 0.964, 0.972, 0.978, 0.983, 0.987, 0.99, 0.992, 0.994, 0.995, 0.997, 0.997, 1) over 450ms.
- **`ease-card`** — `cubic-bezier(0.44, 0, 0.56, 1)`. The case study photo zoom, the award row hover, the form button's states (0.2 s) and the list spinner's fade (0.3 s).
- **`button`** — duration 200ms, ease linear. Button hover: the label rolls 29.2px up to its copy while the first blurs 0 to 2px, the arrow turns 45 degrees.
- **`menu`** — duration 400ms, ease linear. Menu link hover: the colour and the 1px line growing from 0 to the label's width.
- **`card-zoom`** — duration 0.4s, ease `ease-card`, to scale 1.05. The case study photo on hover.
- **`ticker`** — speed 20px per second, direction left, pause on hover. The client logos.

## Components

Component tokens below use the exact values of the template. Variants with a suffix (`-active`, `-hover`, `-focus`, `-dark`) only list what changes. A button's label rolls up on hover and its arrow turns 45 degrees; the colours never change.

- **`button-black`** (Button). Black/Primary: the Ink pill with a 19 round arrow disc on the right (the arrow is Ink on a White disc). Black/Secondary has no box: Ink label and an Ink disc with a White arrow.
- **`button-white`** (Button). White/Primary, on photos and black bands; White/Secondary has no box and a White label and disc.
- **`menu-link`** (Menu link). A header link; on hover the label turns Ink and a 1px Ink line grows under it. 31 tall.
- **`menu-link-active`** (Menu link). The current page (Home is lit on Home; a service lights Services).
- **`chip-soft`** (Chip). Figure titles, case tags and the open accordion row's chip; a small one (`tiny`, padding 3 5) tags the photo cards and a large one (16) holds a case study's name.
- **`chip-ink`** (Chip). A post's category.
- **`service-card`** (Service card). A square White frame (padding 5) over a White details box, 5 apart; the text is Grey. On hover the gap and the frame padding go to 0 and the photo grows to the frame.
- **`post-card`** (Post card). White on a Soft page, Soft on a White page; a photo box with 5 padding (360:236), then the Ink category chip and the date, the title and the excerpt, two lines at most. On hover the photo's padding goes to 0.
- **`case-card-title`** (Case card). The White title box over a case study's photo, with the project's chip; the photo scales to 105% on hover.
- **`result-strip`** (Case accordion). The result inside an open accordion row: a figure and its text, with a "See detail" button.
- **`step-card`** (Step card). A title box over a content box, 5 apart; four 8 dots show the step.
- **`value-card`** (Value card). The title at the top, the text at the bottom.
- **`detail-card`** (Detail card). A case study's Client, Budget, Duration and Team Size.
- **`testimonial-dark`** (Testimonial cards). Name and role, the quote and two figures.
- **`testimonial-light`** (Testimonial cards). The quote and the client's round photo, name and role.
- **`logo-tile`** (Logo ticker). A client logo (144 wide) in a White tile, 10 apart, on a Soft section.
- **`input-field`** (Form fields). A 1px hairline (`field-line`), a `placeholder` at 50% Ink; the label (`small`, Grey) sits 10 above. A text area is at least 200 tall. A failed field gets an `error` hairline and its message under it.
- **`input-field-focus`** (Form fields). The hairline turns the blue `focus` colour (a radio's turns Grey).
- **`submit-button`** (Form fields). Hover 90% opacity, pressed 80%; sending shows a 20 White ring turning once a second, success "Thank you", failure "Something went wrong" in `danger` on a 15% fill of it.
- **`newsletter-button`** (Newsletter form). "Join Now", under a 45 tall field with a White 30% fill, in the black footer.
- **`footer`** (Footer). Black, with a White strip (radius 4) holding the logo and the first four services; links turn `line` grey and underline on hover.

Other components of the template, described in its spec: Wordmark and logo, Hamburger (phones), Header, Section title, Stars, rating, Fact, Step card (service page), Video player, CTA band, Breadcrumbs and page title (inner pages), Icon, Rich text, Load on scroll, Figure card (About hero), Pillar card (Who We Are), Timeline step (About), Award row (About), Team card (About).

## Do's and Don'ts

- Do keep the page White and put content on White or Soft cards with 10px corners; use Black only for the footer, the call to action band, the dark testimonial and the About timeline, and for covers over photos.
- Do set headings and buttons at weight 500 and text at 400, with Inter at normal letter spacing; heading line height is 1.2 and text 1.4.
- Do use Ink for titles, buttons and the current menu link, and Grey for leads, meta, labels and dates.
- Do put a small round arrow on every call to action, and let the label roll up on hover while the arrow turns, without changing colours.
- Do keep photos in boxes with 10px corners and let a hover grow them only to 105% (cases) or to the frame's edge (service and post cards).
- Do use the `error` hairline and message for a failed field and `danger` only for a failed send.
- Don't add an accent colour, shadows or gradients; the palette above is the whole palette.
- Don't make a button change colour on hover, or let its label wrap.
- Don't animate anything on scroll or count numbers up: the only motion is hover, click, the videos and the logo ticker.
- Don't mix fonts: Inter is the only family.
- Don't round a chip, field or the Submit button more than 4px, or square off a card.

## Source

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

Demo photos (Unsplash and Pexels) and the three stock videos (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