---
title: Looks
description: Four complete stylesheets, each a whole look, ready to start a re-skin
  from.
sidebar:
  order: 16
---

Four complete stylesheets, each a whole look, ready to start a re-skin from. Served over MCP as `vizitka://docs/looks`, and by `describe_vocabulary` with `topic=looks`.

## claret

```css
/* "Claret" — Warm paper, a serif that means it, and a wine-dark call to action.

   A whole site's stylesheet: the fonts it loads, the tokens its utilities
   read, the component classes its markup wears, and the base rules under
   everything. Copied onto a site once; after that the site's own copy is
   the only one that matters. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

@theme {
  --color-surface: #f4efe6;
  --color-ink: #3d3833;
  --color-body: #6e665e;
  --color-muted: #8a7058;
  --color-accent: #520c0a;
  --color-accent-deep: #3d0807;
  --color-faint: #c9b79c;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-weight-strong: 700;
  --color-cta: #520c0a;
  --color-cta-hover: #6e1612;
  --color-on-cta: #fbf8f2;
  --color-cta-strong: #241c15;
  --color-cta-strong-hover: #4a372a;
  --color-on-cta-strong: #f1e9dc;
  --color-raised: #fbf8f2;
  --text-display: 42px;
  --text-display--line-height: 1.04;
  --text-display--letter-spacing: -0.015em;
  --text-display-lg: 68px;
  --text-display-lg--line-height: 1.02;
  --text-display-lg--letter-spacing: -0.02em;
  --text-title: 40px;
  --text-title--letter-spacing: -0.015em;
  --text-subtitle: 22px;
  --text-subtitle--line-height: 1.25;
  --text-subtitle--letter-spacing: -0.01em;
  --text-lead: 16px;
  --text-lead--line-height: 26px;
  --text-lead-lg: 18px;
  --text-lead-lg--line-height: 30px;
  --text-eyebrow: 11px;
  --text-eyebrow--line-height: 16px;
  --text-eyebrow-lg: 12px;
  --text-eyebrow-lg--line-height: 16px;
  --tracking-eyebrow: 0.14em;
  --text-control: 15px;
  --tracking-control: 0.01em;
  --text-control-sm: 13px;
  --text-control-sm--line-height: 16px;
  --tracking-control-sm: 0.02em;
  --radius-control: 9999px;
  --radius-surface: 14px;
  --container-page: 1280px;
  --container-headline: 860px;
  --container-lead: 380px;
  --container-lead-lg: 520px;
  --spacing-gutter: 20px;
  --spacing-gutter-lg: 56px;
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;
  --spacing-bar: 16px;
  --spacing-bar-lg: 22px;
  --spacing-mark: 34px;
  --spacing-dot: 11px;
  --text-brand: 18px;
  --text-brand-lg: 20px;
  --spacing-tile: 170px;
  --spacing-tile-lg: 260px;
  --image-slot: repeating-linear-gradient(45deg,#ece3d3,#ece3d3 8px,#f4efe6 8px,#f4efe6 16px);
  --spacing-band-top: 56px;
  --spacing-band-top-lg: 104px;
  --spacing-band-bottom: 40px;
  --spacing-band-bottom-lg: 80px;
  --spacing-eyebrow-gap: 10px;
  --spacing-eyebrow-gap-lg: 14px;
  --spacing-heading-gap: 14px;
  --spacing-heading-gap-lg: 20px;
  --spacing-lead-gap: 20px;
  --spacing-lead-gap-lg: 32px;
}

/* The page-level call to action. With an `href` it belongs on an `<a>`,
   without one on a `<button>` — an action nothing is wired to yet is not a
   link to nowhere. */
@utility btn-primary {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-cta text-on-cta text-control tracking-control
         px-[30px] py-[15px] hover:bg-cta-hover;
}

/* The small high-contrast action in a bar. Small controls belong to the
   register a look may shout, so the case var rides along. */
@utility btn-compact {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-cta-strong text-on-cta-strong text-control-sm
         tracking-control-sm px-[22px] py-[11px] hover:bg-cta-strong-hover
         [text-transform:none];
}

/* Quiet and bordered, for a row of them. */
@utility btn-outline {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-transparent text-ink border border-ink/25
         text-control-sm tracking-control-sm px-5 py-[11px] whitespace-nowrap
         hover:bg-ink hover:text-surface hover:border-ink
         [text-transform:none];
}

/* Full width, for the bottom of a phone screen. */
@utility btn-block {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors w-full bg-cta-strong text-on-cta-strong
         text-control-sm tracking-control-sm p-4
         [text-transform:none];
}

/* For sitting on a loud surface, where the usual cta colour would vanish.
   A sentence, not a label, so it never takes the shouted case. */
@utility btn-inverse {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-raised text-ink text-control tracking-control
         px-8 py-[15px];
}

/* The emphasised link beside a button. Underlined, ruled, or neither — it
   reads that as vars, so the published look decides and the markup never
   learns which: the rule is a border whose width is `0px` under a look that
   does not want one. A bare `<a>` needs no class at all; the layout's
   `@layer base` already styles the house link. */
@utility link-underline {
  @apply text-control tracking-control font-medium
         [text-decoration-line:underline] [color:var(--color-accent)]
         hover:[color:var(--color-accent-deep)]
         [border-bottom-width:0px] border-ink/30 pb-0.5;
}

/* The small-caps register a navigation row is made of, and the one register
   a look may shout. */
@utility link-quiet {
  @apply no-underline text-body font-medium text-control-sm tracking-control-sm
         [text-transform:none];
}

/* The frame a picture fills. Ratio and clipping only: corners, borders and
   widths are the page's own classes beside it, one per property. `min-w-0`
   is what stops a picture in a flex row from refusing to shrink and pushing
   everything beside it out of the page. The `<img>` inside wears
   `size-full object-cover`, which makes cropping the frame's business and
   never the file's. */
@utility frame {
  @apply overflow-hidden min-w-0;
}

/* The placeholder filling a frame while the page waits for a picture. The
   fill is paint: one declaration reading the theme's own custom property, so
   a look changes the treatment without a recipe. */
@utility frame-empty {
  @apply w-full h-full rounded-[3px] bg-[image:var(--image-slot)] flex
         items-center justify-center;
}

/* The small label register above a heading. Colour is the page's own class
   beside it — an eyebrow speaks on quiet and loud surfaces alike. */
@utility eyebrow {
  @apply text-eyebrow md:text-eyebrow-lg tracking-eyebrow font-semibold
         [text-transform:uppercase];
}

@keyframes disk-image-shimmer {
  0% { background-position: 200% 0; }
  50%, 100% { background-position: -200% 0; }
}

/* A post's own markup, dressed. `{markdown(post.body)}` writes plain h2,
   p, a, ul and img with no classes on any of them, so what an article looks
   like is decided here, out of the site's own tokens, and a stored post
   carries no classes of its own. One class per property inside, the rule the
   components above keep. */
@utility article {
  @apply flow-root min-w-0 break-words;

  & h1 { @apply font-heading font-strong text-title text-ink mt-2xl mb-md; }
  & h2 { @apply font-heading font-strong text-subtitle text-ink mt-xl mb-sm; }
  & h3 { @apply font-heading font-strong text-lead-lg text-ink mt-lg mb-2xs; }
  & h4 { @apply font-heading font-strong text-lead text-ink mt-lg mb-2xs; }
  & p { @apply text-lead md:text-lead-lg text-body mb-md; }
  & a { @apply underline text-accent [text-underline-offset:4px]; }
  & strong { @apply font-strong text-ink; }
  & em { @apply italic; }
  & ul { @apply list-disc pl-lg mb-md text-lead md:text-lead-lg text-body; }
  & ol { @apply list-decimal pl-lg mb-md text-lead md:text-lead-lg text-body; }
  & li { @apply mb-2xs; }
  & blockquote { @apply pl-lg my-xl border-l-2 border-faint font-heading text-subtitle text-ink; }
  & img { @apply w-full max-w-full h-auto my-xl rounded-surface; }
  & img[data-disk-image-state="loading"] {
    @apply text-transparent bg-no-repeat bg-[length:200%_100%]
           motion-safe:animate-[disk-image-shimmer_2s_linear_0.5s_infinite];
    background-color: color-mix(in srgb, var(--color-faint) 25%, var(--color-surface));
    background-image: linear-gradient(90deg, transparent 25%,
                                      color-mix(in srgb, var(--color-surface) 65%, transparent) 50%,
                                      transparent 75%);
  }
  & img[data-align="left"] { @apply float-left mr-lg; }
  & img[data-align="right"] { @apply float-right ml-lg; }
  & img[data-align="center"] { @apply mx-auto block; }
  & img[data-size="small"] { @apply w-1/4; }
  & img[data-size="medium"] { @apply w-1/2; }
  & img[data-size="large"] { @apply w-3/4; }
  & code { @apply font-mono text-[0.9em] text-accent; }
  & pre { @apply p-md my-xl overflow-x-auto bg-raised rounded-surface; }
  & hr { @apply my-2xl border-t border-muted/30; }
  & table { @apply w-full my-xl text-sm text-body; }
  & th { @apply py-2xs pr-md text-left font-strong text-ink border-b border-muted/40; }
  & td { @apply py-2xs pr-md align-top border-b border-muted/20; }
}

@layer base {
  html {
    background-color: var(--color-surface);
  }

  body {
    min-height: 100vh;
    color: var(--color-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
  }

  a:hover {
    color: var(--color-accent-deep);
  }
}
```

## cobalt

```css
/* "Cobalt" — Bright, blue and round-cornered — the marketing register.

   A whole site's stylesheet: the fonts it loads, the tokens its utilities
   read, the component classes its markup wears, and the base rules under
   everything. Copied onto a site once; after that the site's own copy is
   the only one that matters. */
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

@theme {
  --color-surface: #f1f3f5;
  --color-ink: #212529;
  --color-body: #495057;
  --color-muted: #6c757d;
  --color-accent: #0049ff;
  --color-accent-deep: #012b99;
  --color-faint: #adb5bd;
  --font-heading: 'Raleway', sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;
  --font-weight-strong: 600;
  --color-cta: #212529;
  --color-cta-hover: #212529;
  --color-on-cta: #ffffff;
  --color-cta-strong: #212529;
  --color-cta-strong-hover: #212529;
  --color-on-cta-strong: #ffffff;
  --color-raised: #ffffff;
  --text-display: 60px;
  --text-display--line-height: 1.02;
  --text-display--letter-spacing: -0.02em;
  --text-display-lg: 60px;
  --text-display-lg--line-height: 1.02;
  --text-display-lg--letter-spacing: -0.02em;
  --text-title: 40px;
  --text-title--letter-spacing: -0.01em;
  --text-subtitle: 24px;
  --text-subtitle--line-height: 32px;
  --text-subtitle--letter-spacing: 0em;
  --text-lead: 18px;
  --text-lead--line-height: 32px;
  --text-lead-lg: 18px;
  --text-lead-lg--line-height: 32px;
  --text-eyebrow: 14px;
  --text-eyebrow--line-height: 20px;
  --text-eyebrow-lg: 14px;
  --text-eyebrow-lg--line-height: 20px;
  --tracking-eyebrow: 0em;
  --text-control: 16px;
  --tracking-control: 0em;
  --text-control-sm: 14px;
  --text-control-sm--line-height: 20px;
  --tracking-control-sm: 0em;
  --radius-control: 9999px;
  --radius-surface: 12px;
  --container-page: 1280px;
  --container-headline: none;
  --container-lead: 520px;
  --container-lead-lg: 520px;
  --spacing-gutter: 40px;
  --spacing-gutter-lg: 40px;
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;
  --spacing-bar: 15px;
  --spacing-bar-lg: 15px;
  --spacing-mark: 28px;
  --spacing-dot: 12px;
  --text-brand: 18px;
  --text-brand-lg: 18px;
  --spacing-tile: 250px;
  --spacing-tile-lg: 250px;
  --image-slot: repeating-linear-gradient(45deg,#e3e6e9,#e3e6e9 8px,#eceef1 8px,#eceef1 16px);
  --spacing-band-top: 88px;
  --spacing-band-top-lg: 88px;
  --spacing-band-bottom: 64px;
  --spacing-band-bottom-lg: 64px;
  --spacing-eyebrow-gap: 16px;
  --spacing-eyebrow-gap-lg: 16px;
  --spacing-heading-gap: 20px;
  --spacing-heading-gap-lg: 20px;
  --spacing-lead-gap: 32px;
  --spacing-lead-gap-lg: 32px;
}

/* The page-level call to action. With an `href` it belongs on an `<a>`,
   without one on a `<button>` — an action nothing is wired to yet is not a
   link to nowhere. */
@utility btn-primary {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-cta text-on-cta text-control tracking-control
         px-[30px] py-[15px] hover:bg-cta-hover;
}

/* The small high-contrast action in a bar. Small controls belong to the
   register a look may shout, so the case var rides along. */
@utility btn-compact {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-cta-strong text-on-cta-strong text-control-sm
         tracking-control-sm px-[22px] py-[11px] hover:bg-cta-strong-hover
         [text-transform:none];
}

/* Quiet and bordered, for a row of them. */
@utility btn-outline {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-transparent text-ink border border-ink/25
         text-control-sm tracking-control-sm px-5 py-[11px] whitespace-nowrap
         hover:bg-ink hover:text-surface hover:border-ink
         [text-transform:none];
}

/* Full width, for the bottom of a phone screen. */
@utility btn-block {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors w-full bg-cta-strong text-on-cta-strong
         text-control-sm tracking-control-sm p-4
         [text-transform:none];
}

/* For sitting on a loud surface, where the usual cta colour would vanish.
   A sentence, not a label, so it never takes the shouted case. */
@utility btn-inverse {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-raised text-ink text-control tracking-control
         px-8 py-[15px];
}

/* The emphasised link beside a button. Underlined, ruled, or neither — it
   reads that as vars, so the published look decides and the markup never
   learns which: the rule is a border whose width is `0px` under a look that
   does not want one. A bare `<a>` needs no class at all; the layout's
   `@layer base` already styles the house link. */
@utility link-underline {
  @apply text-control tracking-control font-medium
         [text-decoration-line:underline] [color:var(--color-accent)]
         hover:[color:var(--color-accent-deep)]
         [border-bottom-width:0px] border-ink/30 pb-0.5;
}

/* The small-caps register a navigation row is made of, and the one register
   a look may shout. */
@utility link-quiet {
  @apply no-underline text-body font-medium text-control-sm tracking-control-sm
         [text-transform:none];
}

/* The frame a picture fills. Ratio and clipping only: corners, borders and
   widths are the page's own classes beside it, one per property. `min-w-0`
   is what stops a picture in a flex row from refusing to shrink and pushing
   everything beside it out of the page. The `<img>` inside wears
   `size-full object-cover`, which makes cropping the frame's business and
   never the file's. */
@utility frame {
  @apply overflow-hidden min-w-0;
}

/* The placeholder filling a frame while the page waits for a picture. The
   fill is paint: one declaration reading the theme's own custom property, so
   a look changes the treatment without a recipe. */
@utility frame-empty {
  @apply w-full h-full rounded-[3px] bg-[image:var(--image-slot)] flex
         items-center justify-center;
}

/* The small label register above a heading. Colour is the page's own class
   beside it — an eyebrow speaks on quiet and loud surfaces alike. */
@utility eyebrow {
  @apply text-eyebrow md:text-eyebrow-lg tracking-eyebrow font-semibold
         [text-transform:none];
}

@keyframes disk-image-shimmer {
  0% { background-position: 200% 0; }
  50%, 100% { background-position: -200% 0; }
}

/* A post's own markup, dressed. `{markdown(post.body)}` writes plain h2,
   p, a, ul and img with no classes on any of them, so what an article looks
   like is decided here, out of the site's own tokens, and a stored post
   carries no classes of its own. One class per property inside, the rule the
   components above keep. */
@utility article {
  @apply flow-root min-w-0 break-words;

  & h1 { @apply font-heading font-strong text-title text-ink mt-2xl mb-md; }
  & h2 { @apply font-heading font-strong text-subtitle text-ink mt-xl mb-sm; }
  & h3 { @apply font-heading font-strong text-lead-lg text-ink mt-lg mb-xs; }
  & h4 { @apply font-heading font-strong text-lead text-ink mt-lg mb-xs; }
  & p { @apply text-lead md:text-lead-lg text-body mb-md; }
  & a { @apply underline text-accent [text-underline-offset:4px]; }
  & strong { @apply font-strong text-ink; }
  & em { @apply italic; }
  & ul { @apply list-disc pl-lg mb-md text-lead md:text-lead-lg text-body; }
  & ol { @apply list-decimal pl-lg mb-md text-lead md:text-lead-lg text-body; }
  & li { @apply mb-2xs; }
  & blockquote { @apply p-md my-lg bg-raised rounded-surface text-lead-lg text-ink; }
  & img { @apply w-full max-w-full h-auto my-lg rounded-surface; }
  & img[data-disk-image-state="loading"] {
    @apply text-transparent bg-no-repeat bg-[length:200%_100%]
           motion-safe:animate-[disk-image-shimmer_2s_linear_0.5s_infinite];
    background-color: color-mix(in srgb, var(--color-faint) 25%, var(--color-surface));
    background-image: linear-gradient(90deg, transparent 25%,
                                      color-mix(in srgb, var(--color-surface) 65%, transparent) 50%,
                                      transparent 75%);
  }
  & img[data-align="left"] { @apply float-left mr-lg; }
  & img[data-align="right"] { @apply float-right ml-lg; }
  & img[data-align="center"] { @apply mx-auto block; }
  & img[data-size="small"] { @apply w-1/4; }
  & img[data-size="medium"] { @apply w-1/2; }
  & img[data-size="large"] { @apply w-3/4; }
  & code { @apply font-mono text-[0.9em] text-accent-deep; }
  & pre { @apply p-md my-lg overflow-x-auto bg-raised rounded-surface; }
  & hr { @apply my-2xl border-t border-ink/10; }
  & table { @apply w-full my-lg text-sm text-body; }
  & th { @apply py-xs pr-md text-left font-strong text-ink border-b border-ink/10; }
  & td { @apply py-xs pr-md align-top border-b border-ink/10; }
}

@layer base {
  html {
    background-color: var(--color-surface);
  }

  body {
    min-height: 100vh;
    color: var(--color-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
  }

  a:hover {
    color: var(--color-accent-deep);
  }
}
```

## mineral

```css
/* "Mineral" — Quiet, wide-set and editorial.

   A whole site's stylesheet: the fonts it loads, the tokens its utilities
   read, the component classes its markup wears, and the base rules under
   everything. Copied onto a site once; after that the site's own copy is
   the only one that matters. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

@theme {
  --color-surface: #fbfbfa;
  --color-ink: #17181a;
  --color-body: #5c5f63;
  --color-muted: #8a8d91;
  --color-accent: #17181a;
  --color-accent-deep: #33353a;
  --color-faint: #b3b6ba;
  --font-heading: 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-weight-strong: 500;
  --color-cta: #e8e2d6;
  --color-cta-hover: #ddd5c4;
  --color-on-cta: #17181a;
  --color-cta-strong: #17181a;
  --color-cta-strong-hover: #33353a;
  --color-on-cta-strong: #fbfbfa;
  --color-raised: #ffffff;
  --text-display: 34px;
  --text-display--line-height: 1.05;
  --text-display--letter-spacing: -0.02em;
  --text-display-lg: 72px;
  --text-display-lg--line-height: 1.02;
  --text-display-lg--letter-spacing: -0.03em;
  --text-title: 34px;
  --text-title--letter-spacing: -0.02em;
  --text-subtitle: 30px;
  --text-subtitle--line-height: 1.25;
  --text-subtitle--letter-spacing: -0.02em;
  --text-lead: 14px;
  --text-lead--line-height: 22px;
  --text-lead-lg: 17px;
  --text-lead-lg--line-height: 28px;
  --text-eyebrow: 10px;
  --text-eyebrow--line-height: 1.5;
  --text-eyebrow-lg: 12px;
  --text-eyebrow-lg--line-height: 16px;
  --tracking-eyebrow: 0.22em;
  --text-control: 13px;
  --tracking-control: 0.06em;
  --text-control-sm: 12px;
  --text-control-sm--line-height: 16px;
  --tracking-control-sm: 0.08em;
  --radius-control: 2px;
  --radius-surface: 2px;
  --container-page: 1280px;
  --container-headline: 820px;
  --container-lead: 300px;
  --container-lead-lg: 480px;
  --spacing-gutter: 18px;
  --spacing-gutter-lg: 48px;
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;
  --spacing-bar: 12px;
  --spacing-bar-lg: 20px;
  --spacing-mark: 22px;
  --spacing-dot: 12px;
  --text-brand: 14px;
  --text-brand-lg: 15px;
  --spacing-tile: 150px;
  --spacing-tile-lg: 250px;
  --image-slot: repeating-linear-gradient(45deg,rgba(23,24,26,0.06),rgba(23,24,26,0.06) 7px,rgba(23,24,26,0.1) 7px,rgba(23,24,26,0.1) 14px);
  --spacing-band-top: 36px;
  --spacing-band-top-lg: 104px;
  --spacing-band-bottom: 24px;
  --spacing-band-bottom-lg: 64px;
  --spacing-eyebrow-gap: 12px;
  --spacing-eyebrow-gap-lg: 20px;
  --spacing-heading-gap: 12px;
  --spacing-heading-gap-lg: 24px;
  --spacing-lead-gap: 0px;
  --spacing-lead-gap-lg: 36px;
}

/* The page-level call to action. With an `href` it belongs on an `<a>`,
   without one on a `<button>` — an action nothing is wired to yet is not a
   link to nowhere. */
@utility btn-primary {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-cta text-on-cta text-control tracking-control
         px-[30px] py-[15px] hover:bg-cta-hover;
}

/* The small high-contrast action in a bar. Small controls belong to the
   register a look may shout, so the case var rides along. */
@utility btn-compact {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-cta-strong text-on-cta-strong text-control-sm
         tracking-control-sm px-[22px] py-[11px] hover:bg-cta-strong-hover
         [text-transform:uppercase];
}

/* Quiet and bordered, for a row of them. */
@utility btn-outline {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-transparent text-ink border border-ink/25
         text-control-sm tracking-control-sm px-5 py-[11px] whitespace-nowrap
         hover:bg-ink hover:text-surface hover:border-ink
         [text-transform:uppercase];
}

/* Full width, for the bottom of a phone screen. */
@utility btn-block {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors w-full bg-cta-strong text-on-cta-strong
         text-control-sm tracking-control-sm p-4
         [text-transform:uppercase];
}

/* For sitting on a loud surface, where the usual cta colour would vanish.
   A sentence, not a label, so it never takes the shouted case. */
@utility btn-inverse {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-raised text-ink text-control tracking-control
         px-8 py-[15px];
}

/* The emphasised link beside a button. Underlined, ruled, or neither — it
   reads that as vars, so the published look decides and the markup never
   learns which: the rule is a border whose width is `0px` under a look that
   does not want one. A bare `<a>` needs no class at all; the layout's
   `@layer base` already styles the house link. */
@utility link-underline {
  @apply text-control tracking-control font-medium
         [text-decoration-line:none] [color:var(--color-ink)]
         hover:[color:var(--color-ink)]
         [border-bottom-width:1px] border-ink/30 pb-0.5;
}

/* The small-caps register a navigation row is made of, and the one register
   a look may shout. */
@utility link-quiet {
  @apply no-underline text-body font-medium text-control-sm tracking-control-sm
         [text-transform:uppercase];
}

/* The frame a picture fills. Ratio and clipping only: corners, borders and
   widths are the page's own classes beside it, one per property. `min-w-0`
   is what stops a picture in a flex row from refusing to shrink and pushing
   everything beside it out of the page. The `<img>` inside wears
   `size-full object-cover`, which makes cropping the frame's business and
   never the file's. */
@utility frame {
  @apply overflow-hidden min-w-0;
}

/* The placeholder filling a frame while the page waits for a picture. The
   fill is paint: one declaration reading the theme's own custom property, so
   a look changes the treatment without a recipe. */
@utility frame-empty {
  @apply w-full h-full rounded-[3px] bg-[image:var(--image-slot)] flex
         items-center justify-center;
}

/* The small label register above a heading. Colour is the page's own class
   beside it — an eyebrow speaks on quiet and loud surfaces alike. */
@utility eyebrow {
  @apply text-eyebrow md:text-eyebrow-lg tracking-eyebrow font-semibold
         [text-transform:uppercase];
}

@keyframes disk-image-shimmer {
  0% { background-position: 200% 0; }
  50%, 100% { background-position: -200% 0; }
}

/* A post's own markup, dressed. `{markdown(post.body)}` writes plain h2,
   p, a, ul and img with no classes on any of them, so what an article looks
   like is decided here, out of the site's own tokens, and a stored post
   carries no classes of its own. One class per property inside, the rule the
   components above keep. */
@utility article {
  @apply flow-root min-w-0 break-words;

  & h1 { @apply font-heading font-strong text-title text-ink mt-2xl mb-sm; }
  & h2 { @apply font-heading font-strong text-subtitle text-ink mt-xl mb-xs; }
  & h3 { @apply font-heading font-strong text-lead-lg text-ink mt-lg mb-2xs; }
  & h4 { @apply font-heading font-strong text-lead text-ink mt-md mb-3xs; }
  & p { @apply text-lead md:text-lead-lg text-body mb-sm; }
  & a { @apply no-underline text-ink border-b border-ink/30; }
  & strong { @apply font-strong text-ink; }
  & em { @apply italic; }
  & ul { @apply list-disc pl-md mb-sm text-lead md:text-lead-lg text-body; }
  & ol { @apply list-decimal pl-md mb-sm text-lead md:text-lead-lg text-body; }
  & li { @apply mb-3xs; }
  & blockquote { @apply pl-md my-lg border-l border-ink/25 text-subtitle text-ink; }
  & img { @apply w-full max-w-full h-auto my-lg rounded-surface; }
  & img[data-disk-image-state="loading"] {
    @apply text-transparent bg-no-repeat bg-[length:200%_100%]
           motion-safe:animate-[disk-image-shimmer_2s_linear_0.5s_infinite];
    background-color: color-mix(in srgb, var(--color-faint) 25%, var(--color-surface));
    background-image: linear-gradient(90deg, transparent 25%,
                                      color-mix(in srgb, var(--color-surface) 65%, transparent) 50%,
                                      transparent 75%);
  }
  & img[data-align="left"] { @apply float-left mr-md; }
  & img[data-align="right"] { @apply float-right ml-md; }
  & img[data-align="center"] { @apply mx-auto block; }
  & img[data-size="small"] { @apply w-1/4; }
  & img[data-size="medium"] { @apply w-1/2; }
  & img[data-size="large"] { @apply w-3/4; }
  & code { @apply font-mono text-[0.9em] text-ink; }
  & pre { @apply p-md my-lg overflow-x-auto bg-raised rounded-surface; }
  & hr { @apply my-2xl border-t border-ink/8; }
  & table { @apply w-full my-lg text-sm text-body; }
  & th { @apply py-2xs pr-md text-left font-strong text-ink border-b border-ink/25; }
  & td { @apply py-2xs pr-md align-top border-b border-ink/8; }
}

@layer base {
  html {
    background-color: var(--color-surface);
  }

  body {
    min-height: 100vh;
    color: var(--color-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
  }

  a:hover {
    color: var(--color-accent-deep);
  }
}
```

## press

```css
/* "Press" — Loud editorial ink on paper, tight and uppercase.

   A whole site's stylesheet: the fonts it loads, the tokens its utilities
   read, the component classes its markup wears, and the base rules under
   everything. Copied onto a site once; after that the site's own copy is
   the only one that matters. */
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

@theme {
  --color-surface: #f4f1ea;
  --color-ink: #14110d;
  --color-body: #4a453d;
  --color-muted: #7c756a;
  --color-accent: #c2402a;
  --color-accent-deep: #a83421;
  --color-faint: #b3ab9e;
  --font-heading: 'Raleway', sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;
  --font-weight-strong: 800;
  --color-cta: #c2402a;
  --color-cta-hover: #a83421;
  --color-on-cta: #ffffff;
  --color-cta-strong: #14110d;
  --color-cta-strong-hover: #302a22;
  --color-on-cta-strong: #f4f1ea;
  --color-raised: #ffffff;
  --text-display: 44px;
  --text-display--line-height: 0.95;
  --text-display--letter-spacing: -0.035em;
  --text-display-lg: 96px;
  --text-display-lg--line-height: 0.92;
  --text-display-lg--letter-spacing: -0.045em;
  --text-title: 52px;
  --text-title--letter-spacing: -0.03em;
  --text-subtitle: 26px;
  --text-subtitle--line-height: 1.2;
  --text-subtitle--letter-spacing: 0em;
  --text-lead: 16px;
  --text-lead--line-height: 26px;
  --text-lead-lg: 20px;
  --text-lead-lg--line-height: 30px;
  --text-eyebrow: 11px;
  --text-eyebrow--line-height: 16px;
  --text-eyebrow-lg: 12px;
  --text-eyebrow-lg--line-height: 16px;
  --tracking-eyebrow: 0.16em;
  --text-control: 14px;
  --tracking-control: 0.02em;
  --text-control-sm: 12px;
  --text-control-sm--line-height: 16px;
  --tracking-control-sm: 0.04em;
  --radius-control: 0px;
  --radius-surface: 0px;
  --container-page: 1280px;
  --container-headline: 900px;
  --container-lead: 340px;
  --container-lead-lg: 460px;
  --spacing-gutter: 20px;
  --spacing-gutter-lg: 56px;
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;
  --spacing-bar: 18px;
  --spacing-bar-lg: 26px;
  --spacing-mark: 30px;
  --spacing-dot: 12px;
  --text-brand: 20px;
  --text-brand-lg: 22px;
  --spacing-tile: 170px;
  --spacing-tile-lg: 260px;
  --image-slot: repeating-linear-gradient(90deg,#e4ddd0,#e4ddd0 12px,#eee8dc 12px,#eee8dc 24px);
  --spacing-band-top: 40px;
  --spacing-band-top-lg: 120px;
  --spacing-band-bottom: 28px;
  --spacing-band-bottom-lg: 72px;
  --spacing-eyebrow-gap: 10px;
  --spacing-eyebrow-gap-lg: 14px;
  --spacing-heading-gap: 16px;
  --spacing-heading-gap-lg: 22px;
  --spacing-lead-gap: 20px;
  --spacing-lead-gap-lg: 40px;
}

/* The page-level call to action. With an `href` it belongs on an `<a>`,
   without one on a `<button>` — an action nothing is wired to yet is not a
   link to nowhere. */
@utility btn-primary {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-cta text-on-cta text-control tracking-control
         px-[30px] py-[15px] hover:bg-cta-hover;
}

/* The small high-contrast action in a bar. Small controls belong to the
   register a look may shout, so the case var rides along. */
@utility btn-compact {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-cta-strong text-on-cta-strong text-control-sm
         tracking-control-sm px-[22px] py-[11px] hover:bg-cta-strong-hover
         [text-transform:none];
}

/* Quiet and bordered, for a row of them. */
@utility btn-outline {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-transparent text-ink border border-ink/25
         text-control-sm tracking-control-sm px-5 py-[11px] whitespace-nowrap
         hover:bg-ink hover:text-surface hover:border-ink
         [text-transform:none];
}

/* Full width, for the bottom of a phone screen. */
@utility btn-block {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors w-full bg-cta-strong text-on-cta-strong
         text-control-sm tracking-control-sm p-4
         [text-transform:none];
}

/* For sitting on a loud surface, where the usual cta colour would vanish.
   A sentence, not a label, so it never takes the shouted case. */
@utility btn-inverse {
  @apply no-underline inline-block text-center font-semibold rounded-control
         transition-colors bg-raised text-ink text-control tracking-control
         px-8 py-[15px];
}

/* The emphasised link beside a button. Underlined, ruled, or neither — it
   reads that as vars, so the published look decides and the markup never
   learns which: the rule is a border whose width is `0px` under a look that
   does not want one. A bare `<a>` needs no class at all; the layout's
   `@layer base` already styles the house link. */
@utility link-underline {
  @apply text-control tracking-control font-medium
         [text-decoration-line:none] [color:var(--color-accent)]
         hover:[color:var(--color-accent-deep)]
         [border-bottom-width:0px] border-ink/30 pb-0.5;
}

/* The small-caps register a navigation row is made of, and the one register
   a look may shout. */
@utility link-quiet {
  @apply no-underline text-body font-medium text-control-sm tracking-control-sm
         [text-transform:none];
}

/* The frame a picture fills. Ratio and clipping only: corners, borders and
   widths are the page's own classes beside it, one per property. `min-w-0`
   is what stops a picture in a flex row from refusing to shrink and pushing
   everything beside it out of the page. The `<img>` inside wears
   `size-full object-cover`, which makes cropping the frame's business and
   never the file's. */
@utility frame {
  @apply overflow-hidden min-w-0;
}

/* The placeholder filling a frame while the page waits for a picture. The
   fill is paint: one declaration reading the theme's own custom property, so
   a look changes the treatment without a recipe. */
@utility frame-empty {
  @apply w-full h-full rounded-[3px] bg-[image:var(--image-slot)] flex
         items-center justify-center;
}

/* The small label register above a heading. Colour is the page's own class
   beside it — an eyebrow speaks on quiet and loud surfaces alike. */
@utility eyebrow {
  @apply text-eyebrow md:text-eyebrow-lg tracking-eyebrow font-semibold
         [text-transform:uppercase];
}

@keyframes disk-image-shimmer {
  0% { background-position: 200% 0; }
  50%, 100% { background-position: -200% 0; }
}

/* A post's own markup, dressed. `{markdown(post.body)}` writes plain h2,
   p, a, ul and img with no classes on any of them, so what an article looks
   like is decided here, out of the site's own tokens, and a stored post
   carries no classes of its own. One class per property inside, the rule the
   components above keep. */
@utility article {
  @apply flow-root min-w-0 break-words;

  & h1 { @apply font-heading font-strong text-title text-ink mt-2xl mb-sm; }
  & h2 { @apply font-heading font-strong text-subtitle text-ink mt-xl mb-xs; }
  & h3 { @apply font-heading font-strong text-lead-lg text-ink mt-lg mb-3xs; }
  & h4 { @apply font-heading font-strong text-lead text-ink mt-lg mb-3xs; }
  & p { @apply text-lead md:text-lead-lg text-body mb-sm; }
  & a { @apply underline text-accent [text-underline-offset:3px]; }
  & strong { @apply font-strong text-ink; }
  & em { @apply italic; }
  & ul { @apply list-disc pl-md mb-sm text-lead md:text-lead-lg text-body; }
  & ol { @apply list-decimal pl-md mb-sm text-lead md:text-lead-lg text-body; }
  & li { @apply mb-3xs; }
  & blockquote { @apply pl-md my-lg border-l-4 border-accent text-subtitle text-ink; }
  & img { @apply w-full max-w-full h-auto my-lg; }
  & img[data-disk-image-state="loading"] {
    @apply text-transparent bg-no-repeat bg-[length:200%_100%]
           motion-safe:animate-[disk-image-shimmer_2s_linear_0.5s_infinite];
    background-color: color-mix(in srgb, var(--color-faint) 25%, var(--color-surface));
    background-image: linear-gradient(90deg, transparent 25%,
                                      color-mix(in srgb, var(--color-surface) 65%, transparent) 50%,
                                      transparent 75%);
  }
  & img[data-align="left"] { @apply float-left mr-md; }
  & img[data-align="right"] { @apply float-right ml-md; }
  & img[data-align="center"] { @apply mx-auto block; }
  & img[data-size="small"] { @apply w-1/4; }
  & img[data-size="medium"] { @apply w-1/2; }
  & img[data-size="large"] { @apply w-3/4; }
  & code { @apply font-mono text-[0.9em] text-ink; }
  & pre { @apply p-sm my-lg overflow-x-auto bg-raised; }
  & hr { @apply my-xl border-t-2 border-ink; }
  & table { @apply w-full my-lg text-sm text-body; }
  & th { @apply py-2xs pr-md text-left font-strong text-ink border-b-2 border-ink; }
  & td { @apply py-2xs pr-md align-top border-b border-ink/25; }
}

@layer base {
  html {
    background-color: var(--color-surface);
  }

  body {
    min-height: 100vh;
    color: var(--color-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
  }

  a:hover {
    color: var(--color-accent-deep);
  }
}
```