ComplianceOne Design System

ComplianceOne Design System mockup preview
Click to expand

ComplianceOne is a strict, audit-trail-aware design system purpose-built for regulatory compliance and audit management platforms. Every design decision favors clarity, traceability, and zero ambiguity. The flat, borderless aesthetic with sharp corners reinforces the seriousness of compliance workflows while keeping dense regulatory data accessible.

Primary#1E40AF
Secondary#DC2626
Tertiary#059669
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Zilla Slab · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Zilla Slab · 22px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Zilla Slab · 18px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Zilla Slab · 15px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallInter · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoFira Code · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

ComplianceOne is a strict, audit-trail-aware design system purpose-built for regulatory compliance and audit management platforms. Every design decision favors clarity, traceability, and zero ambiguity. The flat, borderless aesthetic with sharp corners reinforces the seriousness of compliance workflows while keeping dense regulatory data accessible.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus CompliantStatus At RiskStatus Non-CompliantStatus Under Review

Lists

Default

Hover

Selected

Checkboxes

Default

Checked

Indeterminate

Radio Buttons

Default

Selected

Tooltips

Default

Elevation & Depth

sm
md
lg
focus

Do's & Don'ts

Do

Use monospace font for all regulation codes, policy IDs, and audit reference numbers.
Keep sharp 0px corners consistently across every component — no exceptions.
Include timestamps and user attribution on every state change for audit trail integrity.
Use strong contrast ratios (minimum WCAG AAA) for all critical compliance text.
Present regulatory citations in monospace with clear reference links.
Design every form with required field indicators and inline validation.

Don't

Use decorative colors or gradients; compliance interfaces demand clarity over aesthetics.
Auto-dismiss error or warning banners — users must explicitly acknowledge compliance issues.
Combine secondary red and tertiary green without icons — always pair color with a supporting icon for accessibility.
Allow bulk actions on compliance items without a confirmation step.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 5.5 KB
Downloads 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/complianceone and implement it in my code

Don't have the MCP? Install it here