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
Section titled “claret”/* "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
Section titled “cobalt”/* "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
Section titled “mineral”/* "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" — 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); }}