---
version: "alpha"
name: "Denzel"
description: "Blog and magazine website: a white page, serif titles over sans-serif text, near-black ink, grey meta and one orange accent for categories and hovers."
colors:
  ink: "#1c2522"
  body: "#707a88"
  grey: "#999999"
  accent: "#e38836"
  navy: "#203656"
  pink: "#fe4f70"
  white: "#ffffff"
  black: "#000000"
  rule: "rgba(0, 0, 0, 0.2)"
  frame: "#999999"
  veil: "rgba(0, 0, 0, 0.2)"
  scrim: "rgba(0, 0, 0, 0.6)"
  search: "#333333"
  search-line: "#eeeeee"
  search-hover: "#f3f3f3"
  field: "#ebebeb"
  error: "#e5484d"
  primary: "{colors.accent}"
  on-primary: "{colors.white}"
  secondary: "{colors.ink}"
  on-secondary: "{colors.white}"
  neutral: "{colors.white}"
  surface: "{colors.white}"
  on-surface: "{colors.ink}"
  on-surface-variant: "{colors.body}"
  outline: "{colors.frame}"
typography:
  title:
    fontFamily: "Noto Serif JP"
    fontSize: "28px"
    fontWeight: 700
    lineHeight: 1.4
  h3:
    fontFamily: "Noto Serif JP"
    fontSize: "22px"
    fontWeight: 700
    lineHeight: 1.4
  h4:
    fontFamily: "Noto Serif JP"
    fontSize: "18px"
    fontWeight: 600
    lineHeight: 1.4
  card-xl:
    fontFamily: "Noto Serif JP"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: 1.4
  card-lg:
    fontFamily: "Noto Serif JP"
    fontSize: "18px"
    fontWeight: 600
    lineHeight: 1.4
  card-md:
    fontFamily: "Noto Serif JP"
    fontSize: "16px"
    fontWeight: 600
    lineHeight: 1.4
  card-sm:
    fontFamily: "Noto Serif JP"
    fontSize: "14px"
    fontWeight: 600
    lineHeight: 1.4
  nav:
    fontFamily: "Noto Serif JP"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.4
  section-title:
    fontFamily: "Poppins"
    fontSize: "18px"
    fontWeight: 700
    lineHeight: 1.2
  paragraph:
    fontFamily: "Poppins"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.2
  body:
    fontFamily: "Poppins"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.4
  small:
    fontFamily: "Poppins"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.2
  meta:
    fontFamily: "Poppins"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.2
  tiny:
    fontFamily: "Poppins"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.2
rounded:
  pill: "9999px"
  field: "8px"
  dialog: "16px"
  dot: "10px"
spacing:
  gutter: "40px"
  gutter-phone: "20px"
  gutter-tablet: "30px"
  content-max: "1220px"
  header-height: "96px"
  header-height-phone: "92px"
  header-height-tablet: "92px"
  sidebar: "30%"
  column: "30px"
  block: "40px"
components:
  menu-link:
    textColor: "{colors.ink}"
    typography: "{typography.nav}"
  menu-link-hover:
    textColor: "{colors.accent}"
  menu-link-current:
    textColor: "{colors.grey}"
  search-button:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.nav}"
    rounded: "{rounded.pill}"
    padding: "8px 20px"
    height: "36px"
  search-button-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
  pill-button:
    backgroundColor: "{colors.white}"
    textColor: "{colors.grey}"
    typography: "{typography.tiny}"
    rounded: "{rounded.pill}"
    padding: "8px 24px"
  pill-button-hover:
    textColor: "{colors.accent}"
  section-title:
    textColor: "{colors.ink}"
    typography: "{typography.section-title}"
    height: "22px"
  category-label:
    textColor: "{colors.accent}"
    typography: "{typography.meta}"
  post-meta:
    textColor: "{colors.grey}"
    typography: "{typography.meta}"
  post-card-lead:
    textColor: "{colors.ink}"
    typography: "{typography.card-xl}"
  post-card-row:
    textColor: "{colors.ink}"
    typography: "{typography.card-md}"
    width: "150px"
    height: "150px"
  post-card-mini:
    textColor: "{colors.ink}"
    typography: "{typography.card-sm}"
    width: "80px"
    height: "80px"
  widget:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.paragraph}"
    padding: "20px"
  newsletter-field:
    backgroundColor: "{colors.white}"
    textColor: "{colors.navy}"
    typography: "{typography.small}"
    rounded: "{rounded.field}"
    padding: "0px 15px"
    height: "51px"
  newsletter-field-focus:
    textColor: "{colors.navy}"
  newsletter-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.small}"
    rounded: "{rounded.field}"
    height: "44px"
  search-dialog:
    backgroundColor: "{colors.white}"
    textColor: "{colors.search}"
    rounded: "{rounded.dialog}"
    width: "500px"
---

# Denzel Design System

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

Denzel is a website template for blogs and magazines: a home page of picked, trending and latest stories, a page listing every post, a page for each category, each author and each post, site-wide search and a newsletter box. It should feel like a printed magazine: calm, editorial and dense, with many stories on one page held apart by thin black rules rather than by boxes or colour.

The look is built from very few parts. The page is White, with no coloured bands: the only colour blocks are photos. Titles and the menu are Ink (#1c2522); excerpts and the post text are Body (#707a88), the meta under every card (author, date) is Grey (#999999) in small capitals, and the one accent, Accent (#e38836), marks every category label and every hover of a link, button or icon. Blocks are separated by a Black 1px divider with 30 below it; the sidebar widgets sit in boxes with a 1px Frame hairline.

Two fonts carry it: Noto Serif JP for page titles, card titles, the headings of the post text and the menu (weights 500 to 700), and Poppins for section titles, text, meta, buttons and fields. Both at normal letter spacing; titles at a 1.4 line height, the short sans-serif texts at 1.2. Motion is limited to a few springs: card photos that settle from 110% to 100% on hover, a slider that steps one card to the left every 5 s, a veil that clears from the slider's photos, and a menu that opens with a spring. Nothing appears on scroll and nothing counts up.

## Colors

- **Ink (#1c2522)** — `ink`, `secondary`, `on-surface`. Ink: headings, post titles, the menu, the footer text, the search button's hairline and its hover fill, the social icons.
- **Body (#707a88)** — `body`, `on-surface-variant`. Body: excerpts, page descriptions, post text, the breadcrumb's separators and current page.
- **Grey (#999999)** — `grey`. Grey: meta (author, date, dots), View All, the breadcrumb links of the post and author pages, the current menu link.
- **Accent (#e38836)** — `accent`, `primary`. Accent: category labels on the cards; the hover colour of menu links, View All, the pill button and the social icons.
- **Navy (#203656)** — `navy`. Navy: the breadcrumb links of a category page, the author page's social icons, typed newsletter text and the focused field's hairline.
- **Pink (#fe4f70)** — `pink`. Pink: the category page's breadcrumb links on hover (used nowhere else).
- **White (#ffffff)** — `white`, `on-primary`, `on-secondary`, `neutral`, `surface`. White: the page, the header bar, the search dialog, text on the Ink button.
- **Black (#000000)** — `black`. Black: the 1px dividers between the blocks of a column and above every sidebar widget and footer column.
- **Rule (rgba(0, 0, 0, 0.2))** — `rule`. Rule: the 1px dividers inside the sidebar widgets.
- **Frame (#999999)** — `frame`, `outline`. Frame: the 1px hairline around the sidebar widgets and the pill button.
- **Veil (rgba(0, 0, 0, 0.2))** — `veil`. Veil: the dark cover over the slider's photos, cleared on hover.
- **Scrim (rgba(0, 0, 0, 0.6))** — `scrim`. Scrim: behind the search dialog.
- **Search (#333333)** — `search`. Search: the search dialog's typed text and result titles.
- **Search line (#eeeeee)** — `search-line`. Search Line: the line between the search field and the results.
- **Search hover (#f3f3f3)** — `search-hover`. Search Hover: the highlighted search result.
- **Field (#ebebeb)** — `field`. Field: the 1px hairline of the newsletter field at rest.
- **Error (#e5484d)** — `error`. Error: a form message after a failed send.

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

## Typography

**Poppins, sans-serif.** Poppins from Google Fonts (weights 400, 600 and 700 in use): section titles, paragraphs, post text, meta, breadcrumbs, buttons and fields.

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 |
|---|---|---|---|---|---|
| `title` | 28px | 1.4 | 700 | — | Title (Noto Serif JP): the h1 of the category, author, post and 404 pages |
| `h3` | 22px | 1.4 | 700 | — | Heading 3 (Noto Serif JP): the larger headings of the post text |
| `h4` | 18px | 1.4 | 600 | — | Heading 4 (Noto Serif JP): the smaller headings of the post text; bold runs inside it are weight 900 |
| `card-xl` | 24px | 1.4 | 600 | — | Card XL (Noto Serif JP): the large Editor's Pick title |
| `card-lg` | 18px | 1.4 | 600 | — | Card L (Noto Serif JP): the large Trending titles |
| `card-md` | 16px | 1.4 | 600 | — | Card M (Noto Serif JP): grid card and row titles (Editor's Pick, Latest, the lists, Related Posts) |
| `card-sm` | 14px | 1.4 | 600 | — | Card S (Noto Serif JP): the small titles beside an 80px or 60px photo (slider, Trending, Recent, footer) |
| `nav` | 14px | 1.4 | 500 | — | Nav (Noto Serif JP): the menu links and the Search All label |
| `section-title` | 18px | 1.2 | 700 | — | Section Title: the name of a block (Editor's Pick, Recent, Related Posts, Newsletter) |
| `paragraph` | 16px | 1.2 | 400 | — | Paragraph: page descriptions, the author bio, the sidebar and footer text |
| `body` | 16px | 1.4 | 400 | — | Body: the post text (paragraphs and list items); bold runs weight 700 |
| `small` | 14px | 1.2 | 400 | — | Small: excerpts, breadcrumbs, the post page's author and date (upper case there), the newsletter field and note |
| `meta` | 12px | 1.2 | 400 | —, upper case | Meta: category labels, author names and dates on the cards; the topic names (weight 600) |
| `tiny` | 12px | 1.2 | 400 | — | Tiny: View All, View More, the topic counts |

## 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` | 20px / 30px / 40px | Side padding of every section, the header and the footer |
| `content-max` | 1220px | Maximum content width: the content stops growing here and is centred (1120 wide at 1200, 1220 from 1300 up) |
| `header-height` | 92px / 92px / 96px | The fixed header bar; every page starts below a spacer of this height |
| `sidebar` | 30% | From 1200 up the sidebar takes 30 % of the content width (336 at 1200), 50 from the main column; below 1200 it follows the main column, 40 below it |
| `column` | 30px | Gap between a divider and the block under it and between the blocks of the main column on Home, the lists and the sidebar |
| `block` | 40px | Gap between the blocks of the post page's main column (divider, article, Related Posts, More Articles) |

Every section is centred, at most `content-max` wide inside the `gutter` on each side. Home, the category, author and post pages put a main column beside a sidebar from 1200 up: the sidebar takes `sidebar` (30%) of the width, 50 from the main column; below 1200 the sidebar follows the main column, 40 below it. Inside both, blocks are `column` (30) apart, each opened by a Black divider (the post page's main column: `block`, 40). Grids of cards are 20 or 30 apart; a list of posts is one row per post, the photo (150 × 150) on the right from tablets up and full width on phones.

Every page starts below a white header bar of `header-height`, fixed to the top; it never changes with the scroll. On tablets and phones the menu opens under the logo inside the bar. Every page ends with the white footer: three columns (about, two picked posts, the newsletter) over the copyright line.

## Elevation & Depth

Denzel is flat: the only shadow is the search dialog's (`dialog`), over a Scrim at 60% black. Depth comes from rules and hairlines: Black 1px dividers between blocks, Rule (20% black) dividers inside a widget, a Frame hairline drawn inside the widgets and the pill button, and a Veil (20% black) over the slider's photos that clears on hover.

- **`dialog`:** `box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.2)`. The search dialog's soft shadow.

## Shapes

Photos, cards and widgets have square corners. Round shapes are reserved for the pill button, the search button, author photos and the topics' and recent posts' photos (`pill`); the newsletter field and its button have 8px corners (`field`) and the search dialog 16px (`dialog`).

- **`pill` (9999px):** The pill button, the Search All button, round photos (author, Recent, topics, meta avatars).
- **`field` (8px):** The newsletter field and its Sign Up button.
- **`dialog` (16px):** The search dialog.
- **`dot` (10px):** The meta dots (round).

## Motion

Reduced motion: the slider stands still, the photos do not zoom, and the menu and the search dialog open without movement; colour changes still animate.

- **`spring`** — spring (stiffness 500, damping 60, mass 1). The card photos (110 % to 100 % on hover, 105 % to 100 % for the round Recent photos) and the phone and tablet menu opening; never overshoots, settles in about 0.7 s. As a CSS curve: linear(0, 0.096, 0.257, 0.409, 0.535, 0.636, 0.715, 0.777, 0.826, 0.864, 0.893, 0.917, 0.935, 0.949, 0.96, 0.969, 0.976, 0.981, 0.985, 0.988, 0.991, 0.993, 0.994, 0.996, 0.997, 0.997, 0.998, 0.998, 0.999, 1) over 714ms.
- **`spring-soft`** — spring (stiffness 300, damping 30, mass 1). The slider's photo veil (20 % black) clearing on hover.
- **`slide`** — spring (stiffness 200, damping 40, mass 1). The slider's step one card to the left, every 5 s, looping.
- **`slide-interval`** — every 5s. Time between two slider steps; the slider stays still with reduced motion.

## Components

Component tokens below use the exact values of the template. Variants with a suffix (`-hover`, `-current`, `-focus`) only list what changes. Every card title is a link that underlines on hover; every category label is an Accent link.

- **`menu-link`** (Menu link). A header link in Noto Serif JP, 30 apart on one line; 19.6 tall.
- **`menu-link-hover`** (Menu link). Accent and underlined.
- **`menu-link-current`** (Menu link). The page shown: Grey and struck through, no hover.
- **`search-button`** (Search button). "Search All" with a 16 magnifier, 10 apart, inside a 1px Ink hairline; a 32 × 32 round button on tablets and phones.
- **`search-button-hover`** (Search button). Filled Ink, the label and the glass White.
- **`pill-button`** (Pill button). "View More", "Return to Homepage": a 1px Frame hairline drawn inside, the label in capitals.
- **`pill-button-hover`** (Pill button). The label and the hairline turn Accent.
- **`section-title`** (Section title). A block's name (an h2) with a Grey "View All" link (`tiny`) on the right that turns Accent on hover.
- **`category-label`** (Post card). The category over a card's title, in capitals, underlined on hover.
- **`post-meta`** (Post meta). Author (a link, with a round 32 photo when shown), three stacked 2 × 2 dots, the date, 8 apart, in capitals; the post page's large meta uses `small` with a 42 photo.
- **`post-card-lead`** (Post card). Editor's Pick's large story: a full-width photo (477 : 430), then 20 below the category, the title and the meta with a photo, 10 apart.
- **`post-card-row`** (Post card). A list row: category, title and excerpt (`small`, Body) beside a 150 × 150 photo on the right from tablets up; a square full-width photo over the text on phones.
- **`post-card-mini`** (Post card). An 80 × 80 photo, 10 before the title and the date (Trending's small stories, the footer, the slider with the Veil over the photo).
- **`widget`** (Widget). A sidebar box under a Black divider (30 above), with a 1px Frame hairline drawn inside and a soft Rule divider under its title; the About widget sits on the dotted world map.
- **`newsletter-field`** (Newsletter form). A 1px Field hairline drawn inside, a Body placeholder.
- **`newsletter-field-focus`** (Newsletter form). The hairline turns Navy.
- **`newsletter-button`** (Newsletter form). "Sign Up", full width, 8 under the field; "..." while sending, then the success or error text in the button.
- **`search-dialog`** (Search dialog). Over a Scrim (60% black) with the `dialog` shadow; a field row, then results (title over its path) under a Search Line, the highlighted one on Search Hover. On phones a square bar across the top.

Other components of the template, described in its spec: Section, Divider, Layout with sidebar, Breadcrumbs, Logo, Menu icon (tablet and phone), Social icons, Icon, Post photo, Post slider, Rich text, About widget, Recent widget, Topics widget, Current year.

## Do's and Don'ts

- Do keep every section White and separate blocks with a Black 1px divider and 30 of space; let photos be the only colour blocks.
- Do set page and card titles, the post text's headings and the menu in Noto Serif JP, and everything else (section titles, text, meta, buttons, fields) in Poppins.
- Do use Accent for category labels and for the hover of links, buttons and icons; Ink for titles, Body for excerpts and post text, Grey in small capitals for the meta.
- Do give every card photo the hover settle from 110% to 100% (105% for the small round photos) with the stiff spring, and underline titles on hover.
- Do keep photos square-cornered; only author, topic and recent photos are round.
- Do show the current page's menu link Grey and struck through.
- Don't add a background colour band, a gradient or a card shadow; the search dialog is the only thing that floats.
- Don't put text in the Accent colour other than category labels and hovers, or use Pink anywhere but the category page's breadcrumb hover.
- Don't round photos, cards or widgets, or round the newsletter field and button more than 8px.
- Don't animate anything on scroll or count numbers up: the motion is hover, the slider, the menu and the dialog.
- Don't set long text in the serif or titles in Poppins.

## Source

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

Demo photos (Unsplash, Pexels or made for the template) are placeholders and not part of the design system; the dotted world map behind the About widget is part of the template.

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