One crimson accent, one neutral ink-ramp, one system-font stack, one tort-hedged compliance-officer voice — shared by PixelProof, EntryProof, and TariffWatch. This page documents exactly what ships in production today, pulled from the live CSS and copy, not an aspirational mood board.
Every product shares the same two-layer system: a dark neutral ink-ramp (background, panels, borders, text) defined once in app/globals.css, plus a single crimson accent token that each product imports as its own CSS custom property (--pp-accent in PixelProof, --tw-accent in TariffWatch, --ss-accent in EntryProof — same hex value, three names for historical reasons tied to each product's original build ticket).
Why two crimson shades exist: a WCAG AA accessibility sweep (2026-08-09) found that white button text on the raw #ee2a3c accent measured ~4.17:1 contrast — under the 4.5:1 threshold for normal-weight 15px button labels. Rather than dim the accent everywhere (badges, borders, and text-on-dark links all already passed AA at the original shade), we added a darkened button-only shade, #d6202f (~5.1:1 with white text), used exclusively for filled-button backgrounds. Every other surface keeps the brighter #ee2a3c.
One system-font stack, no webfont download, everywhere: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif. Monospace (code snippets, PDF report tables) uses 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace. This is a deliberate build-risk decision, not an oversight — see the header comment in app/meta-monitor/meta-monitor.css: "Plain CSS, not Tailwind — zero new build-dependency risk on a deploy Andy can't babysit." The same logic keeps type off a Google Fonts request.
Hard rule, not a preference: all form inputs are set to font-size: 16px minimum. iOS Safari auto-zooms on focus for any input under 16px — documented across the portfolio (F9, P1 Aug 9 2026 audit) as "the single most common 'feels broken on iPhone' bug." Never ship a form input below 16px.
| Token | Value | Used for |
|---|---|---|
| Container max-width | 880–1040px | Page content wrapper, varies slightly per product |
| Container side padding | 20px | .pp-container / .tw-container / .ss-container / .dep-container |
| Card / panel radius | 8–14px | Buttons 8px, inputs 8px, cards/checker widgets 10–14px, popups 14px |
| Badge / pill radius | 999px | Hero badges, tier badges, save badges |
| Section vertical rhythm | 32–40px top/bottom | .pp-section, border-top hairline between sections |
| Hero vertical padding | 40px top, 28–32px bottom | Every product landing hero |
| Tap target minimum | 44px | All buttons and interactive controls (accessibility floor) |
The live products use borders (1px --border) as the primary depth cue on the dark surface rather than drop shadows — a shadow reads poorly against a near-black background. The one shadow-like effect in production is a subtle crimson glow used sparingly on countdown/urgency tiles: background: rgba(238, 42, 60, 0.06–0.08) with a --*-accent-dim border, giving a "warm highlight" without a literal box-shadow. Reserve it for time-pressure and urgency surfaces (countdown clocks, exit-intent popups, ad-library urgency tiles) — using it everywhere would dilute the signal.
None. No icon package (no lucide-react, no Font Awesome, no Heroicons) ships in this codebase today. Every visual mark is either a single Unicode/HTML glyph (✓, +, −, a play triangle) or a colored initial-letter square — see "Logo & marks" below. This keeps bundle size and build-dependency surface at zero for iconography. If a future pick needs a real icon set, evaluate inline SVG sprite (no runtime package) before adding a component library.
No commissioned image logo exists for the parent brand or any product today — this is provisional, formalizing the pattern already shipping rather than inventing new art (matches the $0 Andy spend, fully derivable principle set in the prior DDH/DonePins brand system). Each product is a colored initial-letter square, crimson fill, white text, 8px radius, used consistently in app/components/PortfolioFooterStrip.tsx.
Downloadable SVG variants (light/dark), a favicon set, and the raw color tokens are in /brand/assets.zip — see Assets below. All files are marked provisional until a commissioned logo replaces the initial-square pattern.
Compliance-officer, Bloomberg-shape, tort-hedged. Every product states a specific, dated regulatory or platform deadline in plain numbers, never vague "compliance platform" language — and every monitoring or financial claim carries a hedge that keeps the product a data/workflow tool, not a certification, legal-advice, or guarantee service (Google Perfection Standard v2 §14).
"Broken pixels typically cost merchants $500-4K/wk in lost attribution and mis-optimized ad spend (industry-observed range, not a PixelProof guarantee — we monitor, we don't promise financial outcomes)." — lib/pixelproof/constants.ts, LOSS_FRAME_COPY
"Every Digital Empire product is a data and workflow tool that estimates or monitors compliance-relevant signals from publicly available data. None of these products is a licensed customs broker, a filer of record, a legal-advice service, or a compliance certification." — app/products/page.tsx
The founder voice (Andy) signs refund and guarantee copy directly — "email hello@citationsafe.com and I'll refund your first paid month myself, no questions asked" — because a named founder reads as more accountable than an anonymous support inbox, without ever promising an outcome the product can't control.
State a real, dated deadline: "the CPSC's mandatory eFiling rule (live since Jul 8, 2026)."
Hedge financial claims: "typically cost merchants $500-4K/wk (industry-observed range, not a guarantee)."
Name the founder on guarantees: "email hello@citationsafe.com and I'll refund it myself."
Disclose auto-renewal next to the price, with the real dollar amount substituted in.
Say "compliance platform" or other vague category language with no dated trigger event.
Promise a financial outcome: never "save $2-4K" as an explicit, un-hedged promise (retired post-legal-audit).
Imply certification: never call a checker result a "pass," "certified," or "guaranteed accepted."
Introduce a fourth crimson shade, a second font stack, or an icon package without updating this page first.
Logo mark variants (SVG, light + dark background), a favicon set, wordmark text specs, and a JSON color token file — all clearly marked provisional pending a commissioned logo. Free to use by press and partners referencing Digital Empire, PixelProof, EntryProof, or TariffWatch.
Download brand assets (.zip)See also the companion Design System reference for component props, interaction states, and accessibility notes.