---
version: "alpha"
name: "Kendi"
description: "Blog and magazine website: a light grey page, white cards with 10px corners, black type and black buttons, photos under dark veils, no accent colour."
colors:
  black: "#000000"
  grey: "#3D3D3D"
  white: "#FFFFFF"
  paper: "#F5F5F5"
  line: "#DEDEDE"
  charcoal: "#333333"
  error: "#FF2244"
  focus: "#5A5A5A"
  spinner: "#999999"
  primary: "{colors.black}"
  on-primary: "{colors.white}"
  secondary: "{colors.white}"
  on-secondary: "{colors.black}"
  neutral: "{colors.paper}"
  surface: "{colors.white}"
  on-surface: "{colors.black}"
  on-surface-variant: "{colors.grey}"
  outline: "{colors.line}"
typography:
  h1:
    fontFamily: "Inter"
    fontSize: "72px"
    fontWeight: 600
    lineHeight: 0.95
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  h2:
    fontFamily: "Inter"
    fontSize: "34px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  h3:
    fontFamily: "Inter"
    fontSize: "42px"
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  rich:
    fontFamily: "Inter"
    fontSize: "28px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  h4:
    fontFamily: "Inter"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  h5:
    fontFamily: "Inter"
    fontSize: "18px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  h6:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  menu:
    fontFamily: "Inter"
    fontSize: "15px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  button:
    fontFamily: "Inter"
    fontSize: "15px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.02em"
    fontVariation: "'opsz' 14"
  small:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "-0.02em"
    fontVariation: "'opsz' 14"
  tiny:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.02em"
    fontVariation: "'opsz' 14"
rounded:
  icon: "2px"
  check: "4px"
  button: "5px"
  card: "10px"
  round: "9999px"
spacing:
  gutter: "30px"
  gutter-phone: "15px"
  gutter-tablet: "20px"
  section-padding: "50px"
  section-padding-phone: "30px"
  section-padding-tablet: "40px"
  band-padding: "100px"
  band-padding-phone: "60px"
  band-padding-tablet: "80px"
  breadcrumb-padding: "20px"
  breadcrumb-padding-phone: "15px"
  block-gap: "50px"
  content-max: "1200px"
  sidebar: "350px"
  header: "82px"
  header-phone: "65px"
components:
  button:
    backgroundColor: "{colors.black}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.button}"
    padding: "12px 16px 12px 12px"
    height: "42px"
  button-white:
    backgroundColor: "{colors.white}"
    textColor: "{colors.black}"
  category-pill:
    backgroundColor: "{colors.white}"
    textColor: "{colors.black}"
    typography: "{typography.small}"
    rounded: "{rounded.button}"
    padding: "6px 10px"
  category-pill-black:
    backgroundColor: "{colors.black}"
    textColor: "{colors.white}"
  menu-link:
    textColor: "{colors.black}"
    typography: "{typography.menu}"
  categories-panel:
    backgroundColor: "{colors.white}"
    textColor: "{colors.black}"
    rounded: "{rounded.card}"
    padding: "30px"
    width: "720px"
  post-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.black}"
    rounded: "{rounded.card}"
    padding: "20px"
  post-card-small:
    backgroundColor: "{colors.white}"
    textColor: "{colors.black}"
    rounded: "{rounded.card}"
    height: "110px"
  post-card-overlay:
    textColor: "{colors.white}"
    rounded: "{rounded.card}"
    height: "500px"
  spotlight-item:
    textColor: "{colors.black}"
    typography: "{typography.h6}"
    rounded: "{rounded.button}"
    size: "68px"
  category-tile:
    textColor: "{colors.white}"
    typography: "{typography.h6}"
    rounded: "{rounded.card}"
  ad-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.grey}"
    typography: "{typography.body}"
    rounded: "{rounded.card}"
    padding: "5px"
  subscribe-form:
    backgroundColor: "{colors.white}"
    textColor: "{colors.black}"
    rounded: "{rounded.button}"
    padding: "4px"
    height: "48px"
  form-field:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.black}"
    rounded: "{rounded.button}"
    padding: "12px"
    height: "40px"
  submit-button:
    backgroundColor: "{colors.black}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.button}"
    padding: "0px 16px"
    height: "40px"
  social-icons:
    textColor: "{colors.black}"
    size: "24px"
  slide-arrow:
    backgroundColor: "{colors.black}"
    textColor: "{colors.white}"
    rounded: "{rounded.round}"
    size: "40px"
---

# Kendi Design System

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

Kendi is a website template for blogs and online magazines: a home page of slideshows and curated lists, post pages with a sidebar, category and author archives, a newsletter in three places, about, contact and legal pages. It should feel editorial and calm: the photos carry the colour, the interface stays black and white, and the cards are packed tightly (10px apart) inside generous bands.

The page is Paper (#F5F5F5); content sits on White cards with 10px corners, and photos have the same corners. Type is Black (#000000) for titles, links and buttons, Grey (#3D3D3D) for body copy and meta. There is no accent colour: the main call to action is a Black button with a White label and a small arrow; over photos the text is White on a dark *veil* gradient. Line (#DEDEDE) draws the few hairlines.

Everything is set in Inter (the text cut at every size): headings and menu links 600, body text 500, all with slightly tight letter spacing (-0.03em headings, -0.02em text). Motion is quiet and quick: springs of 0.4 s with no bounce — photos zoom to 105% on hover, labels and arrows roll, underlines grow from the left — and two slideshows that step every 8 s. Nothing appears or rises on scroll.

## Colors

- **Black (#000000)** — `black`, `primary`, `on-secondary`, `on-surface`. Headings, titles, links, the buttons, the current breadcrumb item; at 50% the category tiles' veil, the checkbox hairline and the contact fields' placeholder; at 30% the Instagram tiles' hover veil.
- **Grey (#3D3D3D)** — `grey`, `on-surface-variant`. Body copy, meta lines, labels, the breadcrumb links, the menu links' hover copy and the Spotlight titles' hover.
- **White (#FFFFFF)** — `white`, `on-primary`, `secondary`, `surface`. The header, the footer, cards, form boxes, category pills, text on photos.
- **Paper (#F5F5F5)** — `paper`, `neutral`. The page background, the contact fields, dates and excerpts on photos.
- **Line (#DEDEDE)** — `line`, `outline`. Hairlines: form fields, the footer rule, the menu divider, the checkbox fill.
- **Charcoal (#333333)** — `charcoal`. The submit button pressed; at 85% its hover.
- **Error (#FF2244)** — `error`. The submit button's error label; at 15% its fill.
- **Focus (#5A5A5A)** — `focus`. The hairline of a focused contact field.
- **Spinner (#999999)** — `spinner`. The ring of the list loader (/blog loads on scroll).
- **Gradient `veil`:** `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.3) 50%, #000000 100%)`. Veil — over a post photo that carries white text (the hero slides, the Inspiration cards): clear at the top, Black 30 at the middle, Black at the bottom.
- **Gradient `ad-veil`:** `linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%)`. Ad Veil — over the wide ad's photo: Black on the left, Black 80 at the middle, clear on the right.

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

## Typography

**Inter, sans-serif.** Inter, the text cut at every size: the variable font pinned to optical size 14, so the big headings never switch to the display cut. Weights 400 (form fields), 500 (paragraphs, buttons), 600 (headings, menu) and 700 (bold runs).

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` | 48px / 58px / 72px | 1.1 / 1.05 / 0.95 | 600 | -0.03em, opsz 14 | Heading 1 — the Home hero's title |
| `h2` | 28px / 32px / 34px | 1.2 | 600 | -0.03em, opsz 14 | Heading 2 — block titles (Editor's pick, Trending, the newsletter band's title) |
| `h3` | 30px / 36px / 42px | 1.1 | 600 | -0.03em, opsz 14 | Heading 3 — the title of every page but Home (Blog, a post, a category, an author, Legal, the 404) and Related Post |
| `rich` | 24px / 26px / 28px | 1.2 | 600 | -0.03em, opsz 14 | Rich Heading — headings inside a post body or a legal page, the names on the category and author cards |
| `h4` | 22px / 22px / 24px | 1.2 | 600 | -0.03em, opsz 14 | Heading 4 — the hero slides' titles, the sidebar newsletter's title, a team member's name, h3 inside a post body |
| `h5` | 18px | 1.2 | 600 | -0.03em, opsz 14 | Heading 5 — post card titles, the hero's eyebrow, the ad's name |
| `h6` | 16px | 1.2 | 600 | -0.03em, opsz 14 | Heading 6 — small card titles, category tiles, footer column titles, From this category |
| `menu` | 15px | 1.2 | 600 | -0.03em, opsz 14 | Menu — the header's links |
| `button` | 15px | 1.2 | 500 | -0.03em, opsz 14 | Button — button labels, More categories |
| `body` | 16px | 1.4 | 500 | -0.02em, opsz 14 | Body — leads, excerpts, descriptions, rich text, the footer's links |
| `small` | 14px | 1.4 | 500 | -0.02em, opsz 14 | Small — meta lines (dates, names), category pills, the breadcrumb, roles, labels |
| `tiny` | 12px | 1.2 | 500 | -0.02em, opsz 14 | Tiny — the newsletter consent line, the Categories menu's descriptions and dates |

## 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 every section, the header and the footer |
| `section-padding` | 30px / 40px / 50px | Vertical padding of a page body (the Home hero and main column, the lists, the archives, a post, the 404) |
| `band-padding` | 60px / 80px / 100px | Vertical padding of the newsletter band and the legal text |
| `breadcrumb-padding` | 15px / 20px / 20px | Vertical padding of the breadcrumb band |
| `block-gap` | 50px | Between the blocks of a page body (a title and its list, two category or author blocks on desktops, a head and its grid) |
| `content-max` | 1200px | Widest content, centred inside the gutters |
| `sidebar` | 350px | The sidebar's width beside the main column on desktops (50 apart) |
| `header` | 65px / 82px / 82px | Height of the header bar, fixed at the top over a spacer of the same height |

Every page is a column of full-width bands on Paper with no gaps between them, the content centred and at most `content-max` (1200px) wide inside the `gutter` on each side. A page body is padded by `section-padding`, the newsletter band and the legal text by `band-padding`, the breadcrumb by `breadcrumb-padding`; blocks inside a body stand `block-gap` apart. Home and every post put a `sidebar`-wide column 50px to the right of the main column on desktops, sticky 120px under the top of the window; below 1200px it follows the main column. Cards in a list or grid are 10px apart. The header is a White bar fixed at the top of the window (`header` tall) over a spacer of the same height.

## Elevation & Depth

Kendi is flat: White cards on Paper, separated by space rather than lines; the few hairlines (form boxes, the footer rule, the menu divider) are 1px Line drawn inside the box. The one shadow, `menu`, sits under the header's Categories panel. Text over photos is lifted by gradients, not shadows: `veil` (clear at the top, Black at the bottom) on the slides and overlay cards, `ad-veil` (Black at the left) on the wide ad, a Black 50 veil on the category tiles.

- **`menu`:** `box-shadow: 0px 10px 20px 0px #0000000D`. The Categories menu panel.

## Shapes

Corners are soft and few: 10px for cards, photos and the Categories panel; 5px for buttons, category pills, form boxes and fields and the small Spotlight photos; 4px for the consent checkbox; 2px for the menu's tiny category photos. Author photos in meta lines, the meta dots and the slideshow arrows and dots are round.

- **`icon` (2px):** The Categories menu's 20px category photos.
- **`check` (4px):** The consent checkbox.
- **`button` (5px):** Buttons, category pills, form boxes and fields, the Spotlight photos.
- **`card` (10px):** Cards, photos, the Categories menu panel.
- **`round` (9999px):** Author photos in meta lines, the meta dots, the slideshow arrows and dots.

## Motion

Read from the live site's modules and checked with real input (2026-11-03/04). Spring is every hover and state change.

Reduced motion: hover effects and state changes happen at once (no transition), the slideshows never step on their own and jump when stepped, the menus open and close at once, and the loading spinner stands still.

- **`spring`** — spring (duration 0.4 s, bounce 0). Spring — every hover and state change: the photo zoom, the label and arrow rolls, the underline, the small cards' inset, the phone menu's height (it settles in about 0.37 s and never overshoots).
- **`spring-bounce`** — spring (duration 0.4 s, bounce 0.2). Spring Bounce — the hamburger's lines, the Categories panel fading in, the social icons fading (a slight overshoot).
- **`spring-slow`** — spring (duration 0.6 s, bounce 0). Spring Slow — the newsletter band's photos straightening and spreading.
- **`spring-long`** — spring (duration 0.7 s, bounce 0). Spring Long — the footer's Instagram tiles.
- **`slide`** — spring (stiffness 200, damping 40, mass 1). Slide — a slideshow stepping (overdamped, no overshoot).
- **`slide-interval`** — every 8s, loop endless. Both slideshows step on their own every 8 s; never under reduced motion.
- **`ease-in-out`** — `cubic-bezier(0.44, 0, 0.56, 1)`. Ease In Out — the Categories menu's columns and the submit button's states.
- **`menu-columns`** — type tween, duration 0.4s, ease `ease-in-out`, from opacity 0, 20px to the left. Each column of the Categories menu as it appears.
- **`form-state`** — type tween, duration 0.2s, ease `ease-in-out`. The submit button's fill, label and opacity changes; its spinner turns once a second, linear.

## Components

Component tokens below use the exact values of the template. Variants with a suffix only list what changes; translucent fills (Charcoal 85 on hover, Error 15, Black 50 and Black 30 veils) are described in the notes.

- **`button`** (Button). Every call to action ("Contact us", "View more", "View articles", "Learn more"): the label on one line and, 5px to its right, a 14px arrow. Hover (`spring`): the label slides 5px to the left and the arrow rolls out to the right as a second one comes in; the fill never changes.
- **`button-white`** (Button). On the wide ad's dark photo.
- **`category-pill`** (CategoryPill). A post's category as a link, 10px inside a card photo's top left corner (20px on the hero slides); its label rolls up on hover.
- **`category-pill-black`** (CategoryPill). Above a post body, beside the date.
- **`menu-link`** (MenuLink). The header's links, 30px apart, no box: on hover the label rolls up to a Grey copy (`spring`). The current page gets no mark.
- **`categories-panel`** (CategoriesMenu). The header's Categories menu on tablets and desktops: five categories and More categories beside four Spotlight posts, a 1px Line rule between the columns, the `menu` shadow; it fades in (`spring-bounce`) while each column slides in 20px.
- **`post-card`** (PostCardStack). The stacked post card: a 1.71 : 1 photo with the white category pill, then the meta line (28px round author photo, name, date in Small Grey), the title (`h5`, two lines) and the excerpt (`body`, Grey, two lines), 10px apart. Hover: the photo grows to 105%.
- **`post-card-small`** (PostCardSmall). A small post row: a 100px photo inset 5px in a 110 square (the inset closes on hover), the title (`h6`, two lines) and the date and author.
- **`post-card-overlay`** (PostCardOverlay). A hero slide: the photo fills the card under the `veil` gradient, the pill 20px inside the top left corner, the meta line, the title (`h4`, balanced) and, below 1200px, the excerpt in Paper. The Inspiration carousel's cards are the same look 300px tall.
- **`spotlight-item`** (SpotlightItem). The sidebar's newest posts: a 68px photo with 5px corners and, 10px to its right, the title over the date (Small, Grey); the title turns Grey on hover.
- **`category-tile`** (CategoryTile). A square category photo under a Black 50 veil with the name centred on it; the photo grows to 105% on hover.
- **`ad-card`** (AdCard). The sponsored ad under its "- Sponsored Ad -" label: tall in the sidebar (a 250px photo, the logo, the text and the Black button), wide in Home's main column (the photo under `ad-veil` with White text and the White button).
- **`subscribe-form`** (SubscribeForm). The newsletter box (the hero, the sidebar card, the band): a 1px Line hairline inside, the e-mail field and a 40px Black Subscribe button 10px apart; the optional consent line under it has a 14px checkbox with 4px corners.
- **`form-field`** (FormField). The contact form's inputs (a text area 200px tall) with a 1px Line hairline that turns Focus while focused; text 16px weight 400, placeholder Black 50; the label (`small`) 10px above.
- **`submit-button`** (SubmitButton). The contact form's button: Charcoal 85 on hover, Charcoal pressed, 50% while a required field is empty; a turning White ring while sending, then "Thank you", or "Something went wrong" in Error on an Error 15 fill.
- **`social-icons`** (SocialIcons). The X, Instagram and Facebook marks (rounded squares) 10px apart; hovering one fades the other two to 50% (`spring-bounce`).
- **`slide-arrow`** (SlideArrow). A slideshow's round arrow with a 2px White chevron: 40px at the hero's sides (desktops, on hover), 25px (20px on phones) above the Inspiration carousel.

Other components of the template, described in its spec: ArrowFlip, MoreLink, TextLink, RollText, Logo, Icon, MenuTrigger, Hamburger, Breadcrumb, Section, WithSidebar, BlockTitle, MetaRow, PostCardRow, CategoryMenuItem, InstagramTile, TeamCard, Slideshow, PhotoStack, Form, InlineText, RichText, LoadOnScroll, LoadSpinner, CurrentYear.

## Do's and Don'ts

- Do keep the interface black and white: Black for titles, links and buttons, Grey for body copy and meta, White cards on the Paper page; let the photos bring the colour.
- Do give cards and photos 10px corners and buttons, pills and fields 5px; keep cards 10px apart.
- Do put White text over photos only on a gradient veil (`veil`, `ad-veil`) or the Black 50 tile veil.
- Do set headings and menu links at weight 600 and -0.03em, body text at 500 and -0.02em, and keep Inter's optical size at 14 on every style.
- Do animate hovers with `spring` (0.4 s, no bounce): photos zoom to 105%, labels and arrows roll, underlines grow from the left.
- Do show a post's meta as a row of small Grey items separated by 6px dots: the author (with a 28px round photo where there is room), the category, the date.
- Don't add an accent colour, or colour a button anything but Black (White on dark photos).
- Don't add shadows beyond `menu`, which belongs to the Categories panel.
- Don't make blocks appear or rise on scroll: the page is simply there.
- Don't let a button label or a category pill wrap.
- Don't mix fonts: Inter is the only family.

## Source

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

Demo photos (Unsplash, Pexels) and the sponsored ad's brand (Tenq Tech, fictional) 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