---
version: "alpha"
name: "Framebrick Blocks — Mono"
description: "Mono, a sample theme of Framebrick Blocks: cool grays, electric blue, monospaced headings, square corners and dense spacing."
colors:
  background: "#F9FAFB"
  foreground: "#12171B"
  card: "#FFFFFF"
  card-foreground: "#12171B"
  popover: "#FFFFFF"
  popover-foreground: "#12171B"
  primary: "#2258E5"
  primary-foreground: "#FAFAFA"
  secondary: "#EBEFF2"
  secondary-foreground: "#12171B"
  muted: "#EEF0F3"
  muted-foreground: "#5D646C"
  accent: "#E4EBF9"
  accent-foreground: "#0D2769"
  destructive: "#E7000B"
  border: "#D8DBDF"
  input: "#D8DBDF"
  ring: "#2258E5"
  background-dark: "#0B0E11"
  foreground-dark: "#F0F2F4"
  card-dark: "#13161A"
  card-foreground-dark: "#F0F2F4"
  popover-dark: "#13161A"
  popover-foreground-dark: "#F0F2F4"
  primary-dark: "#59A6FF"
  primary-foreground-dark: "#0B0E11"
  secondary-dark: "#1E2226"
  secondary-foreground-dark: "#F0F2F4"
  muted-dark: "#1C2024"
  muted-foreground-dark: "#989FA7"
  accent-dark: "#1B2942"
  accent-foreground-dark: "#C8E0FF"
  destructive-dark: "#FF6467"
  border-dark: "rgba(255, 255, 255, 0.12)"
  input-dark: "rgba(255, 255, 255, 0.16)"
  ring-dark: "#59A6FF"
  on-primary: "{colors.primary-foreground}"
  on-secondary: "{colors.secondary-foreground}"
  surface: "{colors.card}"
  on-surface: "{colors.card-foreground}"
  on-surface-variant: "{colors.muted-foreground}"
  neutral: "{colors.background}"
  outline: "{colors.border}"
  error: "{colors.destructive}"
typography:
  display:
    fontFamily: "Geist Mono"
    fontSize: "60px"
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  h1:
    fontFamily: "Geist Mono"
    fontSize: "48px"
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.025em"
  h2:
    fontFamily: "Geist Mono"
    fontSize: "36px"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.025em"
  h3:
    fontFamily: "Geist Mono"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: "-0.025em"
  lead:
    fontFamily: "Geist"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.6
  body:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
  small:
    fontFamily: "Geist"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.43
  label:
    fontFamily: "Geist"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.43
  caption:
    fontFamily: "Geist"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.33
rounded:
  sm: "0px"
  md: "0px"
  lg: "0px"
  xl: "0px"
  full: "9999px"
spacing:
  section-y: "88px"
  section-y-phone: "48px"
  gutter: "32px"
  gutter-phone: "16px"
  container: "1216px"
components:
  button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "36px"
  button-small:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "0px 12px"
    height: "32px"
  button-large:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "0px 24px"
    height: "40px"
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "36px"
  button-outline-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "36px"
  card:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.xl}"
    padding: "20px"
  card-raised:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.xl}"
    padding: "20px"
  chip:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: "4px 8px"
  icon-square:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    size: "36px"
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: "4px 10px"
    height: "32px"
  tint:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    rounded: "{rounded.lg}"
---

# Framebrick Blocks — Mono

> The design tokens and style rules of this project's theme, made with Framebrick Blocks (https://framebrick.co/blocks): shadcn/ui and Tailwind CSS v4 sections that read their look from `app/globals.css`. Read it before you build or change a page, so new work matches the sections already here. 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

Mono, a sample theme of Framebrick Blocks: cool grays, electric blue, monospaced headings, square corners and dense spacing.

Every colour, size and corner is a CSS variable in `app/globals.css` — the shadcn/ui variables (`--background`, `--primary`, `--muted-foreground`…), `--radius`, and the Framebrick block tokens (`--text-display`, `--text-h1`, `--text-h2`, `--text-h3`, `--text-lead`, `--section-y`, `--gutter`, `--container`). Use them through Tailwind's classes (`bg-primary`, `text-muted-foreground`, `rounded-xl`, `text-h2`, `py-(--section-y)`, `px-(--gutter)`, `max-w-(--container)`), never as literal values: the theme can then change in one file, and dark mode follows the `.dark` class.

## Colors

Token names are the shadcn variables, so `bg-<name>` and `text-<name>` are the classes to write. Light mode is the token set; `-dark` tokens are the same variable under `.dark`.

| Token | Light | Dark | Use |
|---|---|---|---|
| `background` | #F9FAFB | #0B0E11 | The page and every section that has no tone of its own. |
| `foreground` | #12171B | #F0F2F4 | Text on the page: headings, body text, icons. |
| `card` | #FFFFFF | #13161A | Cards that stand apart from a muted band: testimonial and story cards. |
| `card-foreground` | #12171B | #F0F2F4 | Text on a card. |
| `popover` | #FFFFFF | #13161A | Menus and dialogs. |
| `popover-foreground` | #12171B | #F0F2F4 | Text in a menu or dialog. |
| `primary` | #2258E5 | #59A6FF | The accent: filled buttons, the chosen tab, a progress bar, the current item, icon squares. |
| `primary-foreground` | #FAFAFA | #0B0E11 | Text and icons on primary. |
| `secondary` | #EBEFF2 | #1E2226 | Secondary buttons and quiet fills. |
| `secondary-foreground` | #12171B | #F0F2F4 | Text on secondary. |
| `muted` | #EEF0F3 | #1C2024 | Cards, chips and panels inside a section (the blocks' most common surface). |
| `muted-foreground` | #5D646C | #989FA7 | Secondary text on the page and on cards: leads, descriptions, meta, labels. |
| `accent` | #E4EBF9 | #1B2942 | Hover fills of ghost and outline buttons and menu items; a tint of the primary colour. |
| `accent-foreground` | #0D2769 | #C8E0FF | Text on accent. |
| `destructive` | #E7000B | #FF6467 | Errors: a failed form send, a required field's mark. |
| `border` | #D8DBDF | rgba(255, 255, 255, 0.12) | Hairlines between rows, card and field borders, dividers. |
| `input` | #D8DBDF | rgba(255, 255, 255, 0.16) | Form field borders. |
| `ring` | #2258E5 | #59A6FF | Focus rings. |

Semantic names in the front matter point at these: `on-primary` → `primary-foreground`, `on-secondary` → `secondary-foreground`, `surface` → `card`, `on-surface` → `card-foreground`, `on-surface-variant` → `muted-foreground`, `neutral` → `background`, `outline` → `border`, `error` → `destructive`.

## Typography

**Geist Mono** for headings (`font-heading`), **Geist** for everything else (`font-sans`), both loaded with `next/font` in `app/layout.tsx`.

The heading sizes are fluid (`clamp()`): they grow with the window from the phone size to the desktop size, which the front matter gives. Headings are `font-heading font-semibold tracking-tight` with `text-balance`; body text wraps with `text-pretty`.

| Token | Size (phone → desktop) | Line height | Weight | Class | Use |
|---|---|---|---|---|---|
| `display` | 34px → 60px | 1.05 | 600 | `text-display` | The largest heading: a hero's title (`text-display`). |
| `h1` | 30px → 48px | 1.1 | 600 | `text-h1` | A page's title (`text-h1`), and the big figures. |
| `h2` | 24px → 36px | 1.15 | 600 | `text-h2` | A section's title (`text-h2`), the h2 of every block. |
| `h3` | 18px → 20px | 1.3 | 600 | `text-h3` | Card, row and panel titles; a lead set large (`text-h3`). |
| `lead` | 16px → 18px | 1.6 | 400 | `text-lead` | The text under a hero's or a section's title (`text-lead`). |
| `body` | 16px | 1.5 | 400 | `text-base` | Paragraphs, list items, form fields. |
| `small` | 14px | 1.43 | 400 | `text-sm` | Card text, meta, captions under photos, footer links. |
| `label` | 14px | 1.43 | 500 | `text-sm font-medium` | Button labels, labels above headings, form labels, menu links. |
| `caption` | 12px | 1.33 | 400 | `text-xs` | Chips, tags, the smallest notes. |

## Layout

Every section is a full-width `<section>` that sets its own vertical padding and container, so sections stack in any order with no margin between them:

```html
<section class="py-(--section-y)">
  <div class="mx-auto max-w-(--container) px-(--gutter)">…</div>
</section>
```

| Token | Phone → desktop | Use |
|---|---|---|
| `section-y` | 48px → 88px | Vertical padding of every section (`py-(--section-y)`); a tight band uses half. |
| `gutter` | 16px → 32px | Side padding of every section, the header and the footer (`px-(--gutter)`). |
| `container` | 1216px | The widest content, centred (`mx-auto max-w-(--container)`). |

Breakpoints are Tailwind's: `md` from 768px and `lg` from 1024px. Grids go from one column on phones to two from 768px and three or four from 1024px; parts of a section sit 24–48px apart (`gap-6` to `gap-12`), cards in a grid 10–32px apart.

## Elevation & Depth

The theme is flat. Depth comes from fills, not shadows: `muted` cards on the `background` page, `card` for a raised surface, `primary` for the one thing to act on, a dark tone (`.dark` on a section) for a band that stands apart, and photos under a black cover (50–75%) wherever white text sits on them. The only shadows are shadcn's on outlined buttons (`shadow-xs`) and on menus and dialogs.

## Shapes

Corners come from `--radius` (0px): `rounded-sm` 0px, `rounded-md` 0px, `rounded-lg` 0px, `rounded-xl` 0px; `rounded-full` for avatars, dots and round icon buttons.

- **`md`:** buttons, chips, tags, icon squares.
- **`lg`:** form fields, small panels, photos inside a card.
- **`xl`:** cards, photos, video frames, the panels of a section.
- **`full`:** portraits, round arrow buttons, dots, the play button.

## Motion

The motion is in the Framebrick UI components the blocks use (`components/ui/`: Spring, Flip and Sweep Button, Scroll Reveal, Text Appear, Marquee, Slideshow, the accordions…), measured from the templates they come from. Use them as they are:

- Don't change a component's springs, durations or easings; choose what its props offer (`trigger`, `delay`, `amount`, `spring` on Scroll Reveal; `speed` and `pauseOnHover` on Marquee; `interval` on Slideshow).
- A block rises into view once (Scroll Reveal, `trigger="enter"`); headings rise word by word (Text Appear). Don't animate on every scroll, and don't add motion of your own to a block that has none.
- A filled button or chip hovers to 95% of its fill (`hover:bg-primary/95`), never a lighter step: the label must keep 4.5:1 on it in every theme, so check a coloured theme, not only the default.
- Respect reduced motion: the components already stop or settle at once when `prefers-reduced-motion` is set; anything new must do the same.

## Components

Component tokens use the exact sizes of the blocks' own parts. A suffix (`-hover`) lists only what changes.

- **`button`** — a filled button (Framebrick UI's Spring, Flip or Sweep Button, shadcn's Button): `bg-primary text-primary-foreground`, `h-9 px-4`, `rounded-md`, `text-sm font-medium`. Its hover fades the fill to 95% (`hover:bg-primary/95`); the label rolls or the arrow turns, the colours stay.
- **`button-small`** / **`button-large`** — `h-8 px-3` and `h-10 px-6`, the same colours.
- **`button-outline`** — the second button beside a filled one: `border bg-background`, `shadow-xs`; its hover takes `accent` (**`button-outline-hover`**).
- **`button-secondary`** — a quiet button on a coloured band.
- **`card`** — the blocks' usual card: `rounded-xl bg-muted p-5` (20px), secondary text in `text-foreground/65` (65% of the foreground reads better than `muted-foreground` on `muted`).
- **`card-raised`** — a card that stands out from a muted band: `bg-card` with a 1px `ring-border`.
- **`chip`** — a small label on a card or a photo: `rounded-md bg-muted px-2 py-1 text-xs`.
- **`icon-square`** — a 36px `primary` square holding a 20px line icon in `primary-foreground`.
- **`input`** — shadcn's Input: `h-8 rounded-lg border border-input bg-transparent px-2.5`, 16px text (14px from 768px); focus draws a 3px `ring` at 50%.
- **`tint`** — a soft panel in the primary colour's tint: `bg-accent text-accent-foreground`.

## Do's and Don'ts

- Do use the theme's variables through their classes (`bg-primary`, `text-muted-foreground`, `rounded-xl`, `text-h2`); never write a colour, a font size or a radius as a literal value.
- Do give a new section `py-(--section-y)` and a `mx-auto max-w-(--container) px-(--gutter)` container, and no outer margin.
- Do give each section one `h2` (the page has one `h1`, in its hero), and set headings in `font-heading font-semibold tracking-tight`.
- Do keep `primary` for what the visitor should act on: one filled button per group, the second one outlined.
- Do use `text-foreground/65` for secondary text on `muted`, `text-muted-foreground` on `background` and `card`.
- Do check both modes: every colour has a `.dark` value, and a section can take `.dark` on its own.
- Don't add shadows, gradients or colours of your own; the palette above is the whole palette.
- Don't put type-scale classes (`text-h2`) and a text colour in the same `cn()` call: tailwind-merge reads both as colours and drops one. Keep the type classes in a plain string.
- Don't mix fonts beyond the ones named above.

## Source

The Mono sample theme of Framebrick Blocks (https://framebrick.co/blocks, any block's preview with ?theme=mono), generated from its CSS variables: shadcn/ui's defaults and the block tokens of the blocks' own stylesheet, with the theme's values over them. Body text is Geist in every sample theme.