# Tideline — Coming Soon Website Template

> A coming soon website template for Tailwind and React: a whole pre-launch site, not one waitlist page. Six routes, a build log, five designed HTML emails.

- Price: free
- License: Free
- Version: 1.0.0
- Category: Local business
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15.0.0, React >=19.0.0, Tailwind CSS >=4.0.0
- Dependencies: `lucide-react`

## What's inside

- 6 pages
- 25 components
- 86 design tokens plus 86 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `site-header`, `hero`, `build-strip`, `land-gallery`, `materials-board`, `material-rail`, `room-index`, `room-states`, `updates-feed`, `email-sequence`, `site-footer` |
| `/rooms` | `site-header`, `room-index`, `room-table`, `access-note`, `join-seam`, `site-footer` |
| `/the-build` | `site-header`, `updates-feed`, `materials-board`, `join-seam`, `site-footer` |
| `/emails` | `site-header`, `email-sequence`, `email-notes`, `join-seam`, `site-footer` |
| `/list` | `site-header`, `waves-table`, `faq`, `privacy-note`, `join-seam`, `site-footer` |
| `/components` | `site-header`, `tokens`, `ui`, `site-footer` |

## Components

| Name | What it renders |
| --- | --- |
| `ui/button` | Filled and quiet actions with the full state ramp |
| `ui/field` | Library field shell with the theme's recipe — one message line, error/success/description precedence |
| `ui/accordion-disclosure` | Library disclosure with the theme's + / − marker swap |
| `ui/badge` | One hairline shape in two tones — quiet and marked — carrying the build-stage ladder, the release wave, and the room chips as links. Never colour alone: every badge keeps its word, and the lifecycle ones keep a glyph too |
| `ui/eyebrow` | Letterspaced mono kicker with a hairline, in the page and on-plate registers |
| `ui/stat` | A mono label over a serif figure |
| `join-form` | The one form in the theme — rest, invalid, submitting and a durable success state |
| `hero` | Full-bleed estuary plate with the headline, the join form and the standing line over it (archetype A4) |
| `build-strip` | Four hairline-divided figures: rooms plastered, slate landed, kitchen, first season — the honest countdown, no clock |
| `land-gallery` | The land as one pinned frame: four plates cross-fading with their captions, and dots at the right edge that scroll a specific slide into view |
| `materials-board` | The signature: five photographed samples beside the five tokens they are, with source and sample code |
| `material-rail` | Five materials photographed at working distance, followed by the empty hooks, on a rail that travels sideways as the band crosses the viewport |
| `room-index` | The chroma-keyed brass tag with its room number set in HTML, and eleven room chips |
| `room-table` | One row per room — name, gable, aspect, area, stage, wave, materials — eleven rows |
| `room-states` | One room at each of four build stages, with the count past each stage read from the fixture |
| `updates-feed` | The build log: dated entries with alternating plates, the proof-of-progress a testimonial would stand in for |
| `email-sequence` | The five emails as cards, rendered from the same source as the sendable documents |
| `email-notes` | What the buyer gets in src/emails, written to the buyer rather than in the house voice |
| `waves-table` | The pricing table's honest form — three release waves, what each buys, no prices |
| `faq` | Six disclosures, opening with 'can I book a room?' answered 'no' |
| `access-note` | The access statement: the one step-free room named, the stairs and the low door stated |
| `privacy-note` | Five lines on exactly what happens to an email address |
| `join-seam` | The join form again on a sunken band, at the foot of every interior route |
| `site-header` | Overlay header with two ink registers, primary nav, mode picker and a native mobile disclosure |
| `site-footer` | Where the house is, what stage it is at, and the standing 'nothing is bookable' line |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#e8e2d6` | `#0d0f0e` |
| `--foreground` | `#191b18` | `#ece7dc` |
| `--card` | `#f3efe6` | `#141816` |
| `--card-foreground` | `#191b18` | `#ece7dc` |
| `--surface-raised` | `#faf7f0` | `#1b201d` |
| `--surface-sunken` | `#ded7c8` | `#0a0c0b` |
| `--primary` | `#c9a227` | `#c9a227` |
| `--primary-foreground` | `#17140a` | `#17140a` |
| `--primary-hover` | `#d9b243` | `#d9b243` |
| `--primary-active` | `#e6c364` | `#e6c364` |
| `--primary-ink` | `#6f5709` | `#e0bb4a` |
| `--primary-soft` | `#ecdfbb` | `#2b2410` |
| `--primary-border` | `#b79b4d` | `#6d5a1c` |
| `--accent` | `#ecdfbb` | `#3a3218` |
| `--accent-foreground` | `#191b18` | `#ece7dc` |
| `--secondary` | `#ded7c8` | `#1f2421` |
| `--secondary-foreground` | `#191b18` | `#ece7dc` |
| `--secondary-hover` | `#d5cdbc` | `#262c28` |
| `--secondary-active` | `#cbc2ae` | `#2e3530` |
| `--muted` | `#e0d9cb` | `#171b19` |
| `--muted-foreground` | `#585d56` | `#9ba39c` |
| `--border` | `#c0b59d` | `#2a302c` |
| `--hairline` | `#cdc3ac` | `#363d38` |
| `--ring` | `#6f5709` | `#c9a227` |
| `--field` | `#faf7f0` | `#10130f` |
| `--field-border` | `#b9ad93` | `#333a35` |
| `--control-border` | `#6f6754` | `#6b736c` |
| `--selection` | `#ecdfbb` | `#23291f` |
| `--selection-border` | `#b79b4d` | `#5d6a4a` |
| `--selection-foreground` | `#191b18` | `#ece7dc` |
| `--scrim` | `#080a09` | `#080a09` |
| `--shadow-color` | `#4a4436` | `#000000` |
| `--shadow-raised` | `0 1px 2px color-mix(in oklab, var(--shadow-color) 18%, transparent)` | `0 1px 2px color-mix(in oklab, var(--shadow-color) 55%, transparent)` |
| `--shadow-overlay` | `0 18px 40px color-mix(in oklab, var(--shadow-color) 22%, transparent)` | `0 18px 40px color-mix(in oklab, var(--shadow-color) 62%, transparent)` |
| `--shadow-cutout` | `0 26px 30px color-mix(in oklab, var(--shadow-color) 26%, transparent)` | `0 26px 30px color-mix(in oklab, var(--shadow-color) 62%, transparent)` |
| `--positive` | `#2f6b47` | `#7fc99a` |
| `--positive-foreground` | `#f3efe6` | `#0a1a10` |
| `--warning` | `#7a5510` | `#dcae5c` |
| `--warning-foreground` | `#f3efe6` | `#1d1505` |
| `--critical` | `#8d3128` | `#dd8f86` |
| `--critical-foreground` | `#f3efe6` | `#240d0a` |
| `--info` | `#2b5666` | `#93b6c4` |
| `--info-foreground` | `#f3efe6` | `#08161c` |
| `--material-slate` | `#4a5157` | `#4a5157` |
| `--material-oak` | `#b98b4e` | `#b98b4e` |
| `--material-wool` | `#cbc1ac` | `#cbc1ac` |
| `--material-plaster` | `#e8e2d6` | `#e8e2d6` |
| `--material-brass` | `#c9a227` | `#c9a227` |
| `--plate-ink` | `#f4efe4` | `#f4efe4` |
| `--plate-ink-muted` | `#cfcabe` | `#cfcabe` |
| `--plate-ink-brass` | `#e0bb4a` | `#e0bb4a` |
| `--control-height` | `3.5rem` | `3.5rem` |
| `--radius` | `2px` | `2px` |
| `--font-display` | `var(--font-tideline-display), ui-serif, Georgia, "Times New Roman", serif` | `var(--font-tideline-display), ui-serif, Georgia, "Times New Roman", serif` |
| `--font-text` | `var(--font-tideline-text), ui-sans-serif, system-ui, Arial, sans-serif` | `var(--font-tideline-text), ui-sans-serif, system-ui, Arial, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-tideline-mono), ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace` | `var(--font-tideline-mono), ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--text-body` | `1rem` | `1rem` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-caption` | `1.4` | `1.4` |
| `--leading-small` | `1.45` | `1.45` |
| `--leading-body` | `1.55` | `1.55` |
| `--leading-lead` | `1.6` | `1.6` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--text-d2` | `2.25rem` | `2.25rem` |
| `--text-d3` | `clamp(2.5rem, 1.6rem + 3.6vw, 3.375rem)` | `clamp(2.5rem, 1.6rem + 3.6vw, 3.375rem)` |
| `--text-d4` | `clamp(3rem, 1.4rem + 6.4vw, 5.0625rem)` | `clamp(3rem, 1.4rem + 6.4vw, 5.0625rem)` |
| `--leading-d1` | `1.25` | `1.25` |
| `--leading-d2` | `1.15` | `1.15` |
| `--leading-d3` | `1.06` | `1.06` |
| `--leading-d4` | `0.98` | `0.98` |
| `--tracking-d1` | `0em` | `0.004em` |
| `--tracking-d2` | `-0.01em` | `-0.006em` |
| `--tracking-d3` | `-0.018em` | `-0.014em` |
| `--tracking-d4` | `-0.026em` | `-0.022em` |
| `--tracking-eyebrow` | `0.22em` | `0.22em` |
| `--tracking-label` | `0.16em` | `0.16em` |
| `--tracking-wordmark` | `0.32em` | `0.32em` |
| `--weight-display` | `400` | `400` |
| `--radius-inner` | `1px` | `1px` |
| `--ease-house` | `cubic-bezier(0.22, 1, 0.36, 1)` | `cubic-bezier(0.22, 1, 0.36, 1)` |
| `--duration-micro` | `140ms` | `140ms` |
| `--duration-state` | `250ms` | `250ms` |
| `--duration-entrance` | `380ms` | `380ms` |
## Use it

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

## Links

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