Alice Design System

Overview

Alice (formerly ActiveFence) is an AI security, safety, and trust platform — the marketing surface reflects the category posture: pure white canvas at {colors.canvas} (#ffffff), near-black ink at {colors.ink} (#0f172a), and a single load-bearing navy {colors.primary} (#0f1729) for every primary CTA. The brand commits to neutral enterprise palettes rather than the warm-cream and chromatic-accent vocabulary of consumer AI peers (Anthropic, OpenAI, Mistral). There is no atmospheric gradient, no secondary chromatic accent, and no tinted hover state — every interactive surface either holds white or fills navy. The product taxonomy (WonderBuild, WonderFence, WonderCheck) is the only place playful naming enters the chrome.

Trust-stack chrome. Where most AI-product brands lean on warm cream, bright accent, or playful illustration to soften the engineering, Alice holds an enterprise security-software posture — closer to Splunk, Recorded Future, or Tessian than to Cursor or Replit. The decision is positioning, not aesthetics: AI-safety buyers are CISOs and platform-trust teams who evaluate vendors by neutrality and seriousness. The white-and-navy palette is the brand promise rendered as design tokens.

Type carries the second decisive voice. Inter (Webflow's default geometric sans, free on Google Fonts) runs the entire hierarchy at weights 400, 500, 600, and 700 — display never climbs past 700 even on the 56px hero, which keeps the type feeling considered rather than billboard-loud. The display ramp pulls negative tracking aggressively (-1.4px at 56px, -0.8px at 40px) to compress headlines optically, a move that signals technical precision more than friendliness.

Key Characteristics:

• A single brand voltage at {colors.primary} (#0f1729) — deep navy that carries every primary CTA and the wordmark. No secondary chromatic accent on the marketing surface.
• Pure white canvas ({colors.canvas} — #ffffff) with no warm or cool tint. The commitment to true #ffffff separates Alice from the warm-cream of Anthropic and the off-white of OpenAI.
• Hairline elevation over shadow — 1px slate {colors.hairline} (#e2e8f0) borders carry every card; the page contains effectively no box-shadow on flat surfaces.
• Inter sans across the entire hierarchy at weights 400-700. Display caps at 700 even on the 56px hero, where most fintech and enterprise systems push display to 800+ for marketing voltage.
• Section bands alternate between {colors.canvas} and {colors.surface-soft} (#f8fafc) — the only rhythm change on a long marketing page.
• White footer that holds canvas all the way down — every other enterprise security brand inverts the footer to dark navy. Alice does not.
• Three-product taxonomy (WonderBuild, WonderFence, WonderCheck) gets equal-weight feature cards on the homepage with a small icon (slate-color, not tinted per-product) and a one-paragraph value prop.

Known Gaps

• Webflow CSS opacity: The exact hex values, font-weight numerals, and radius scale documented here are inferred from public branding plus reasonable Webflow defaults. The site's compiled CSS is externalized via cdn.prod.website-files.com, which a headless HTML fetch cannot read. A live browser inspection (DevTools → Computed Styles) is the authoritative ground truth — minor hex deltas should be expected on the navy primary and the slate hairline.
• Custom typeface possibility: Inter is documented here as the working assumption based on Webflow defaults and the rendered character shapes. Alice may ship a paid custom face (GT Walsheim, IBM Plex Sans, Söhne) via Webflow's font hosting that isn't surfaced in the page's <link> tags. The fallback stack documented in {typography.*} tokens handles both cases.
• Per-product chromatic accents: WonderBuild, WonderFence, and WonderCheck might each carry a subtle accent (a stroke tint on the product icon, a hover color) inside the signed-in product chrome. The marketing page treats all three icons at the slate hairline color — accents would only emerge in the product UI which is out of scope here.
• Dark mode product chrome: The signed-in WonderBuild and WonderFence dashboards may honor a prefers-color-scheme: dark preference with a navy {colors.surface-dark} canvas. The marketing pages render light-only and that's what's captured.
• Hover and focus combinations: Per the global no-hover documentation policy, only default and pressed states are extracted. The actual hover-state hex (likely {colors.primary-hover} — #1e293b) is documented as best-guess; focus rings on text inputs may differ.
• Pricing and gated-content chrome: Alice does not publish pricing publicly — the system tokens here cover marketing, product feature pages, and the contact-sales conversion path. Internal billing and gated-customer surfaces are not represented.
• Webflow form chrome: Demo-request forms rendered via Webflow's form widget carry their own input styling (focus state, validation outlines) that may diverge from the {component.text-input} token captured here.
• Re-brand transition assets: Alice rebranded from ActiveFence — some surfaces (legal pages, blog archives, press releases) may still render the older ActiveFence wordmark and accompanying palette. This DESIGN.md captures the current Alice marketing surface only.