Responsive

base

0px

Mobile-first defaults; compositions begin in one column.

sm

640px

Optional density step for local padding or small grids.

md

768px

Primary hinge: package compositions split and NavBar returns inline.

lg

1024px

Dense application layouts may widen; this catalog reveals its sidebar.

xl

1280px

Role clamps are at or near their maximum rem tier.

2xl

1536px

No mandatory reflow; measures hold and whitespace absorbs width.

Resolved catalog samples

CSS pixels from the shipped role clamps and root formula, rounded to two decimals. A host that overrides the root size will resolve different pixels while keeping the same rem contract.

/* The root and each role scale independently. */
html { font-size: clamp(15px, 14.5px + 0.104vw, 16.5px); }

--fluid-display: clamp(2.75rem, 1.42rem + 5.9vw, 6rem);
--fluid-h1:      clamp(2rem, 1.41rem + 2.61vw, 3.5rem);
--fluid-h2:      clamp(1.5rem, 1.21rem + 1.3vw, 2.25rem);

/* Use it — no breakpoints needed. */
h1 { font-size: var(--fluid-h1); }

Manifest and browser-chrome colors must serialize as literal color values; CSS custom properties are not valid there. This is a platform metadata exception only — keep the values synchronized with the host palette and never copy literals into component or utility styles.

import type { MetadataRoute } from "next";

export const dynamic = "force-static";

// app/manifest.ts → /manifest.webmanifest (install fields)
export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "vvver design system",
    short_name: "vvver DS",
    id: "/",
    start_url: "/",
    scope: "/",
    display: "standalone",
    background_color: "#fdfcfb",
    theme_color: "#fdfcfb",
    icons: [
      { src: "/icon-192.png", sizes: "192x192", type: "image/png", purpose: "any" },
      { src: "/icon-512.png", sizes: "512x512", type: "image/png", purpose: "any" },
      { src: "/icon-maskable-192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
      { src: "/icon-maskable-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
    ],
  };
}

import type { Metadata, Viewport } from "next";

// app/layout.tsx — declare the install identity + safe-area opt-in
export const viewport: Viewport = {
  viewportFit: "cover",
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#fdfcfb" },
    { media: "(prefers-color-scheme: dark)", color: "#0b0a09" },
  ],
};
export const metadata: Metadata = {
  manifest: "/manifest.webmanifest",
  appleWebApp: { capable: true, statusBarStyle: "default", title: "vvver DS" },
  icons: { apple: "/apple-touch-icon.png" },
};

A small client registers the worker (production only, so next dev never caches), and a versioned cache name drops stale assets on activate. Cross-origin and non-GET requests pass through without service-worker interception.

• 01

  Write a complete source order at the base tier; add the md split only when the wider composition needs it.

• 02

  Use the fluid role tokens instead of duplicating font-size breakpoints; remember that the host root determines resolved pixels.

• 03

  Choose media crop and full bleed per image, not as automatic phone behavior; check the subject at every crop.

• 04

  Hold prose and section measures on wide screens; do not fill unused width with incidental columns.

• 05

  Apply the 44px target floor to every custom control, especially menu buttons, icon actions, and carousel dots.

• 06

  Use --gutter-fluid for the 1.25–2.5rem page rhythm; the host root determines its pixels as the viewport changes.

• 07

  Keep text-entry controls at 16px or larger to avoid iOS focus zoom, independent of the smaller fluid root.

• 08

  Pad every edge-pinned surface for safe areas and use the packaged vh → svh → dvh fallback for viewport-height shells.