apx-dsv0.1Local renderer · live
K
Foundations4
  • Getting started
  • Theming
  • Templates
  • Icons
  • Avatar
  • Badge
  • DataGrid
  • Scheduler
  • Stat
  • Table
  • Timeline
  • TreeView
  • Accordion
  • Alert
  • EmptyState
  • Progress
  • Skeleton
  • Spinner
  • SplashScreen
  • Toast
  • ColorPicker
  • FileUpload
  • Form
  • Rating
  • TagsInput
  • Combobox
  • Field
  • Select
  • Toggle
  • Button
  • Calendar
  • Checkbox
  • DatePicker
  • Input
  • NumberInput
  • Radio
  • Slider
  • Switch
  • Textarea
  • AppShell
  • Div
  • Divider
  • Marquee
  • Parallax
  • Reveal
  • Section
  • SectionHeading
  • Sidebar
  • Stack
  • Surface
  • Typography
  • Image
  • Breadcrumbs
  • Carousel
  • NavigationMenu
  • Pagination
  • Stepper
  • Tabs
  • Toolbar
  • CommandPalette
  • Confirm
  • Drawer
  • HoverCard
  • Menu
  • Modal
  • Popover
  • Tooltip
  • Icon
  • Card
  • PricingCard
66 componentsapx-ds/renderer
Templates
Variant↳ other
Preview mode

See the system as a real product

Each template here is a full-page surface composed entirely from the library's primitives. Open one to feel the redesign end-to-end — flip mode, swap variants, and toggle direction from the floating toolbar without leaving the preview.

Application

Application

Halyard — Developer docs

A real three-column documentation site: AppShell with a TreeView sidebar, an on-this-page rail, and one scroll-spy feeding both so they can never disagree. Mono as the display face, dark-first, and the quietest motion in the gallery — fade only, no travel — because a reference page is read non-linearly.

  • docs
  • developer
  • api
  • dark
  • mono
  • brand-theme

E-commerce

E-commerce

Fernwood — Home & Pantry Goods

A DTC storefront built on restraint: photography carries the colour and the interface stays out of its way. Product grid with hover image-swap and zoom, a full-bleed lookbook, named makers, real reviews and a single brand-filled band. First template to consume the DS Marquee and Image hover work.

  • e-commerce
  • storefront
  • dtc
  • retail
  • marquee
  • image-hover
  • brand-theme
Original — built for the gallery

Marketing

Marketing

Beans — Specialty Coffee

A coffee landing page ported from the Lyli source: hero, featured single origins, a dark value-prop band, the roastery story, a three-step process, testimonials and a gradient newsletter capture. Ships with the roastery palette selected, and every surface is a semantic role — so recolouring any of them re-skins the whole page.

  • marketing
  • coffee
  • landing
  • port
  • brand-theme
Ported from lyle-coffee
Marketing

Cadence — Field Ops SaaS

A B2B product landing page: split hero with a live dashboard preview built from DS primitives rather than a screenshot, capability tabs, feature grid, a horizontal workflow timeline, outcome metrics, three pricing tiers, one long testimonial, an FAQ accordion and a closing CTA band. Deliberately exercises the components no other template touches — NavigationMenu, Tabs, Accordion, Timeline, PricingCard, Progress, Avatar.

  • marketing
  • saas
  • product
  • pricing
  • brand-theme
Marketing

Fade & Co. — Barbershop

A barbershop landing page: full-bleed ink hero, a credibility band, the price list as a real definition list, the shop promise on a dark band, the barbers, reviews, a working booking form and the visit details. Squared geometry and a brass accent come entirely from the theme block — recolour a role and the whole page follows.

  • marketing
  • barbershop
  • local business
  • booking
  • brand-theme
Marketing

Northbound — One-day conference

A conference poster that turns into a usable schedule: full-bleed duotone hero with a live countdown, a running topic band, six speakers led by their talk rather than their name, and a real filterable agenda table with times, tracks and rooms. Two Surface brand tones sit either side of an inverted one — the page is a duotone, not an accent on a neutral.

  • events
  • conference
  • agenda
  • duotone
  • poster
  • brand-theme
Marketing

Vantage — Brand Studio

A dark, editorial studio site: cascading display hero, a mixed-span case-study grid, ruled service rows, a four-step process, the team, a single pull-quote and an acid-green closing band. Built to exercise the DS scroll-reveal system — almost every section reveals and staggers on entry, and all of it respects prefers-reduced-motion.

  • marketing
  • agency
  • studio
  • portfolio
  • dark
  • animation
  • brand-theme
Original — built for the gallery

Portfolio

Portfolio

Relay Atelier — Design studio

A near-monochrome studio portfolio where the type is the whole argument: a 120px headline on the fluid display scale, four case studies in the kit browser frame, and one accent colour used exactly three times on the entire page. No sticky header and no CTA band — deliberately, both.

  • portfolio
  • studio
  • editorial
  • monochrome
  • typography
  • brand-theme