CDN-hosted brand tokens, CSS, fonts, and SVG assets. Pair with the npm package @autobridgesystems/design-system for typed token access in JS/TS consumers.
Compose the tokens into a full-screen product surface: one cohesive background, translucent tiles, display numerals, and the gradient reserved for a single brand moment. The demos below render with the same v2 CSS you load, so this is exactly what ships. Full guide and the trap list: PATTERNS.md.
12
9
$4.2M
.surface-app cohesive shell + .glass-tile KPI tiles + .num-display numerals. Pair with .rail-panel for the hover-expand nav.
.btn-grad ships its own keyboard focus ring as of v2.1.0 (navy on light, cyan on dark).
<link rel="stylesheet" href="https://design.autobridgesystems.com/latest/css/colors_and_type.v2.css"> <link rel="icon" href="https://design.autobridgesystems.com/latest/assets/abs-favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="https://design.autobridgesystems.com/v2/css/colors_and_type.v2.css">
<link rel="stylesheet" href="https://design.autobridgesystems.com/v2.1.0/css/colors_and_type.v2.css">
echo "@autobridgesystems:registry=https://npm.pkg.github.com" >> .npmrc
npm install @autobridgesystems/design-system
# In code:
import { tokens, colors, gradients } from "@autobridgesystems/design-system";
import "@autobridgesystems/design-system/css";
/latest/assets/abs-cover.png
/latest/assets/abs-favicon.svg
/latest/assets/abs-logo-gradient.png
/latest/assets/abs-profile.png
/latest/assets/sidebar_logo.svg/latest/css/colors_and_type.v2.css/latest/fonts/BricolageGrotesque-Variable.woff2/latest/fonts/SourceSansPro-Bold.woff/latest/fonts/SourceSansPro-Bold.woff2/latest/fonts/SourceSansPro-Regular.woff/latest/fonts/SourceSansPro-Regular.woff2/latest/fonts/SourceSansPro-Semibold.woff2/latest/index.d.ts/latest/index.js/latest/tokens.d.ts/latest/tokens.js
Cache policy: /latest/ revalidates every 5 minutes (synced mode);
versioned paths (/v2.1.0/, /v2/) are
immutable and cached for 1 year. Pick the URL that matches your update appetite.