MANDATE / DESIGN SYSTEM
Clarity,
by design.
A shared language for the actions that matter. Built to stay calm, precise, and unmistakably MANDATE.
Identity
One master mark. Five connected products.
Product signatures belong to the same family. The master mark stays consistent across every surface.
Typography
Manrope for the interface. A monospaced face for code.
Clarity comes first.
Protection, without friction.
Know what’s on the other side of every request. Give real users a clear path, and keep unwanted traffic out.
0123456789 · 24,000
Color
Warm charcoal and ivory. Or white, ice, and graphite.
Showing Warm dark
Select a swatch to copy its current value.Copy the selected value using your device’s copy command.
Dark mode stays warm and neutral. Glacial introduces cobalt for emphasis. Text labels always carry meaning alongside color.
Components
Familiar controls, with deliberate details.
Actions
Clear hierarchy, visible focus, and comfortable targets.
Example field. Nothing entered here is saved.
Text selection
Select this sentence. The selection inverts the canvas and text colors, so your place stays clear in either theme.
Icons
A single arrow family, in every direction.
24 × 24 grid. Rounded strokes. A consistent shape for links, navigation, and disclosures.
Motion
Small movements that explain what changed.
Open a disclosure
Content expands gently. The arrow follows the state. Closing reverses the movement, and reduced-motion preferences are respected.
Code
Readable examples. Exact, copyable source.
// Next.js App Router · managed SDK preview
// Run mandate login once to connect your app.
import { withMandateManaged } from "@mandate-security/node/next";
// Keep your existing signupHandler and authentication.
export const runtime = "nodejs";
export const POST = withMandateManaged(signupHandler);
// Configure routes and workflows in Policy Studio.
// Publish an Observe release before sending traffic.
// Policies apply to handlers connected to MANDATE.Managed SDK preview examples. Product availability is described in the data sheet.