Templates

Nautical Ledger

A SaaS product landing for a fictional invoicing tool built for small crews — hero, proof row, features, pricing, FAQ.

dark navy · teal mono display

Harbor & Pine

A creative studio site — bold light, editorial type at full size, work shown as plain confident blocks.

bold light · editorial heavy display

The Long Form

An article page made for reading — warm paper, a serif display, one narrow column and nothing competing with it.

warm paper · calm serif display

Daiven Woodworks

The original demo — a complete local-business page for a fictional furniture workshop, in keel's calm default light theme.

calm light · default system fonts

Application UI

Helm

A page-builder interface — toolbar, block palette, layers tree, a live artboard, and an inspector. keel's app chrome, editing a keel page.

dark · violet app chrome

Dashboard

Beacon

An analytics & billing dashboard — stat cards with deltas, an area chart, an activity timeline, and a live transactions table in a stacked sidebar shell.

light · indigo data-dense

Landing page

Ridgeline Supply

A one-page product landing — layered SVG hero art, product cards, a bento field-notes gallery, story band, and a reserve CTA. Every image is inline SVG you can swap for photos.

forest · amber image-rich

Storefront

Terra & Twine

An e-commerce storefront — a product grid, a native-dialog quick-view with size picker, and a cart drawer built on the native popover API.

terracotta · charcoal quick-view + cart

Configurator

Millhouse Coffee

A build-your-own configurator — size, roast, grind and add-on options with a running order summary that updates live as you choose.

cream · olive live pricing

Product page

Northline Instruments

A spec-driven technical product page — dark and monospace-leaning, with a three-tier comparison table across eight specs.

dark · cyan spec table

Vectorline

A product-analytics landing page pairing a bento feature grid with a no-JS pricing toggle and an accordion FAQ.

cool indigo bento grid

Kaya

A shared-money wallet landing built around a pure-CSS phone mockup and a three-step onboarding flow.

coral & mint CSS phone mockup

Margin

A dark serif-led landing for a writing assistant, with a blinking typewriter-cursor headline.

dark serif typewriter cursor

Hardset

A high-contrast sports-editorial landing for a 12-week strength program with a stat row and testimonial trio.

black & lime kinetic/bold

Tsokolate

A warm café landing with a chalkboard-style menu card and restrained inline-SVG line art.

cream & terracotta chalkboard menu

STACK/MNL

A two-day developer conference on keel's brutal path, with an accordion schedule and a sponsor marquee.

stark white · acid green brutalist

Stoa Nord

An editorial architecture-studio project index in a plain restrained list, not cards.

near-white editorial minimalism

Craft Academy

A playful course landing page with a module-by-module curriculum accordion and tiered pricing.

sunny yellow · deep purple playful e-learning

Karagatan Fund

A warm, ocean-toned marine-conservation nonprofit page with an SVG wave divider and an impact stat row.

deep teal · sandy warm organic nonprofit

Isla Sonora

A dark, high-saturation music-festival page on keel's maximal path, with a gradient headline and bold lineup grid.

hot pink/orange gradient maximalist

Motion study

Kinesis Lab

A vanilla-JS motion technique showcase — cursor-follower easing, a scroll-driven scene, parallax, and a tilt-on-hover card, each fully reduced-motion safe.

page-local JS reduced-motion safe

Motion study

Axis

A flagship device page with a CSS-3D hero — a div-built phone mockup that tilts on scroll — followed by a fully static feature grid, specs table, and CTA.

CSS-3D hero scroll-driven

Multi-page · Studio

Northbank Atelier

A design/architecture studio site — three linked pages: a homepage, a project ledger with inline expanding case studies, and a studio/contact page.

graphite · sage linked 3-page site

Multi-page · Docs

Driftwood CLI docs

A developer-tool documentation site — three linked pages sharing a sidebar-nav shell: a getting-started guide, a reference table, and a changelog.

near-black · amber linked 3-page site

Multi-page · Magazine

La Mesa

A food magazine — three linked pages: a current-issue landing, a long-form reading page, and a covers archive.

sage · cream linked 3-page site

Working app

Shiplog

A maker's build-shipping log — track projects from idea to shipped, watch a real streak, and export your log as JSON. State saved to local storage.

local storage streak tracking

Working app

Ledgerly

A monthly budget tracker — log income and expenses, watch totals and an overspend warning update live, plus a per-category breakdown. Local storage only.

local storage CRUD entries

Working app

Taskrail

A kanban task board — drag cards between columns or move them with a keyboard-friendly select, with a WIP limit that flags an overloaded column.

drag-and-drop WIP limit

Clay

Sundough

A neighborhood bakery — puffy cards, pill buttons, soft colored shadows.

Brutal

Blunt Type Co.

A type foundry — ink borders, block shadows, headings that shout.

Liquid

Glasswater

An ambient-music app — frosted panes floating over a deep gradient.

Maximal

Neon Harvest

A festival one-pager — oversized type, gradient furniture, mesh-washed bands.