--- version: alpha name: Alice website: "https://alice.io" description: A white-canvas AI-safety enterprise brand (formerly ActiveFence) anchored on near-black ink #0f172a and a deep-navy primary CTA — the load-bearing trust signal across every "Get a Demo" call-to-action. Type runs Inter at weights 400/500/600/700 across a generous display ramp (hero h1 at 56px), with the wordmark and product names (WonderBuild, WonderFence, WonderCheck) acting as the only chromatic moments. Slate hairlines (#e2e8f0) carry every card and divider edge, and the system commits to pure #ffffff canvas rather than a tinted off-white — the page reads as enterprise security, not consumer SaaS. Built on Webflow with a restrained two-color voltage (navy + slate) and zero gradients. seo: title: "Alice Design System for React — Navy #0f1729, Inter, 22 components" metaDescription: "Alice's AI-safety design system as a DESIGN.md file. Navy #0f1729, white canvas, Inter, 21 colors, 22 components. For React, Next.js, and AI tools." highlights: - "Enterprise-trust voltage — deep navy #0f1729 carries every primary CTA and the wordmark, with no chromatic secondary accent on the marketing surface" - "Pure-white canvas — #ffffff floor without warm or cool tint, the signature move that separates enterprise trust from consumer SaaS in the AI category" - "Hairline elevation over shadow — 1px slate borders (#e2e8f0) carry every card; the page contains effectively no box-shadow on flat surfaces" - "Three-product taxonomy — WonderBuild (pre-launch testing), WonderFence (runtime guardrails), WonderCheck (red-teaming) appear as the only product-specific moments in chrome" - "Built on Webflow — opaque CSS pipeline means tokens here approximate the rendered output; explicit hex values may differ slightly from the canonical Webflow style guide" tags: - "AI & LLM Platforms" lastUpdated: "2026-05-14" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Alice (formerly ActiveFence) is an AI security, safety, and trust platform shipping three products under the Wonder line — WonderBuild for pre-launch testing, WonderFence for runtime guardrails, and WonderCheck for ongoing red-teaming. The marketing site reflects the category posture: a pure-white canvas at `#ffffff`, near-black ink at `#0f172a`, and a single load-bearing navy `#0f1729` for every primary CTA. There is no warm cream, no cool blue tint, no atmospheric gradient — the page commits to a neutral that reads as enterprise security rather than consumer software. This page packages the system into a single DESIGN.md file written to the Google Labs spec. Inside: 21 color tokens grouped into brand, surface, ink, hairline, and semantic families; 12 type tokens running Inter (Webflow's default geometric sans) across a 64-12px ramp at weights 400 through 700; a 6-step rounded scale topping out at a 12px card and 9999px pill; an 8-step spacing scale on a 4px base; and 22 component definitions covering the white top-nav, navy primary button, product-feature card, callout banner, code-snippet panel, and the white footer that holds the canvas all the way down. Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Alice's specific posture — pure-white canvas, navy CTA, hairline borders without shadow, Inter at modest weights — instead of generating a generic AI-platform dashboard. Reference the tokens directly: every hex, font, radius, and spacing value is a quoted scalar you can paste into Tailwind config, CSS variables, or your component library. Alice is worth studying because it demonstrates the AI-security visual posture: enterprise trust signals override category convention. Where peers lean on warm cream (Anthropic), mint accent (OpenAI), or orange-on-black (Mistral), Alice holds the line at navy-on-white. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://alice.io" title: "Alice — official site" description: "AI security, safety, and trust platform — WonderBuild, WonderFence, and WonderCheck." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Alice's primary brand color?" answer: "Alice's brand voltage is a deep navy near `#0f1729` — the load-bearing fill on every primary CTA (\"Get a Demo\"), the wordmark, and section accents. White text (`#ffffff`) sits on the navy at full contrast — there is no off-white inversion. The navy is paired with pure-white canvas (`#ffffff`) and near-black ink (`#0f172a`); together the three tokens carry roughly 95% of the marketing surface. There is no secondary chromatic accent, no atmospheric gradient, and no tinted hover state on neutral surfaces." - id: "dark-mode" title: "Does Alice have a dark mode?" answer: "No — the marketing site is light-only. Canvas is pure `#ffffff` with `#f8fafc` (slate-50) for section bands, and ink runs at `#0f172a`. The product UI surfaces (signed-in dashboards for WonderBuild and WonderFence) may honor a system dark preference, but the marketing pages render light-only. The DESIGN.md captures the marketing light theme — dark-mode token mappings are listed in the Known Gaps section." - id: "typography" title: "What typography does Alice use, and what should I use if Inter isn't available?" answer: "The system runs Inter (the open-source geometric sans, free on Google Fonts) for every display and body role at weights 400, 500, 600, and 700. Display caps at weight 700 on the 56px h1 — the brand never reaches for 800+ display weights that consumer SaaS systems use for marketing voltage. Inter is the most-deployed open sans for tech marketing sites; if Alice's exact Webflow font swaps in a paid alternative, IBM Plex Sans or GT Walsheim are the closest substitutes. Body holds at 16px / 400 with line-height 1.55." - id: "trust-aesthetic" title: "Why does Alice feel so 'enterprise' compared to other AI brands?" answer: "It's deliberate category positioning. AI-safety buyers are CISOs and platform-trust teams, not individual developers — they evaluate vendors by neutrality and seriousness. Where Anthropic warms the canvas to cream and OpenAI accents with mint, Alice holds a navy-and-white palette that reads as enterprise security software (closer to Splunk or Recorded Future than to Cursor or Replit). The restraint is the brand positioning. The Wonder product names (WonderBuild, WonderFence, WonderCheck) are the only place playfulness enters the chrome." - id: "wonder-products" title: "What are WonderBuild, WonderFence, and WonderCheck?" answer: "Alice's three-product taxonomy: WonderBuild for pre-launch testing of GenAI applications, WonderFence for runtime guardrails (the productized policy enforcement layer), and WonderCheck for ongoing red-teaming against foundation models. The three names share the Wonder- prefix and appear as the only product-specific moments in the marketing chrome — each gets its own feature card on the homepage with a small icon and a one-paragraph value prop. The icons hold at the slate hairline color rather than picking up a per-product chromatic accent." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own AI-safety platform?" answer: "Yes — the file is structured for AI tools like Claude, Cursor, and GitHub Copilot to read. Point the agent at the spec and ask for a React + Tailwind landing page, and it will reproduce Alice's posture: pure-white canvas, navy primary CTA, hairline borders without shadow, Inter at weight 700 on the 56px hero, restrained two-color voltage. Every color, type style, radius, and spacing value is a quoted hex or pixel value you can paste into Tailwind config or CSS variables. The 22 component definitions cover buttons, product-feature cards, callout banners, code-snippet panels, and the top-nav." colors: primary: "#0f1729" primary-hover: "#1e293b" on-primary: "#ffffff" ink: "#0f172a" ink-strong: "#020617" body: "#334155" muted: "#64748b" muted-soft: "#94a3b8" canvas: "#ffffff" surface-soft: "#f8fafc" surface-card: "#f1f5f9" surface-strong: "#e2e8f0" hairline: "#e2e8f0" hairline-strong: "#cbd5e1" link: "#2563eb" link-hover: "#1d4ed8" accent-emerald: "#059669" surface-dark: "#0f172a" on-dark: "#f8fafc" success: "#16a34a" warning: "#ca8a04" error: "#dc2626" typography: display-xl: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 1.1 letterSpacing: "-1.4px" display-lg: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.15 letterSpacing: "-0.8px" display-md: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 1.25 letterSpacing: "-0.4px" display-sm: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 22px fontWeight: 600 lineHeight: 1.3 letterSpacing: "-0.2px" title-md: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 body-sm: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: "0.2px" caption-uppercase: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: "1.4px" button-md: fontFamily: "Inter, -apple-system, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1 letterSpacing: 0 code-md: fontFamily: "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 rounded: none: "0px" sm: "4px" md: "6px" lg: "8px" xl: "12px" full: "9999px" spacing: xxs: "2px" xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" borderColor: "{colors.hairline}" padding: "16px 32px" height: "72px" nav-link: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "6px 10px" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "12px 20px" height: "44px" border: "0" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" borderColor: "{colors.hairline-strong}" rounded: "{rounded.md}" padding: "12px 20px" height: "44px" button-ghost: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "10px 14px" border: "0" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" borderColor: "{colors.hairline-strong}" rounded: "{rounded.md}" padding: "10px 14px" height: "44px" text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.primary}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "96px 32px" section-band: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "64px 32px" product-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" borderColor: "{colors.hairline}" rounded: "{rounded.xl}" padding: "32px" feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" borderColor: "{colors.hairline}" rounded: "{rounded.lg}" padding: "24px" testimonial-card: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" borderColor: "{colors.hairline}" rounded: "{rounded.lg}" padding: "32px" logo-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.caption}" padding: "16px" badge-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: "4px 10px" badge-uppercase: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.caption-uppercase}" borderColor: "{colors.hairline}" rounded: "{rounded.full}" padding: "4px 12px" callout-banner: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink-strong}" typography: "{typography.body-sm}" borderColor: "{colors.hairline-strong}" rounded: "{rounded.md}" padding: "16px 20px" cta-band-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.xl}" padding: "64px 48px" code-snippet: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.code-md}" rounded: "{rounded.lg}" padding: "20px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-sm}" borderColor: "{colors.hairline}" padding: "64px 32px" --- ## 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 `` 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.