Pop family

Keycap

Pop meets a custom mechanical keyboard: candy keycaps with real key travel.

Sora DM Mono Self-hosted — zero third-party requests
Components
15
Widgets
3
Examples
1
Themes
2

Live preview

This is the pack's real, runnable example — rendered live by its own CSS and JS, exactly as it ships. Open it full-screen →

Use this design

One line in .env re-skins your whole public site — fonts, colours, components, both themes. No build step, nothing to install: the pack is already vendored in your copy.

  • 2 themes: Light — sage cutting mat / Dark — anodised aluminium case — the in-app toggle switches between them.
  • Fonts (Sora, DM Mono) are self-hosted in the pack. Zero third-party requests, no CDN, GDPR-calm.
  • Prefer the house look with your own colours? The appearance page has 20 accent palettes for it.
# .env 
SITE_DESIGN="keycap"

Every screen, both themes

Keycap design system — Focus Board — Dark — anodised aluminium case screenshot
Focus Board — Dark — anodised aluminium case
Keycap design system — Focus Board — Light — sage cutting mat screenshot
Focus Board — Light — sage cutting mat
Keycap design system — Cover — Dark — anodised aluminium case screenshot
Cover — Dark — anodised aluminium case
Keycap design system — Cover — Light — sage cutting mat screenshot
Cover — Light — sage cutting mat

More like this

Arcade design system — Pop meets the arcade cabinet: push-buttons, INSERT COIN, rolling scores. Dark-first. ArcadePop family Pop meets the arcade cabinet: push-buttons, INSERT COIN, rolling scores. Dark-first. Kapow design system — Pop meets the comic book: inked panels, halftone, speech bubbles, POW bursts. KapowPop family Pop meets the comic book: inked panels, halftone, speech bubbles, POW bursts. Slaps design system — Pop meets a sticker sheet: die-cut vinyl stickers that slap, curl and peel. SlapsPop family Pop meets a sticker sheet: die-cut vinyl stickers that slap, curl and peel.