Single reference for company and product surfaces: INKLINE tokens (named after the ink-on-dark technical aesthetic),
typography, motion, accessibility, and paste-ready CSS. Canonical tokens in the repo live in
assets/site-global.css.
When skinning another app (web or PDF-adjacent HTML), run through this list so it reads as Rumble Built without drifting.
data-theme="dark" or light on <html> and paste tokens from Portable CSS.Built by Rumble class .built-by-rumble where a product should feel “from the house.”prefers-reduced-motion for grids, scan lines, and canvas effects.Customer-facing site and contracts use the incorporated name. Product codenames may differ until launch.
| Element | Use |
|---|---|
| Company | Rumble Built, Inc. |
| Domain | rumblebuilt.com |
| House brand line | Solutions that go beyond (marketing hero contexts) |
| Email pattern | info@rumblebuilt.com (adjust mailbox per team) |
| Product naming | Shipped products get customer-facing names on Products; internal codenames stay internal until beta. |
SVG lockups for print, slides, and apps live under assets/logos/.
The marketing hero treatment uses Outfit: “Rumble” as stroked outline, “Built” solid—see index.html (home).
For raster or deck export, open wordmark export.
Print color lockup sometimes uses navy #111827 and teal #00A38D per logo README; digital INKLINE UI uses the brighter cyan and violet tokens below for glow and contrast on screen.
Use CSS variables—not hard-coded hex—in product code so light and dark themes stay paired. Toggle Mode (top right) to preview light values.
| Token | Dark default | Role |
|---|---|---|
--void | #020304 | Page background |
--graphite | #0a0c10 | Panels, inputs, elevated surfaces |
--ink | #f1f5f9 | Primary text |
--muted | #94a3b8 | Secondary text, placeholders |
--line | #1a1f2a | Borders, dividers |
--cyan | #00e5c8 | Links, labels, primary fills on dark |
--violet | #8b5cf6 | Gradient CTAs, secondary glow |
--magenta | #f472b6 | Tertiary accent, special callouts |
--strip-cta-fg | #f8fafc (dark) | Text on saturated cyan fills |
Dim tokens (--cyan-dim, --violet-dim, --magenta-dim) back washes and bands without maxing saturation.
Outfit (300–700) is the brand sans: headlines, body, marketing prose. JetBrains Mono is the technical voice: labels, navigation, code, IDs, timestamps.
Body copy stays in Outfit for warmth and readability. Keep line length near 60 characters in dense docs.
JETBRAINS MONO — SECTION LABEL · META · 0.58–0.78REM
Google Fonts link (already on marketing pages):
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet" />
Glass panels, monospace labels, and violet-gradient CTAs match the portal and public site. Secondary actions stay outline / ghost.
Backdrop blur, graphite-tinted fill, 1px var(--line) border.
Built by Rumble
Inline text links use cyan with a soft underline: jump to portable CSS.
Optional layers: slow-moving grid, SVG mesh with breathing nodes, subtle scan line, optional digital rain (assets/digital-rain.js). Tools and dense apps may omit atmosphere; marketing pages use it.
prefers-reduced-motion: reduce.Direct, evidence-led, production-minded. Prefer concrete verbs (ship, measure, handoff, rollback) over hype. Name constraints and tools when writing for technical readers.
:focus-visible ring uses cyan in dark theme and violet in light (see site-global.css).Copy into a global stylesheet or component layer. Pair with data-theme on the document root. For the full shared bundle (footer, cookie banner, product helpers), link or vendor assets/site-global.css from this repo instead.
Theme persistence example: localStorage key rbs-inkline-tech-theme with values dark | light (same as public pages).