15 components, one small kit. Each one is a single Astro file you can copy into a project. Nothing here needs a framework or a client bundle beyond a few lines of plain JS.

Every example below is the real component, rendered live. Props tables list what you can change; the snippet shows the usual call.

Logo

The handwritten wordmark in Damion. Always lowercase, always a link home when used in a header.

gesso gesso milano fayrouz

Prop	Type	Default	What it does
`text`	`string`	`"gesso"`	The word to set. Keep it short and lowercase.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	sm for headers, xl for heroes.
`href`	`string`	—	Makes it a link, with an aria-label of the word plus home.

<Logo text="milano" size="sm" href="/" />

Source: src/components/Logo.astro

Nav

Sticky header after anthropic.com: link pills on the left, logo exactly centred, one call to action on the right. On phones the links move into a native details menu, so it works without JS.

studio

Get in touch

Prop	Type	Default	What it does
`links`	`{ label, href }[]`	—	Two to four links, shown as pills.
`cta`	`{ label, href }`	—	The one main action, dark pill on the right.
`current`	`string`	—	href of the current page; that pill is marked.
`logoText`	`string`	`"gesso"`	Word for the centred logo.
`navLabel`	`string`	`"Navigation"`	Accessible name of the link list (use the page language).
`menuLabel`	`string`	`"Menu"`	Accessible name of the phone menu button.

<Nav
  logoText="milano"
  navLabel="Hauptnavigation"
  menuLabel="Menü"
  links={[{ label: "Speisekarte", href: "#karte" }, { label: "Anfahrt", href: "#anfahrt" }]}
  cta={{ label: "Reservieren", href: "tel:+41442420000" }}
/>

Source: src/components/Nav.astro

Footer

Logo, a short note, link columns and a credit line. Columns wrap on small screens.

Prop	Type	Default	What it does
`columns`	`{ title, links }[]`	`three sample columns`	Link groups; keep each to a few links.
`note`	`string`	—	One plain sentence under the logo.
`logoText`	`string`	`"gesso"`	Word for the logo.
`credit`	`string`	`"built on Gesso"`	Text after the year in the bottom line.

<Footer logoText="milano" note="Militärstrasse 109, 8004 Zürich" credit="Website by a2Studio" columns={[…]} />

Source: src/components/Footer.astro

DemoBanner

A thin ink bar that marks a page as an unofficial draft. For sales demos only; remove it before a site goes live.

Prop	Type	Default	What it does
`business`	`string`	—	Name of the business the draft is for.
`studio`	`string`	`"a2Studio"`	Who made the draft.

<DemoBanner business="Ristorante Milano" />

Source: src/components/DemoBanner.astro

WritingIntro

Loading screen: a haze picture with the logo word written as if by hand, then the layer fades away (about 2.5 s). Pure CSS, skipped on later views in the same tab, plays to the end even when tapped, and left out entirely for reduced motion.

How it works: the script traces the centre line of each letter; the SVG masks the letter shape with those strokes and draws them in order.

Prop	Type	Default	What it does
`word`	`Handwriting`	—	Data from src/data/handwriting/<word>.ts (letter shape plus pen strokes).
`picture`	`string`	—	Background picture, shown with object cover and grain.
`duration`	`number`	`1.6`	Seconds for the pen to write the word.
`inline`	`boolean`	`false`	Render in a 16:9 box instead of over the page (for previews like this one).

---
import WritingIntro from "../components/WritingIntro.astro";
import milano from "../data/handwriting/milano";
---
<WritingIntro word={milano} picture="/pictures/haze.webp" />

# new word: generate its data once
python scripts/handwriting.py fayrouz src/fonts/damion-latin-400-normal.woff2 \
  > src/data/handwriting/fayrouz.ts

Source: src/components/WritingIntro.astro

ExpandingMedia

Picture card that grows to full width as you scroll, after the anthropic.com hero. One variable drives the side inset, bottom inset and corner radius.

gesso

Scroll the page and watch the edges open.

Prop	Type	Default	What it does
`src`	`string`	—	Picture, cover-fitted behind the content.
`width / height`	`number`	—	Intrinsic size, to reserve space.
`alt`	`string`	`""`	Leave empty when the picture is decoration.
`tone`	`"dark" \| "light"`	`"dark"`	Text colour on the picture.

<ExpandingMedia src="/pictures/haze.webp" width={1600} height={686}>
  <Logo text="milano" size="xl" />
  <p>Terrasse mit 80 Plätzen.</p>
  <Button href="#karte">Speisekarte</Button>
</ExpandingMedia>

Source: src/components/ExpandingMedia.astro

Gallery

Photos with captions and 4px corners. A swipe strip with scroll snap on phones, a grid from 768px. No JS, no lightbox.

Soft painted haze in sky blue, cream and peach — Haze, dawn

Engraved sourdough loaf over a clay-coloured block — Collage, sourdough

Engraved rosemary sprig over a sage block — Collage, rosemary

Engraved nautilus shell with a clay band — Collage, nautilus

Prop	Type	Default	What it does
`items`	`{ src, srcset?, width, height, alt, caption? }[]`	—	Photos in order. Give srcset with 800w and 1600w copies.
`layout`	`"grid" \| "feature"`	`"grid"`	feature makes the first photo wide on top, the rest a row of three.
`label`	`string`	—	Accessible name of the list.

<Gallery layout="feature" label="Photos of the restaurant" items={[
  { src: "/photos/aussen-1600.webp",
    srcset: "/photos/aussen-800.webp 800w, /photos/aussen-1600.webp 1600w",
    width: 1600, height: 1064, alt: "…", caption: "Entrance and terrace" },
]} />

Source: src/components/Gallery.astro

Haze

The grainy gradient surface from pure CSS, under 1 KB. For bands, cards and empty states where a picture would be too heavy.

dawn

dusk

mist

paper

Prop	Type	Default	What it does
`variant`	`"dawn" \| "dusk" \| "mist" \| "paper"`	`"dawn"`	Colour mix.
`drift`	`boolean`	`false`	Slow 28 s drift; stops for reduced motion.
`grain`	`boolean`	`true`	SVG noise on top.
`as`	`string`	`"div"`	Element to render.

<Haze variant="dusk" as="section" drift>…</Haze>

Source: src/components/Haze.astro

Button

One primary action per view; everything else secondary or ghost. A link when given href, otherwise a button. 10px corners.

Prop	Type	Default	What it does
`variant`	`"primary" \| "accent" \| "secondary" \| "ghost"`	`"primary"`	Visual weight.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Height 36 / 44 / 52 px.
`href`	`string`	—	Renders an a element.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	For forms.
`disabled`	`boolean`	`false`	Dimmed and not clickable.

<Button href="#karte">Speisekarte</Button>
<Button variant="secondary" size="sm">Replay</Button>

Source: src/components/Button.astro

Card

A quiet container with an optional media slot. 8px corners, so pictures inside keep their 4px.

Plain

A border and nothing else.

Raised

Soft shadow for things that float.

Haze

For one warm highlight.

Prop	Type	Default	What it does
`variant`	`"plain" \| "raised" \| "haze"`	`"plain"`	Border only, soft shadow, or haze fill.
`href`	`string`	—	Makes the whole card a link.

<Card variant="raised" href="/journal/first">
  <img slot="media" src="/pictures/collage-compass.webp" width="900" height="1125" alt="…" />
  <h3>Title</h3>
  <p>One or two sentences.</p>
</Card>

Source: src/components/Card.astro

Badge

A small status or tag label. One word, sentence case.

Neutral New Open now Few seats Closed

Prop	Type	Default	What it does
`tone`	`"neutral" \| "clay" \| "ok" \| "warn" \| "error"`	`"neutral"`	Colour.
`dot`	`boolean`	`false`	Leading status dot.

<Badge tone="ok" dot>Open now</Badge>

Source: src/components/Badge.astro

Callout

A short boxed message. Warn and error tones are announced as alerts.

Note

Plain information, no urgency.

Closed on 24 December

We open again on the 27th.

Prop	Type	Default	What it does
`tone`	`"note" \| "clay" \| "ok" \| "warn" \| "error"`	`"note"`	Colour and role.
`title`	`string`	—	Bold first line.

<Callout tone="warn" title="Closed on 24 December">We open again on the 27th.</Callout>

Source: src/components/Callout.astro

Field

Label, control, hint and error in one, with the aria wiring done for you.

Name

Please check the address.

Prop	Type	Default	What it does
`label`	`string`	—	Visible label.
`name`	`string`	—	Form name; also builds the id.
`as`	`"input" \| "textarea" \| "select"`	`"input"`	Control type.
`type / placeholder / value`	`string`	—	Passed to the control.
`hint`	`string`	—	Help text under the control.
`error`	`string`	—	Error text; marks the field invalid.
`required`	`boolean`	`false`	Native required.

<Field label="Email" name="email" type="email" hint="We only use it to confirm." required />

Source: src/components/Field.astro

MenuList

A whole menu as readable HTML instead of a PDF: jump pills, sections, dish names in sans, prices in mono, tags as badges.

Sample data. All prices in CHF.

Prop	Type	Default	What it does
`sections`	`{ id, title, note?, dishes }[]`	—	Each dish: name, desc?, price, no?, tag? (vegi, vegan, scharf).
`notes`	`string[]`	`[]`	Small print under the menu (allergens, origin).
`labels`	`{ nav, vegi, vegan, scharf }`	`German`	Words for the jump list and tags.

<MenuList sections={menu} notes={menuNotes} labels={{ vegi: "vegetarian", scharf: "spicy" }} />

Source: src/components/MenuList.astro

HoursTable

Opening hours as a table. A three-line script marks today in Zurich time, so the highlight never goes stale.

Opening hours
Mondaytoday	11:30–14:00, 18:00–23:00
Tuesdaytoday	11:30–14:00, 18:00–23:00
Wednesdaytoday	11:30–14:00, 18:00–23:00
Thursdaytoday	11:30–14:00, 18:00–23:00
Fridaytoday	11:30–14:00, 18:00–24:00
Saturdaytoday	18:00–24:00
Sundaytoday	closed

Sample data.

Prop	Type	Default	What it does
`hours`	`{ day, open: string \| null }[]`	—	Seven rows, Monday first; null means closed.
`note`	`string`	—	One line under the table, such as kitchen hours.
`labels`	`{ caption, today, closed }`	`German`	Words for the caption, today marker and closed days.

<HoursTable hours={hours} note="Kitchen until 22:00" labels={{ today: "today", closed: "closed" }} />

Source: src/components/HoursTable.astro

15 components, one small kit. Each one is a single Astro file you can copy into a project. Nothing here needs a framework or a client bundle beyond a few lines of plain JS.

Logo

Nav

Footer

DemoBanner

WritingIntro

ExpandingMedia

Gallery

Haze

Button

Card

Plain

Raised

Haze

Badge

Callout

Field

MenuList

Starters

Pizza

HoursTable