uilabs.dev — Design Document

1. Visual Theme & Atmosphere

UILabs is a component and interaction lab with a dual personality: the outer shell is clean and light, but it hints at darker, more experimental territory through its typography and accent choices. The page background is a neutral near-white (rgb(255,255,255) to rgb(21,22,18) in dark surfaces), but the headline typeface — Redaction — is an editorial serif drawn from redacted government documents. It is a conceptually loaded choice for a UI lab. The primary link color is specified in the display-p3 color space (color(display-p3 1 0.144 0.4521)) — a vivid pink-red that only renders at full vibrancy on wide-gamut displays. This is a site built by designers for designers who notice these things.

2. Color Palette & Roles

The design operates with a dark/light duality. The --color-dark-border being hsla(0,0%,100%,.03) — an almost imperceptible white on dark — shows extreme refinement. The wide-gamut accent is the signature move: intentionally inaccessible to sRGB displays, communicating craft over compatibility.

3. Typography Rules

Typefaces:

• Redaction — Used for display/h1. A typeface derived from government redaction bars; serif, historical, conceptually loaded. Weight 400 at large sizes.
• Inter — Used for UI text (h2 through body, buttons, inputs). The functional counterpart.

The 73px Redaction h1 is the design’s hero moment — an oversized serif in a context where sans-serif is universal. The contrast between Redaction’s editorial weight and Inter’s utilitarian clarity creates an identity that says: “we know the rules and we’re choosing to break one of them.”

4. Component Styling

Components feature a sophisticated shadow system derived from design tokens: --ds-shadow-border, --ds-shadow-medium, --ds-shadow-border-medium, and --ds-shadow-large. The detected shadow (rgba(0,0,0,0.12) 0px 8px 30px) is smooth and airy. The --p-color-bg-fill custom property and the text-light-accent semantic token suggest a structured token system beneath the surface. Ghost buttons (transparent background, black border) are the default interactive state. The Shopify Polaris design system tokens (--p-color-bg-fill) appear in the codebase — UILabs likely showcases Shopify-adjacent component work.

5. Layout Principles

Main content is padded generously: 64px internal padding with 260px horizontal margins — a very wide guttered column, placing content in the center third of wide screens. The footer mirrors this with 265px margins. Breakpoints at 600px and 640px define a single mobile-to-desktop transition. The near-identical breakpoint pair (600/640) manages a precise responsive inflection point, likely a grid changing from 1 to 2 columns.

6. Depth & Elevation

The token system reveals four shadow tiers:

• --ds-shadow-border: a border-only ring shadow (no blur)
• --ds-shadow-medium: mid-level elevation, the workhorse
• --ds-shadow-border-medium: a combined border + medium shadow
• --ds-shadow-large: rgba(0,0,0,0.12) 0px 8px 30px — the most visible, used for cards and modals

The dark surface border (hsla(0,0%,100%,.03)) creates boundary definition on dark backgrounds without visible edges — depth through near-invisibility.

7. Do’s and Don’ts

Do:

• Use Redaction only for the primary display headline — it earns its impact through scarcity
• Specify link colors in display-p3 color space; fall back gracefully for sRGB
• Keep Inter at 14–16px for all UI text; let Redaction carry the editorial voice
• Use the --ds-shadow-large shadow only for the most elevated surfaces
• Maintain wide margins (260px+) on desktop to keep content centred and focused

Don’t:

• Use Redaction for body text or UI labels — it will read as noise, not editorial
• Add color to backgrounds; the duality is light white vs near-black only
• Override the hsla(0,0%,100%,.03) dark border with a more visible value
• Introduce a second accent color alongside the display-p3 pink-red
• Reduce margins below the 260px gutters on desktop layouts

8. Responsive Behavior

Two breakpoints (600px, 640px) keep the responsive system minimal. Below 600px, the wide margins collapse and the content stack goes single-column. The 64px padding on main likely halves on mobile. The focused breakpoint range suggests this is not a heavily responsive product — it is primarily designed for desktop-first consumption, with mobile as a capable secondary experience.

9. Agent Prompt Guide

Build a UI component showcase page in the style of uilabs.dev. White background with near-black text rgb(17,17,16). Use Redaction serif at 73px/400 for the single display headline; use Inter for everything else (14px/500 for labels, 16px/400 for body). Links in color(display-p3 1 0.144 0.4521) with sRGB fallback #ff2574. Cards float on rgba(0,0,0,0.12) 0px 8px 30px shadow. Wide desktop margins (260px+). Two breakpoints only: 600px and 640px. Dark surface sections use rgb(21,22,18) with hsla(0,0%,100%,.03) hairline borders.

Generated by Sparkbites — extracted from live CSS analysis