# Carafe — Cafe Website Template Tailwind

> For an all-day café or bistro: a cafe website template tailwind where the card is set once a season and today's changes are dated slips that expire themselves.

- Price: $18, one-time
- License: Standard
- Version: 1.0.0
- Category: Local business
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15 <17, React >=19 <20, Tailwind CSS >=4 <5
- Dependencies: `lucide-react`

## What's inside

- 13 pages
- 50 components
- 84 design tokens plus 84 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `site-header`, `hero-served`, `served-card`, `on-the-grinder`, `visit-strip`, `site-footer` |
| `/menu` | `site-header`, `menu-index`, `menu-dayparts`, `menu-drinks`, `site-footer` |
| `/visit` | `site-header`, `hours-card`, `house-rules`, `find-us`, `site-footer` |
| `/book` | `site-header`, `booking-policy`, `booking-seam`, `site-footer` |
| `/notices` | `site-header`, `notices`, `site-footer` |
| `/fr` | `site-header`, `hero-served`, `served-card`, `on-the-grinder`, `visit-strip`, `site-footer` |
| `/fr/menu` | `site-header`, `menu-index`, `menu-dayparts`, `menu-drinks`, `site-footer` |
| `/fr/visit` | `site-header`, `hours-card`, `house-rules`, `find-us`, `site-footer` |
| `/fr/book` | `site-header`, `booking-policy`, `booking-seam`, `site-footer` |
| `/fr/notices` | `site-header`, `notices`, `site-footer` |
| `/handover` | `site-header`, `handover-map`, `handover-tasks`, `handover-slips`, `handover-limits`, `site-footer` |
| `/components` | `site-header`, `token-sheet`, `site-footer` |
| `/404` | `site-header`, `not-found`, `site-footer` |

## Components

| Name | What it renders |
| --- | --- |
| `booking-policy` | The opener of /book: the booking policy as a card, one row per service with its hours and whether it takes a table, the live policy slip clipped to the corner striking the brunch row with its stamped mark, and the party limit, the group threshold and the fifteen-minute hold in the card's second column. |
| `booking-seam` | The seam by site.booking.mode: the partner widget in its container, the filled link-out, or the walk-in statement, each with the fallback link under it; the two-top supper photograph beside it; and the enquiry block with the group and voucher policy. |
| `enquiry-form` | The theme's one form: a subject select, name, email, party size and date, with the café's own sentence per constraint, the typed error summary, focus moved to the summary or the single failing control, and a receipt that says a table is not held until somebody answers. |
| `find-us` | The close of /visit: the bus, the metro, where parking is free, the bike racks, the door's width, the washroom and the room's tables, the phone and the email, the room photograph, the address in a copyable block with its coordinates, and the repeated Get directions beside the geo: handoff. |
| `handover-annotation` | The annotation parts /handover is drawn with: the numbered stamp in the slip's own stamp-red mono, the two column heads, the typed where-list that pairs a file or screen with its fields, and the flat caveat panel a boundary is stated in. |
| `handover-limits` | Six boundaries as native disclosures, closed: the companion plugin, dark mode, translation, the unconfirmed booking provider, the two demo routes that never become templates, and how a cached page still knows what is being served. |
| `handover-map` | The annotated render: the six bands of / rendered live under their own numbered stamps, the menu card drawn part by part with its stamps in the margin, and every one of the twelve regions mapped to the fixture field that fills it and the WordPress screen that will edit it. |
| `handover-slips` | The five slip kinds, each as the real sheet from the fixture beside the job it does, the effect it has on the card, and the fields that write it in both builds, plus the five shapes the build refuses to draw. |
| `handover-tasks` | The four editing tasks from the buyer research, walked end to end in two columns: update a dish, change a price, replace an image with its crop and focal point, and point a visitor at a reservation. Two carry the caveat that the port cannot do the same thing. |
| `hero-served` | Hero archetype A4: the full-bleed counter photograph of whatever daypart is being served, the served-now chip, the derived daypart clause in Brygada italic, the filled Get directions action and the walk-in reassurance line. At 375 the picture is a 4:5 crop and the words sit under it, on zinc. |
| `hours-card` | The opener of /visit: the façade and terrace photograph beside the heading, and the week as a card with every live hours slip clipped on, the terrace row struck, today's row marked, and the between-services gap and the last order derived onto the card's foot. |
| `house-rules` | Laptops at all five services from the daypart table with the right-now clause lifted out of it, the dog, terrace and children rules, the group threshold, and the reason behind the laptop rule in a native disclosure. |
| `menu-dayparts` | The five daypart bands in stacked layout, each opening on its 21:9 counter plate and carrying a card of thumbnail rows cropped by each dish's measured focal point, with the day's slips clipped on, the replaced row struck and un-photographed, and the service's number as the card's mark. |
| `menu-drinks` | The closing band: the nine drinks served at every hour, printed once instead of on all five cards, with their add-on pricing. No plate and no slip, so the page ends on type. |
| `menu-index` | The opener of /menu: the five services as a numbered contents page, each row carrying its days and hours, its dish count, its price range and whether it is served now, today or not today, over the card's front matter (the allergy statement, the tax note and the date the card last changed). |
| `not-found` | The closed-counter photograph with the same measured overlay geometry the hero uses, the clock-free full-day state listing every service with its days and times, the week's hours, the address and the way back to the card. |
| `on-the-grinder` | Today's espresso and filter with roaster, origin, process and since-date, the bake batches with their authored usually-gone times, and the square grinder photograph. |
| `served-card` | The served daypart's card in switcher layout with type-only rows: folder tabs for all five dayparts (the ones not served today present and disabled), today's slips clipped to the card's top-right corner, the replaced row struck and stamped, the soup's description supplied by the special slip, and the freshness stamp on the card foot. |
| `notices` | /notices: the six fields the enquiry form collects as a card, one row each with what the field is for, the named person responsible and the retention window beside them, then five closed native disclosures answering what the café does with it, the rights, who else sees it, why there is no cookie banner, and what can be promised about an allergy. |
| `ui/structured-data` | One CafeOrCoffeeShop JSON-LD node per indexable route, derived from the same fixture the page draws: the address and the real coordinates, the weekly hours read off the daypart table, the dated closures read off the hours slips, and on /menu the whole card as a Menu of ten MenuSections and fifty-two MenuItems with CAD offers. |
| `ui/diet-filter` | /menu's four dietary marks as a button group with the AND rule stated beside it, a live count of the rows that match, a per-band count in every card head, and a clear control that returns focus to the first mark. Every row stays in the document; nuts are marked and never filtered. |
| `ui/locale-switch` | The language switch in two forms from one list: a dropdown in the header showing the language you are reading (EN and a chevron) whose open list carries both, the active one checked, and a flat pair of links in the footer and the narrow-width nav panel. Every option is a real link to the same page in the other language, carrying lang and hreflang, with the abbreviation aria-hidden beside the language's own name for a screen reader. A site with one locale renders nothing. |
| `site-footer` | The week's hours from the one hours record, the address block, the freshness stamp ("Card last changed Mon 14 Sep"), the tax note and the two demo-only editing links. |
| `site-header` | The site header: wordmark, the three primary routes with aria-current, the derived open-status dot, the language dropdown, a quiet Book a table action and the mode toggle. The status moves under the bar at 375 and the language switch moves into the nav panel below md, rather than either being dropped. |
| `token-sheet` | The styleguide's token panel: surfaces, ink, the slip's own non-inverting material, status, the 1.250 type ladder and the three presets, every swatch reading its live custom property. |
| `ui/accordion-disclosure` | Vendored library part: a native &lt;details&gt; row for a paragraph the reader may want, with a rotating hairline marker and a crawlable panel. |
| `ui/button` | Filled, quiet and ghost, with hover, active, disabled and pending states. Carries data-cta so the CTA check can tell the hero's one primary from the header's quiet action. |
| `ui/card-panel` | Vendored library part: the white-stock, square-cornered, hairline card every menu, hours and booking card is drawn in, with an optional muted header mark and a bleed extent. |
| `ui/chip` | The served-now chip — the theme's one full-radius object, on the accent, with an ink label at 11.79:1. |
| `ui/clipped-card` | The signature's geometry: a card whose masthead shares its row with the day's slips and whose rows come after both, the sheets overhanging the right edge by 24px and crossing the top hairline by the clip alone, with nothing absolutely positioned so no gesture and no edition can misplace a slip. |
| `ui/copy-line` | The address in mono on a recessed ground, selectable whole, with one button that copies it, a polite status line beside the button, and a selection fallback when the clipboard is refused. |
| `ui/dietary-mark` | The V, VG, GF, DF and N letters printed beside a dish, as &lt;abbr&gt;, plus the expanded key printed once per card. |
| `ui/field` | Vendored library part: label, optional marker, one message line, and rest, invalid, valid, read-only and disabled states on a recessed --field ground. |
| `ui/form` | Vendored library part: the group-enquiry form's submission, fieldset and receipt region. |
| `ui/ground` | The ground layer: a grayscale drawing read as a luminance mask over a --texture-ink layer, so the file carries no colour and one asset serves both modes and all three presets. |
| `ui/form-error-summary` | Vendored library part: the typed summary that names every failed field and moves focus to it, in the critical role with an icon and the words. |
| `ui/hours-row` | One row of the hours record, with the today state and the struck state an hours slip puts it in. |
| `ui/input` | The text, textarea and select control recipe, identified by its recessed ground and its label rather than by its border. The select keeps the native control and replaces only the platform arrow, with one chevron from the ladder. |
| `ui/item-row` | One row of the card, in both variant states (type-only and 96px thumbnail), with the superseded state that strikes the row, stamps the slip mark in the price column and hides the thumbnail. |
| `ui/logo` | The wordmark in Brygada italic, with the brand name wrapped for rebrand-before-buy. |
| `ui/mode-toggle` | Light and dark written to &lt;html&gt; and remembered, with an accessible name that changes with the state and no server-side guess. |
| `ui/nav` | The three primary routes, with aria-current and an underline carrying the open route. |
| `ui/slip` | The signature: a square sheet of thin coloured paper held by a flat two-rectangle clip, typed in mono with a stamp-red date box and a posted-by line, in all five kinds. Plus the stamped mark a superseded row carries. |
| `ui/status-dot` | "Open until 17:00" — a graphic-tier dot and the derived sentence beside it, so the distinction is never colour alone. |
| `ui/tabs` | Vendored library part: the daypart switcher as folder tabs cut into the card's top edge, with roving focus and the selected tab losing its bottom hairline. |
| `ui/text-link` | A link in prose on its own --link role, with the underline as the affordance. |
| `visit-strip` | The address as the heading, the transit, access, laptop and dog rules, the phone, today's hours row and the terrace row struck by its hours slip, the booking line derived from the booking rows minus any live policy slip, and the end repeat of Get directions. |
| `ui/sheet-drawer` | The narrow-width navigation panel: card stock arriving from the top edge over one veil, with a dialog role, a focus trap, Escape, a scroll lock and no entrance. |
| `ui/mobile-nav` | The header's md:hidden menu: a 44px trigger and the three routes as 56px rows, each with the one clause that says what it leads to, over the two languages listed flat and a quiet Book a table. |
| `ui/dropdown-menu` | The theme's one menu, on the card's own stock: square, hairline, unlifted, placed rather than animated. Two radio rows with the check column reserved on both so the labels do not shift, each row a real link, the active one checked; arrows move, Home and End jump, a letter jumps, Enter chooses, Tab and Escape close and return focus to the trigger. |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#e7e1d9` | `#16120e` |
| `--foreground` | `#201b16` | `#e9e5de` |
| `--card` | `#fdfaf6` | `#25201b` |
| `--card-foreground` | `#201b16` | `#e9e5de` |
| `--secondary` | `#d6cfc6` | `#322d28` |
| `--secondary-foreground` | `#201b16` | `#e9e5de` |
| `--muted` | `#f1ece5` | `#1c1814` |
| `--muted-foreground` | `#605953` | `#a39d96` |
| `--border` | `#cfc7bf` | `#423d37` |
| `--primary` | `#ca1001` | `#da2d1d` |
| `--primary-foreground` | `#ffffff` | `#ffffff` |
| `--primary-hover` | `#ac0a00` | `#c60d00` |
| `--primary-active` | `#8f0700` | `#ab0a00` |
| `--accent` | `#efc848` | `#dbb73f` |
| `--accent-foreground` | `#201b16` | `#261f16` |
| `--link` | `#933b23` | `#ed8b74` |
| `--link-hover` | `#802910` | `#ff9d85` |
| `--ring` | `#094d9a` | `#77aaef` |
| `--field` | `#f3efeb` | `#110d09` |
| `--field-border` | `#a49d96` | `#58534c` |
| `--control-border` | `#766f66` | `#756f68` |
| `--selection` | `#ead8ab` | `#3d2e04` |
| `--selection-foreground` | `#201b16` | `#e9e5de` |
| `--selection-border` | `#856d30` | `#a38948` |
| `--positive` | `#1c6734` | `#6fc884` |
| `--positive-foreground` | `#ffffff` | `#16120e` |
| `--positive-soft` | `#dff3e2` | `#172a1b` |
| `--positive-border` | `#9dcaa5` | `#34613f` |
| `--positive-fill` | `#167e3c` | `#50b76c` |
| `--warning` | `#874e01` | `#eeac5a` |
| `--warning-foreground` | `#ffffff` | `#16120e` |
| `--warning-soft` | `#fdead6` | `#31210f` |
| `--warning-border` | `#dcb48d` | `#704c23` |
| `--warning-fill` | `#a76200` | `#dd9231` |
| `--critical` | `#852132` | `#f17883` |
| `--critical-foreground` | `#ffffff` | `#16120e` |
| `--critical-soft` | `#fee4e5` | `#351b1d` |
| `--critical-border` | `#e6a9ab` | `#7b4246` |
| `--critical-fill` | `#96283a` | `#d45765` |
| `--slip` | `#ffe9b2` | `#ffe9b2` |
| `--slip-ink` | `#261f16` | `#261f16` |
| `--slip-muted` | `#5c5245` | `#5c5245` |
| `--slip-stamp` | `#932412` | `#932412` |
| `--slip-edge` | `#bfaa77` | `#a79260` |
| `--clip` | `#261f16` | `#918b83` |
| `--on-photo` | `#f9f6f2` | `#f9f6f2` |
| `--shadow-color` | `#18130d` | `#040201` |
| `--texture-ink` | `rgb(24 19 13 / 0.065)` | `rgb(206 194 176 / 0.128)` |
| `--texture-ink-card` | `rgb(24 19 13 / 0.059)` | `rgb(206 194 176 / 0.144)` |
| `--radius` | `0.25rem` | `0.25rem` |
| `--radius-card` | `0rem` | `0rem` |
| `--radius-chip` | `9999px` | `9999px` |
| `--icon-stroke` | `1.5` | `1.5` |
| `--ease-house` | `cubic-bezier(0.2, 0, 0, 1)` | `cubic-bezier(0.2, 0, 0, 1)` |
| `--duration-micro` | `120ms` | `120ms` |
| `--duration-state` | `150ms` | `150ms` |
| `--duration-settle` | `180ms` | `180ms` |
| `--distance-settle` | `4px` | `4px` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--leading-caption` | `1.4` | `1.4` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--leading-small` | `1.45` | `1.45` |
| `--text-body` | `1rem` | `1rem` |
| `--leading-body` | `1.55` | `1.55` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-lead` | `1.6` | `1.6` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--leading-d1` | `1.25` | `1.25` |
| `--tracking-d1` | `-0.005em` | `-0.005em` |
| `--text-d2` | `1.875rem` | `1.875rem` |
| `--leading-d2` | `1.2` | `1.2` |
| `--tracking-d2` | `-0.01em` | `-0.01em` |
| `--text-d3` | `clamp(1.875rem, 1.6rem + 1.4vw, 2.34375rem)` | `clamp(1.875rem, 1.6rem + 1.4vw, 2.34375rem)` |
| `--leading-d3` | `1.15` | `1.15` |
| `--tracking-d3` | `-0.012em` | `-0.012em` |
| `--text-d4` | `clamp(2.125rem, 1.7rem + 2.2vw, 2.9296875rem)` | `clamp(2.125rem, 1.7rem + 2.2vw, 2.9296875rem)` |
| `--leading-d4` | `1.1` | `1.1` |
| `--tracking-d4` | `-0.015em` | `-0.015em` |
| `--tracking-label` | `0.08em` | `0.08em` |
| `--weight-display` | `500` | `500` |
| `--font-display` | `var(--font-carafe-display), Iowan Old Style, Georgia, serif` | `var(--font-carafe-display), Iowan Old Style, Georgia, serif` |
| `--font-text` | `var(--font-carafe-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-carafe-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-carafe-mono), ui-monospace, 'Courier New', monospace` | `var(--font-carafe-mono), ui-monospace, 'Courier New', monospace` |
## Use it

- Registry: `bunx shadcn add https://tailthemes.com/r/carafe.json`
- MCP: [https://tailthemes.com/api/mcp](https://tailthemes.com/api/mcp)
- Download: [https://tailthemes.com/api/download/carafe](https://tailthemes.com/api/download/carafe)

## Links

- Product page: [https://tailthemes.com/themes/carafe](https://tailthemes.com/themes/carafe)
- Live preview: [https://tailthemes.com/preview/carafe](https://tailthemes.com/preview/carafe)
- Docs: [https://tailthemes.com/docs/carafe](https://tailthemes.com/docs/carafe)
- Manifest JSON: [https://tailthemes.com/api/themes/carafe](https://tailthemes.com/api/themes/carafe)
- Registry item: [https://tailthemes.com/r/carafe.json](https://tailthemes.com/r/carafe.json)