What is Alice's primary brand color?

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.

Does Alice have a dark mode?

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.

What typography does Alice use, and what should I use if Inter isn't available?

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.

Why does Alice feel so 'enterprise' compared to other AI brands?

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.

What are WonderBuild, WonderFence, and WonderCheck?

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.

Can I use this DESIGN.md to build my own AI-safety platform?

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.

Alice Design System

Alice's AI-safety design system as a DESIGN.md file.

About Alice DESIGN.md

Curated by Dov AzencotUpdated May 14, 2026Source alice.io

AI & LLM Platforms

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.

What makes it distinct

Enterprise-trust voltagedeep 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 shadow1px slate borders (#e2e8f0) carry every card; the page contains effectively no box-shadow on flat surfaces
Three-product taxonomyWonderBuild (pre-launch testing), WonderFence (runtime guardrails), WonderCheck (red-teaming) appear as the only product-specific moments in chrome
Built on Webflowopaque CSS pipeline means tokens here approximate the rendered output; explicit hex values may differ slightly from the canonical Webflow style guide

Live at alice.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

alice.io

Explore Alice

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Alice design system FAQ

Common questions about Alice's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Alice — official site

AI security, safety, and trust platform — WonderBuild, WonderFence, and WonderCheck.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.