LOOP Design System
A living reference for LOOP's colors, typography, and UI components. Click any tagged value to copy it, then paste it directly into your markup.
Building with an AI agent? See guides/design-system.md for a condensed, agent-friendly summary of this page.
Colors
Always reference these tokens by name (e.g. bg-primary) rather than hardcoding hex values — tokens automatically adapt between LOOP's light and dark themes.
Primary
CTAs, REC indicator, active states
Secondary
Secondary actions
Accent
Stereo pair / connected state
Neutral
Dark panels, footer
Invert
Hard black/white flip — opposite of the current theme
Base 100
Page background
Base 200
Recessed / matte surfaces
Base 300
Dividers, disabled
Info
Informative messaging
Success
Success messaging
Warning
Warning messaging
Error
Errors — distinct from CTA red
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Body copy
Font weight
Letter spacing
Line height
Sizing
Font size, spacing, and border widths available for layout — plus the size scale daisyUI components share.
Font size
Spacing
Same scale applies to padding (p-*), margin (m-*), and gap (gap-*).
Border width
Max width
Default Tailwind scale — this project doesn't override the --container-* theme variables.
Keyword variants — not part of the numeric scale
Border radius (Tailwind)
Independent of daisyUI's --radius-* theme tokens (see Shape below) — use these directly on any element.
Box shadow
Blur
Breakpoints
Prefix any utility — e.g. md:flex-row — to apply it from that viewport width up.
Badges
Styles
Sizes
Alerts
Cards
LOOP Camera
Five lenses. One press. Photos that move the way you remember them.
Modifiers
Sizes
Stat blocks
Used for compact spec callouts, as seen on the homepage hero.
x5
.GIF/.MP4
F2.4
YES
Forms
Input sizes
Other controls
Shape
Applied automatically to every daisyUI component via the LOOP theme — flat, print-like, no gloss or blur.
Radius (box)
Cards, modals, alerts
Radius (field)
Buttons, inputs, tabs
Radius (selector)
Checkboxes, toggles, badges
Border
Hairline on every component
Size (field)
Buttons, inputs, tabs
Size (selector)
Checkboxes, toggles, badges
Depth
Flat surfaces — no 3D/shadow effect
Noise
No background grain texture
More daisyUI
The rest of daisyUI's component catalogue — CSS-only, so every one below is live rather than referenced. mockup-browser/-code/-phone/-window and the theme-controller are skipped as out of scope for a brand reference.
Actions
Dropdown
Modal
Swap
Data display
Avatar
Mask
Carousel
Chat
Collapse (accordion)
Countdown
Diff
Kbd
List
- Sunset Loop
- Midnight Loop
- Studio Loop
Table
| Model | Format | Price | |
|---|---|---|---|
| 1 | LOOP Camera — Sunset | Wigglegram | $399.00 |
| 2 | LOOP Camera — Midnight | Wigglegram | $399.00 |
| 3 | LOOP Carry Strap | Wigglegram | $39.00 |
Timeline
- Ordered●
- Shipped●
- Delivered●
Navigation
Breadcrumbs
Link
Menu — with submenu
Navbar
Pagination
Steps
- Register
- Choose plan
- Purchase
- Receive Product
Tabs
Feedback
Loading
Progress
Radial progress
Skeleton
Status
Toast
Normally fixed to the viewport — pinned to this box instead so it doesn't escape the page.
Tooltip
Layout
Divider
Drawer
Footer (daisyUI classes)
Distinct from the project's own React component below — these are daisyUI's raw footer-* utility classes.
Hero
Photos that move
Five lenses. One press. LOOP captures wigglegrams instantly.
Indicator
Stack
Shopify components
The project's own React components in app/components/. Most are wired directly to Hydrogen data — where it's safe to do so, they're demoed live below using the app's real (mock-store) data and context, rather than hand-built fakes.
Product — ProductPrice, ProductImage, ProductItem
Rendered with a mocked product fragment — this store isn't linked to real product data.
PaginatedResourceSection
Same mock products, wrapped in Hydrogen's real <Pagination> — Previous/Next are inert since this mock connection reports no further pages.
AddToCartButton
Disabled here to avoid submitting a real cart mutation from this reference page — it renders unstyled, exactly as it does in ProductForm, which supplies its own button styles.
Aside, Header, Footer, CartMain, CartLineItem, CartSummary, SearchFormPredictive, SearchResultsPredictive
These are already mounted once for the whole app by — Header is the nav at the very top of this page, Footer is at the very bottom, and the buttons below open the same cart/search/menu Asides you'd get from anywhere on the site.
SearchForm
A real form that submits to /search — distinct from the predictive search shown in the search Aside above.
MockShopNotice
Welcome to Hydrogen!
You’re seeing mocked products because no store is connected to this project yet.
Link a store by running npx shopify hydrogen link in your terminal.
Full component index
PageLayout (the shell containing this very page) and ProductForm (needs Hydrogen's processed variant-option data) aren't demoed above — everything else is.
Header
Demoed aboveTop nav — logo, menu, search and cart triggers.
Needs: header, cart, isLoggedIn, publicStoreDomain (from root loader)
Footer
Demoed aboveSite footer nav and social links.
Needs: footer, header, publicStoreDomain (from root loader)
PageLayout
Reference onlyApp shell — wires up Header, Footer, and the search/cart/mobile Aside panels around page content.
Needs: cart, footer, header, isLoggedIn, publicStoreDomain, children
Aside
Demoed aboveSlide-out panel + context provider behind the search, cart, and mobile-menu drawers. Exposes a useAside() hook.
Needs: type (search/cart/mobile/closed), heading, children
AddToCartButton
Demoed aboveWraps Hydrogen's CartForm to add line items to the cart.
Needs: lines, children, disabled?, onClick?, analytics?
CartMain
Demoed aboveCart contents — empty state, line items, and the summary/checkout panel.
Needs: cart (CartApiQueryFragment), layout ('page' | 'aside')
CartLineItem
Demoed aboveA single cart line — image, title, price, quantity controls, and nested child lines (e.g. warranties).
Needs: layout, line (CartLine)
CartSummary
Demoed aboveSubtotal, discounts, gift cards, and checkout button.
Needs: cart, layout
ProductItem
Demoed aboveProduct grid/list card — image, title, price.
Needs: product (collection/search/recommended fragment), loading?
ProductForm
Reference onlyVariant option selectors plus the Add to Cart button.
Needs: productOptions, selectedVariant
ProductImage
Demoed aboveA single product/variant image via Hydrogen's <Image>.
Needs: image
ProductPrice
Demoed abovePrice display, with compare-at (sale) price support.
Needs: price?, compareAtPrice?
SearchForm
Demoed aboveBare form wrapper that submits to the /search route.
Needs: children (render prop)
SearchFormPredictive
Demoed aboveDebounced fetcher-backed instant-search input wrapper.
Needs: children (render prop)
SearchResults
Reference onlyRenders full /search results via a render-prop.
Needs: term, result, children
SearchResultsPredictive
Demoed aboveRenders the instant-search dropdown results.
Needs: children (render prop)
PaginatedResourceSection
Demoed aboveWraps Hydrogen's <Pagination> with Previous/Next links for any connection.
Needs: connection, children (render prop)
MockShopNotice
Demoed aboveBanner shown on the homepage when no store is linked yet.
Needs: none — presentational