DESIGN.md · Free

Kalme design system

Calm, minimal digital marketing agency website: a light grey page, square white cards, black type and black pill buttons, with one small red accent dot.

The style

Kalme is a website template for digital marketing agencies: services, projects, a blog, an about page with the team, and a contact form. It should feel calm and minimal: quiet, ordered and confident, with plenty of space between sections and very little decoration.

The look is built from very few parts. The page is a light grey Background (#F7F7F7); content sits on square White cards and square images; type is Black, with Grey (#4F4F4F) for paragraphs, leads and labels, and 1px Line (#D9D9D9) dividers. Calls to action are Black pills with White text. The only colour is Red (#FA2837), used in small doses: the dot in the Primary button, the dot after the active menu item, the brackets around section labels and the hover colour of arrow links.

Everything is set in Inter with tight letter spacing (-0.03em, -0.02em for buttons): headings at weight 600, the display title and fact figures at 700, body text at 500. Motion is soft and quick: one spring of 0.4 s without bounce for button label flips, growing underlines, flipping arrows and images that settle from 105% to 100% on hover.

Colours

Black#000000ink · primary · on-surfaceHeadings, text, buttons, dark cards.
Grey#4F4F4Fgrey · on-surface-variantParagraphs, secondary text.
Line#D9D9D9line · outlineDividers, borders, category chips.
Background#F7F7F7background · neutralPage, header, footer.
White#FFFFFFwhite · on-primary · surfaceCards.
Red#FA2837red · secondary · errorAccent dot (buttons, active menu item).
Ink 20rgba(0, 0, 0, 0.2)ink-20Black 20.
Ink 05rgba(0, 0, 0, 0.05)ink-05Black 05.
Transparentrgba(255, 255, 255, 0)transparentTransparent.

Typography · Inter

display
100px · 700 · 1.1 · -0.03emKalme
h1
64px · 600 · 1.2 · -0.03emKalme
h2
54px · 600 · 1.2 · -0.03emKalme
h3
42px · 600 · 1.2 · -0.03emKalme
h4
36px · 600 · 1.2 · -0.03emKalme
h5
28px · 600 · 1.2 · -0.03emKalme
h6
24px · 600 · 1.2 · -0.03emKalme
number
72px · 700 · 1.2 · -0.03emKalme
big-paragraph
18px · 500 · 1.4 · -0.03emBuild a site that feels designed
paragraph
16px · 500 · 1.4 · -0.03emBuild a site that feels designed
small-paragraph
14px · 500 · 1.4 · -0.03emBuild a site that feels designed
menu
16px · 600 · 1.2 · -0.03emBuild a site that feels designed
button
16px · 500 · 1.2 · -0.02emBuild a site that feels designed
subtitle
14px · 600 · 1.4 · -0.03emBuild a site that feels designed

Corners

pill · 50px

Spacing

section-padding · 100px
section-padding-phone · 60px
section-padding-tablet · 80px
gutter · 30px
gutter-phone · 15px
gutter-tablet · 20px
header · 89px
header-phone · 60px
content-max · 1440px

Parts

Get startedGet startedGet started

category chip

Kalme

A card in its own colours and corners.

Kalme

A card in its own colours and corners.

Drawn from the file’s component tokens.

Do's and don'ts

use Black pills with White text for the main call to action, and the transparent Secondary pill with a Black border beside them.
keep Red to small marks: the Primary button's dot, the active menu item's dot, the brackets of section labels, arrow links on hover and a failed form send.
keep cards, images, chips and form fields square; round only buttons, dots and round icons.
set headings (h1–h6), menu and subtitle at weight 600, display and number at 700, and every other style at 500.
use Grey for paragraphs, leads, labels, dates and meta, and Black for titles.
start every section title with a bracketed, uppercase section label.
animate hovers with spring-soft (0.4 s, no bounce): button labels flip, underlines grow from the left, arrows flip and images settle from 105% to 100%.

add shadows, gradients or new colours; the palette above is the whole palette.
use Red as a button fill or for large areas.
round the corners of cards, images, chips or form fields.
change a button's colours on hover (the label flips instead).
mix fonts: Inter is the only family.

Get Kalme

Kalme

Free

Calm digital marketing agency template

Framer
Next.js
Astro
HTML
Figma
AI prompt

11 pages

This file describes Kalme’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: "Kalme"
description: "Calm, minimal digital marketing agency website: a light grey page, square white cards, black type and black pill buttons, with one small red accent dot."
colors:
  ink: "#000000"
  grey: "#4F4F4F"
  line: "#D9D9D9"
  background: "#F7F7F7"
  white: "#FFFFFF"
  red: "#FA2837"
  ink-20: "rgba(0, 0, 0, 0.2)"
  ink-05: "rgba(0, 0, 0, 0.05)"
  transparent: "rgba(255, 255, 255, 0)"
  primary: "{colors.ink}"
  on-primary: "{colors.white}"
  secondary: "{colors.red}"
  neutral: "{colors.background}"
  surface: "{colors.white}"
  on-surface: "{colors.ink}"
  on-surface-variant: "{colors.grey}"
  outline: "{colors.line}"
  error: "{colors.red}"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "100px"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  h1:
    fontFamily: "Inter"
    fontSize: "64px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h2:
    fontFamily: "Inter"
    fontSize: "54px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h3:
    fontFamily: "Inter"
    fontSize: "42px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h4:
    fontFamily: "Inter"
    fontSize: "36px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h5:
    fontFamily: "Inter"
    fontSize: "28px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  h6:
    fontFamily: "Inter"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  number:
    fontFamily: "Inter"
    fontSize: "72px"
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  big-paragraph:
    fontFamily: "Inter"
    fontSize: "18px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.03em"
  paragraph:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.03em"
  small-paragraph:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.03em"
  menu:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
  button:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.02em"
  subtitle:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: "-0.03em"
rounded:
  pill: "50px"
spacing:
  section-padding: "100px"
  section-padding-phone: "60px"
  section-padding-tablet: "80px"
  gutter: "30px"
  gutter-phone: "15px"
  gutter-tablet: "20px"
  header: "89px"
  header-phone: "60px"
  content-max: "1440px"
components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: "39px"
  button-secondary:
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: "39px"
  button-dot:
    backgroundColor: "{colors.red}"
    rounded: "{rounded.pill}"
    size: "6px"
  menu-link:
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
  arrow-link:
    textColor: "{colors.ink}"
    typography: "{typography.button}"
  arrow-link-hover:
    textColor: "{colors.red}"
  arrow-circle:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    rounded: "{rounded.pill}"
    size: "18px"
  arrow-circle-hover:
    backgroundColor: "{colors.red}"
  section-label:
    textColor: "{colors.grey}"
    typography: "{typography.subtitle}"
  category-chip:
    backgroundColor: "{colors.line}"
    textColor: "{colors.grey}"
    typography: "{typography.small-paragraph}"
    padding: "5px 8px"
  fact-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.number}"
    padding: "30px"
  project-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.h6}"
    padding: "20px"
  testimonial-card-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    padding: "30px"
  testimonial-card-light:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    padding: "30px"
  plan-switch-option:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.small-paragraph}"
    width: "85px"
    height: "36px"
  input-field:
    textColor: "{colors.ink}"
    typography: "{typography.paragraph}"
    padding: "12px"
    height: "40px"
  radio-checked:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    size: "18px"
  submit-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: "40px"
---

# Kalme Design System

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

Kalme is a website template for digital marketing agencies: services, projects, a blog, an about page with the team, and a contact form. It should feel calm and minimal: quiet, ordered and confident, with plenty of space between sections and very little decoration.

The look is built from very few parts. The page is a light grey Background (#F7F7F7); content sits on square White cards and square images; type is Black, with Grey (#4F4F4F) for paragraphs, leads and labels, and 1px Line (#D9D9D9) dividers. Calls to action are Black pills with White text. The only colour is Red (#FA2837), used in small doses: the dot in the Primary button, the dot after the active menu item, the brackets around section labels and the hover colour of arrow links.

Everything is set in Inter with tight letter spacing (-0.03em, -0.02em for buttons): headings at weight 600, the display title and fact figures at 700, body text at 500. Motion is soft and quick: one spring of 0.4 s without bounce for button label flips, growing underlines, flipping arrows and images that settle from 105% to 100% on hover.

## Colors

- **Black (#000000)** — `ink`, `primary`, `on-surface`. Headings, text, buttons, dark cards.
- **Grey (#4F4F4F)** — `grey`, `on-surface-variant`. Paragraphs, secondary text.
- **Line (#D9D9D9)** — `line`, `outline`. Dividers, borders, category chips.
- **Background (#F7F7F7)** — `background`, `neutral`. Page, header, footer.
- **White (#FFFFFF)** — `white`, `on-primary`, `surface`. Cards.
- **Red (#FA2837)** — `red`, `secondary`, `error`. Accent dot (buttons, active menu item).
- **Ink 20 (rgba(0, 0, 0, 0.2))** — `ink-20`. Black 20.
- **Ink 05 (rgba(0, 0, 0, 0.05))** — `ink-05`. Black 05.
- **Transparent (rgba(255, 255, 255, 0))** — `transparent`. Transparent.

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

## Typography

**Inter, sans-serif.**

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` | 52px / 68px / 100px | 1.1 | 700 | -0.03em | Display 1 |
| `h1` | 42px / 52px / 64px | 1.2 | 600 | -0.03em | Heading 1 |
| `h2` | 36px / 42px / 54px | 1.2 | 600 | -0.03em | Heading 2 |
| `h3` | 32px / 36px / 42px | 1.2 | 600 | -0.03em | Heading 3 |
| `h4` | 28px / 32px / 36px | 1.2 | 600 | -0.03em | Heading 4 |
| `h5` | 24px / 26px / 28px | 1.2 | 600 | -0.03em | Heading 5 |
| `h6` | 20px / 22px / 24px | 1.2 | 600 | -0.03em | Heading 6 |
| `number` | 56px / 64px / 72px | 1.2 | 700 | -0.03em | Number — fact figures |
| `big-paragraph` | 18px | 1.4 | 500 | -0.03em | Big Paragraph |
| `paragraph` | 16px | 1.4 | 500 | -0.03em | Medium Paragraph |
| `small-paragraph` | 14px | 1.4 | 500 | -0.03em | Small Paragraph |
| `menu` | 16px | 1.2 | 600 | -0.03em | Menu |
| `button` | 16px | 1.2 | 500 | -0.02em | Button |
| `subtitle` | 14px | 1.4 | 600 | -0.03em, uppercase | Subtitle — section labels in brackets |

## 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 |
|---|---|---|
| `section-padding` | 60px / 80px / 100px | Section padding top and bottom |
| `gutter` | 15px / 20px / 30px | Section padding left and right |
| `header` | 60px / 89px / 89px | Height of the fixed header bar; a spacer of the same height sits under it, then a 1px Line that scrolls with the page |
| `content-max` | 1440px | Maximum content width (inside the gutters) |

Every section is centred, at most `content-max` wide inside the `gutter` on each side, and padded top and bottom by `section-padding`. A section's content follows 50px below its title block at every breakpoint. Cards in a grid are 20px apart: projects in two columns with rows 30px apart, posts and team members in three columns (two on tablets) with rows 50px apart, testimonials in a mosaic, one column on phones. Fact cards are 10px apart. The header is fixed, in the Background colour, with a 1px Line under it.

## Elevation & Depth

Kalme is flat: there are no shadows anywhere. Depth comes from fills: White cards on the grey Background, Black cards for the dark testimonials, and 1px Line dividers between the header, sections and footer. Form fields use a faint Black 05 fill (`ink-05`) with a 1px Line border inside that turns Black while focused.

## Shapes

Cards, images, chips and form fields have square corners; buttons, dots and round icons are pills (`pill`).

- **`pill` (50px):** Buttons, dots, round icons; cards and images are square.

## Motion

Reduced motion: the ticker and the page video stand still, the showreel stays on its first image and looping videos show only their poster.

- **`spring-soft`** — spring (duration 0.4 s, bounce 0). The main transition: buttons, card hovers, the accordion, the pricing switch, the header menu.
- **`spring-button`** — spring (duration 0.4 s, bounce 0.2). The menu icon (Menu / Close).

## Components

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

- **`button-primary`** (Button (Primary / Secondary)). The Black pill with a 1px Black border inside and a red dot 8px after the label (see `button-dot`). Hover (`spring-soft`): the label moves up out of view, blurring, while an identical copy rises from below; the colours never change.
- **`button-secondary`** (Button (Primary / Secondary)). Transparent, with the same 1px Black border inside and Black text; no dot. Same label flip on hover.
- **`button-dot`** (Button (Primary / Secondary)). The Red dot of the Primary button, at 60% opacity in an 8px box; on hover it turns fully opaque and grows to 8px.
- **`menu-link`** (Menu link (Default / Active)). Hover: a 1px Black line grows under the label from the left. The current page instead gets a 6px Red dot after the label, set like a superscript, and no hover line.
- **`arrow-link`** (Arrow link (Default / No Icon)). A text link followed, 5px after it, by `arrow-circle`.
- **`arrow-link-hover`** (Arrow link (Default / No Icon)). Hover: label and circle turn Red; the arrow leaves towards the top right while a second one comes in from the bottom left.
- **`arrow-circle`** (Arrow link (Default / No Icon)). A Black circle with a 12px White arrow-up-right icon; the Project card uses a 22px circle with a 14px arrow.
- **`arrow-circle-hover`** (Arrow link (Default / No Icon)). The circle turns Red on hover.
- **`section-label`** (Section label). The uppercase eyebrow above a section title, between Red square brackets 2px from the text; the heading (`h2`) follows 10px below.
- **`category-chip`** (Post card). A post's category, square, 10px before the date.
- **`fact-card`** (Fact card). The value in `number` with its suffix in `h3`, Grey, 2px after it, then the label in `paragraph`, Grey.
- **`project-card`** (Project card). The White bar 10px under a project image: year (`paragraph`, Grey) and title, a 22px arrow circle on the right. Hover: the image grows to 105%, the gap closes while the bar's top padding grows to 30px, the circle turns Red.
- **`testimonial-card-dark`** (Testimonial card (Dark / Light × Simple / Full)). Black card with White text and stars; the quote in `big-paragraph`. Padding is 20px below desktops.
- **`testimonial-card-light`** (Testimonial card (Dark / Light × Simple / Full)). White card with Black text, the company in Grey; the Full version adds the company logo (134 × 34) on the right.
- **`plan-switch-option`** (Pricing card (Weekly / Monthly)). The chosen option of the Weekly / Monthly switch: a Black block that slides behind it (`spring-soft`) on a Background-coloured track; the other option is Black text on the track.
- **`input-field`** (Form field). Square, with a Black 05 fill (`ink-05`), a 1px Line border inside and a Black 20 placeholder (`ink-20`); the border turns Black while focused. The label (`small-paragraph`, Grey) sits 10px above.
- **`radio-checked`** (Radio group). The chosen option's square, Black with a White bold check; unchosen squares are Black 05 with a 1px Line border inside.
- **`submit-button`** (Submit button (Default / Loading / Success / Error)). A form's Send button. Hover: a translucent dark grey fill, rgba(51, 51, 51, 0.85); pressed: #333 (0.2 s). While sending, a 20px White spinner replaces the label; after a send it reads "Thank you", after a failed send "Something went wrong" in Red on a 15% Red fill.

Other components of the template, described in its spec: Text link, Hamburger (Default / Close), Logo (Black / White), Icon, Section, Page title, Section title (split / center), Divider, Value card, Team card, Service row (Left / Right), Service card, Check list, Highlight list, Service accordion, Rich text, Ticker, Showreel, Looping video, Scroll video.

## Do's and Don'ts

- Do use Black pills with White text for the main call to action, and the transparent Secondary pill with a Black border beside them.
- Do keep Red to small marks: the Primary button's dot, the active menu item's dot, the brackets of section labels, arrow links on hover and a failed form send.
- Do keep cards, images, chips and form fields square; round only buttons, dots and round icons.
- Do set headings (`h1`–`h6`), `menu` and `subtitle` at weight 600, `display` and `number` at 700, and every other style at 500.
- Do use Grey for paragraphs, leads, labels, dates and meta, and Black for titles.
- Do start every section title with a bracketed, uppercase section label.
- Do animate hovers with `spring-soft` (0.4 s, no bounce): button labels flip, underlines grow from the left, arrows flip and images settle from 105% to 100%.
- Don't add shadows, gradients or new colours; the palette above is the whole palette.
- Don't use Red as a button fill or for large areas.
- Don't round the corners of cards, images, chips or form fields.
- Don't change a button's colours on hover (the label flips instead).
- Don't mix fonts: Inter is the only family.

## Source

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

Demo photos (Unsplash) and videos (Pexels, played from the Pexels CDN) are placeholders and not part of the design system.

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": "kalme" }, or the raw file at framebrick.co/templates/kalme/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 · Inter

Corners

Spacing

Parts

Do's and don'ts

Get Kalme

Kalme

Get new templates and components first