The PreBizSys design system, complete.

Color: the raw palette

Color: the semantic roles

Author against these. If a design need has no role, the fix is adding a token to the source, never an inline hex.

• One namespace, forever. Every custom property starts with --pbs- and every class with pbs- (component classes like btn and plan are part of the locked component layer). Never introduce a second namespace. Why: an earlier build ran two token namespaces at once, with three tokens that were never declared anywhere; production rendered different blacks and creams at the same time and nobody could say which was canonical.
• Never ship var(--x, #fallback) with --x undeclared. The fallback silently becomes the real value and drifts. Every token is declared in the one source AND has a consumer.
• Orange is reserved. It carries the primary CTA, key marks, the eyebrow tick, and the link underline. It is never a decorative background, never body text, never spread across competing elements. One decisive accent is the brand.
• Green is a status signal only ("Live" tags, verified ticks), never a second accent.

Type: the system

display: "Space Grotesk" · body: "Inter" · mono: "Space Mono" (full fallback stacks in the token block below)

• Weights: 400 regular, 500 medium, 600 semibold, 700 bold. Nothing lighter, nothing heavier.
• Every text element takes a tokened role. A new role is an addition to the token source, never an inline font-size. Why: on an earlier build one page quietly ran its own fonts and sizes because nothing enforced a single system; it read like a different site.
• The scale is fluid by clamp (minimum at a 360px viewport, maximum at 1440px). Never author per-breakpoint font-size overrides; the clamp already does the responsive work.
• Loading strategy (no layout shift): self-host the three families as WOFF2, declare them with font-display: swap, and pair each with a metric-override fallback face (size-adjust, ascent-override, descent-override tuned so the system fallback occupies identical space). The swap then moves nothing. Preload only the two above-the-fold faces (display 700 and body 400), as woff2, with crossorigin. Never load fonts from a third-party host in production. Why: on an earlier build the font swap landed around 2.8 seconds in and shifted the hero about 37px, producing intermittent layout-shift scores of 0.382.

Spacing: one 8px-base scale, three rhythm layers

• Macro (section rhythm): every content band gets padding-block: var(--pbs-section-pad) where --pbs-section-pad: clamp(3.5rem, 2rem + 6vw, 7rem), roughly 56px on mobile opening to 112px at 1440px. This very page demonstrates it.
• Meso (one measure): content lives in a container with max-width: 1200px and gutters of clamp(1.25rem, 0.5rem + 3.5vw, 3rem), so content edges align site-wide.
• Micro (element rhythm): margins and gaps come from the fixed steps above. The micro steps are intentionally NOT fluid; fluidity belongs to the macro rhythm and the type.
• One sectioning convention. Every content band on every page is <section class="pbs-section pbs-zone--..."><div class="pbs-container">. The only sanctioned exemptions: the site header, the site footer, the full-viewport homepage hero, and the compact page hero. Nothing else, ever. Why: an earlier build let four different sectioning conventions coexist on one site; a single page accumulated five different container widths and heading sizes from 12px to 54px. A closed convention with a named exemption list makes that impossible.
• Tune spacing only upward. Values may be adjusted to LIFT a thin page to the generous register, never to compress one.

Radius, elevation, motion vocabulary

Copy-paste: the canonical token block (single source, complete)

:root {
  /* COLOR: raw palette */
  --pbs-graphite:      #1C2126;  /* primary ink */
  --pbs-steel:         #2D343C;  /* secondary dark panels, footer */
  --pbs-concrete:      #6B7280;  /* captions, placeholders */
  --pbs-offwhite:      #F7F7F5;  /* light page ground */
  --pbs-white:         #FFFFFF;  /* cards, panels */
  --pbs-orange:        #F25C05;  /* the one decisive accent (reserved) */
  --pbs-orange-deep:   #C9430A;  /* action hover / active */
  --pbs-green:         #1F9D55;  /* status signals only */

  /* COLOR: semantic roles (build against these) */
  --pbs-bg:            var(--pbs-graphite);
  --pbs-bg-alt:        var(--pbs-offwhite);
  --pbs-surface:       var(--pbs-white);
  --pbs-text:          #EDEEF0;               /* body on dark */
  --pbs-text-on-light: var(--pbs-graphite);
  --pbs-text-muted:    #A6ACB4;               /* muted on dark */
  --pbs-muted-on-light: #586069;              /* muted on light */
  --pbs-border:        rgba(255,255,255,0.10);/* hairlines on dark */
  --pbs-border-light:  rgba(28,33,38,0.12);   /* hairlines on light */
  --pbs-action:        var(--pbs-orange);
  --pbs-action-hover:  var(--pbs-orange-deep);
  --pbs-on-action:     var(--pbs-white);
  --pbs-card-shadow:   0 1px 2px rgba(28,33,38,0.06), 0 14px 34px rgba(28,33,38,0.10);

  /* TYPE */
  --pbs-font-display: "Space Grotesk", "Archivo", "Prompt", -apple-system,
                      BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pbs-font-body:    "Inter", "Karla", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pbs-font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* v1.1 type-scale ratification (M3-S126-Q, 2026-06-12): "Confident" scale */
  --pbs-fs-eyebrow:   clamp(0.78rem, 0.74rem + 0.21vw, 0.89rem);
  --pbs-fs-body:      clamp(1.125rem, 1.09rem + 0.14vw, 1.22rem);
  --pbs-fs-lead:      clamp(1.28rem, 1.17rem + 0.51vw, 1.625rem);
  --pbs-fs-h3:        clamp(1.47rem, 1.3rem + 0.74vw, 1.97rem);
  --pbs-fs-h2:        clamp(2.125rem, 1.77rem + 1.57vw, 3.19rem);
  --pbs-fs-h1:        clamp(2.94rem, 2.04rem + 3.98vw, 5.625rem);
  --pbs-fs-h1-hero:   clamp(2.85rem, 1.6rem + 3.85vw + 0.9vh, 4.9rem);
  /* Support tier (v1.1): fixed support sizes now tokened */
  --pbs-fs-small:     clamp(1.03rem, 1rem + 0.14vw, 1.125rem);  /* reading-support text */
  --pbs-fs-fine:      0.9rem;                                   /* fine print / legal */
  --pbs-fs-btn:       1.125rem;                                 /* button labels + inputs */
  --pbs-fs-card:      1.47rem;                                  /* card/tile titles */
  --pbs-fs-price:     2.25rem;                                  /* price figures */

  --pbs-fw-regular:   400;
  --pbs-fw-medium:    500;
  --pbs-fw-semibold:  600;
  --pbs-fw-bold:      700;
  --pbs-lh-tight:     1.04;   /* big display headlines */
  --pbs-lh-snug:      1.25;   /* subheads */
  --pbs-lh-body:      1.6;    /* running text */
  --pbs-ls-tight:     -0.02em;/* display tracking */
  --pbs-ls-wide:      0.14em; /* eyebrow / overline tracking */

  /* SPACING (8px base scale) */
  --pbs-space-1:  0.25rem;  /*   4px */
  --pbs-space-2:  0.5rem;   /*   8px */
  --pbs-space-3:  0.75rem;  /*  12px */
  --pbs-space-4:  1rem;     /*  16px */
  --pbs-space-5:  1.5rem;   /*  24px */
  --pbs-space-6:  2rem;     /*  32px */
  --pbs-space-7:  3rem;     /*  48px */
  --pbs-space-8:  4rem;     /*  64px */
  --pbs-space-9:  6rem;     /*  96px */
  --pbs-space-10: 8rem;     /* 128px */

  /* LAYOUT */
  --pbs-container:     1200px;
  --pbs-container-pad: clamp(1.25rem, 0.5rem + 3.5vw, 3rem);
  --pbs-section-pad:   clamp(3.5rem, 2rem + 6vw, 7rem);

  /* RADIUS / ELEVATION */
  --pbs-radius-sm: 4px;
  --pbs-radius:    8px;
  --pbs-radius-lg: 14px;
  --pbs-radius-pill: 999px;
  --pbs-shadow-sm: 0 1px 2px rgba(0,0,0,0.20);
  --pbs-shadow:    0 10px 30px rgba(0,0,0,0.35);
  --pbs-shadow-cta:0 8px 24px rgba(242,92,5,0.32);

  /* MOTION */
  --pbs-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --pbs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pbs-dur-fast:    140ms;
  --pbs-dur:         260ms;
  --pbs-dur-slow:    420ms;
  --pbs-enter-dur:   820ms;
  --pbs-enter-move:  26px;
  --pbs-enter-step:  110ms;

  /* LINKS */
  --pbs-link-underline: var(--pbs-action);
  --pbs-link-thickness: 2px;
  --pbs-link-offset:    0.15em;
  --pbs-link-wash:      rgba(242,92,5,0.10);
}

The Core Web Vitals budget

The JavaScript weight budget

• Critical-path JavaScript budget = 0. Nothing blocks first paint. Ever.
• Deferred JavaScript cap: about 30KB gzipped worst case (engine + driver + library together). A typical page using reveals and smooth scroll but no crafted timeline ships about 5KB.
• Critical-path CSS rules: tokens, base/layout, links, image frames, and ALL reveal/entrance CSS ship inline, render-blocking, at parse, from one source. Layout or reveal rules in a deferred stylesheet apply after first paint and cause visible shift; a previous build measured CLS of 0.08 to 0.15 from exactly that, and a naive flip of all CSS to external-plus-deferred produced CLS of 0.47. Over-include critical CSS generously: extra inline bytes never cause shift, missing rules do.
• Verify in the honest environment. Layout shift is verified with a real throttled browser run plus an above-fold visibility probe (lab simulators over-report on some stacks, and shift metrics alone miss invisible-content failures). Never claim the budget is met from a fast local render.