Development Reference
This page is for development only. It centralizes the most commonly used UI elements and theme colors so you can quickly validate style consistency in light and dark mode.
Scroll-driven depth. Add parallax-shift to an element together with parallax-shift--far to make it lag behind the scroll (reads as farther away) or parallax-shift--near to advance it faster (reads as closer). Offsets come from the shared --scroll-y variable published by ScrollSync, so the whole page drives every parallax element from a single listener, and movement is disabled under prefers-reduced-motion. Scroll to watch the shapes drift apart.
Fade an element in after the section settles. Add fade-in to an element and set --fade-in-delay to stagger it (here 1.5s, matching the hero image). The effect is opacity-only, so it composes safely with transform utilities like parallax-shift on a parent, and it is disabled under prefers-reduced-motion.
Feature- and form-level actions. Use btn-primary for the single main call to action (the solid orange button, e.g. Add Testimonial), btn-secondary for supporting actions, and btn-more for compact More / Read More actions. All are defined in globals.css; do not recreate them with inline styles. Secondary buttons use the soft brand tint (--brand-primary-soft) as their surface with a brand-colored label, so they stay visually linked to the primary action in both themes.
Per-item and segmented actions. Use the pill family for actions that act on a single list row/card (for example Approve, Edit, Archive, Delete) or for a segmented filter/action group. action-pill--primary is the row's main action; action-pill--ghost covers the remaining row actions; nav-pill / nav-pill--current render segmented filter groups. Add action-pill--icon to a ghost pill for compact icon-only row actions, pairing the ActionIcon with an aria-label and title so the action stays discoverable and accessible.
Main menu items pair a stroke icon with the label. The icon inherits the pill color through currentColor, so it stays legible in both themes. Use the nav-pill-icon utility so every menu icon keeps the same size. For compact spaces or mobile viewports, use nav-pill--sm to scale down the padding, font size, and icon.
Compact / Mobile (nav-pill--sm)
Dropdown opened from the topbar username, with Dashboard, My Profile, and Logout. Items use account-menu-item with an AccountMenuIcon (dashboard, profile, logout); the panel sits on the surface tokens with a soft border and shadow. Shown open here for reference.
Jane Doe
jane@example.com
ClientReversed-color strip pinned above the header. Dark brand background with white text. Use topbar-link for pill-style secondary links such as About Me, and topbar-text-link for text links that brighten on hover instead of showing a pill (for example login | register). Keep the inner content aligned with container-shell.
Translucent, blurred card surface used for the main service cards.
Semi-transparent gradient with a soft border, inner highlight, and drop shadow.
A translucent brand tint placed behind a section's content with the section-scrim utility, as used by the home hero. Position it absolutely behind the content and mark it aria-hidden with pointer-events-none, and render it outside container-shell so it spans the full page width without relying on 100vw. It has square edges by design — no border radius or border — and tints with --brand-primary-soft, so it reads as a very light orange in light mode and a muted warm panel in dark mode while the page background and parallax glow still show through. Foreground text colours are untouched.
section-scrim
The scrim tints the canvas behind this block edge to edge.
Card treatment for an individual item in a list — an inquiry, testimonial, account, or security key — via the list-card utility. It layers a denser surface and a soft shadow on top of a card-surface section so each item is easy to tell apart at a glance. Add list-card--dimmed to recede the items that are not the active edit target while one item is being edited; dimmed items return to full strength when hovered or focused.
adam@example.com
Could you put together a quote for a five-page marketing site?
jane · jane@example.com
This item uses list-card--dimmed. Hover or focus it to bring it back to full strength.
Client quotes shown by the Testimonials section on the home page. Each card pairs the StarRating row with the quote and an author avatar, and is built from the card-surface utility. Long quotes are clamped to three lines; clicking anywhere on the card (or the Read more button) expands and collapses them. Admins manage the content — including the avatar (an image URL or an uploaded file) — under /dashboard/admin/testimonials. When no avatar is set, the card falls back to the author's initials.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
“Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.”
Portfolio case study rendered by ProjectCard, used by the /portfolio gallery (the home page features a focused image-only showcase linking directly into each project). It layers the project screenshot, an industry StatusPill, service chips, a highlights row, an optional client quote, and a per-item action-pill on top of card-surface. Cards stretch to the tallest item in their grid row, so the action is pinned with mt-auto. A targeted card displays an active focus ring via isHighlighted or CSS :target and offsets sticky navigation with scroll-mt.
One-line pitch that says what the site does for the business and who it speaks to.
“Optional client quote. Drop the field entirely when there is nothing to quote.”
One-line pitch that says what the site does for the business and who it speaks to.
“Optional client quote. Drop the field entirely when there is nothing to quote.”
Page controls for long lists such as the home page testimonials (four cards per page). Page numbers reuse the nav-pill family, the active page uses nav-pill--current, and out-of-range Previous/Next controls are inert through the nav-pill disabled state. The active page carries aria-current="page".
Status pills pair the shared mini-pill with a leading color dot via the StatusPill component (used by the admin testimonial and inquiry managers). Pass a design-token color for the dot so it stays correct in both themes. The nav-pill-badge count bubble sits inside a nav pill to flag pending work, such as new inquiries.
Display
Display heading sample
Section Title
Section heading sample
Body Large
Large body text for lead paragraphs and key explanatory content.
Body
Regular body text for paragraphs, descriptions, and normal reading flow.
Small
Small text for metadata, hints, timestamps, and minor UI notes.
Label
Label / eyebrow text
Brand wordmark. Use <Logo /> anywhere the site name appears; it links to / by default. Pass a size preset (defaults to md) to match the surrounding scale, or href={null} for a non-interactive wordmark. The brand name is extra-bold, the Li uses the light brand primary, and the .com suffix is regular weight in the subtle text token, so it adapts to light and dark themes.
Brand Primary
--brand-primary
Main brand emphasis, primary buttons, highlighted headings.
Brand Primary Soft
--brand-primary-soft
Soft accent surfaces, gradients, and subtle emphasis backgrounds.
Brand Secondary
--brand-secondary
Secondary actions, supporting accents, and contrast details.
Brand Secondary Soft
--brand-secondary-soft
Secondary soft backgrounds and status chip blends.
Canvas Background
--bg-canvas
Global page background and long-form section canvas.
Surface Background
--bg-surface
Cards, panels, overlays, and elevated containers.
Main Text
--text-main
Primary content text and high-priority labels.
Muted Text
--text-muted
Supporting copy, helper text, and secondary descriptions.
Subtle Text
--text-subtle
Placeholders and empty-state text that should read lighter than muted.
Soft Border
--border-soft
Card borders and subtle UI separators.
Focus Ring
--ring-focus
Keyboard focus outlines and accessibility affordances.
Rating Star
--rating-star
Filled star glyphs in the testimonial rating row.
Danger
--danger
Form validation errors, destructive confirmations, and alert text.
Link
--link
Color for links in page content; the underline appears on hover and focus. Menu items and CTA buttons do not underline.
Body copy with a normal link that stays blue and underlines on hover, for example this default link.
Spam-resistant email link whose address is assembled in the browser by ObfuscatedEmail, so it never appears in the HTML source:
