Internal · Design system
Single source of truth for Aona’s design language across the marketing site and the product dashboard — tokens, primitives, components, and editorial rules in one place.
Six pieces wire together. Edit any of them and the rest follow.
/DESIGN.md (repo root)Written one-page guide. Voice, tokens, type, layout, buttons, status, icons, workflow.
src/lib/design-tokens.tsSingle source of truth: brand colours, slate scale, status, type, layout, motion, radius, forbidden patterns.
tailwind.config.jsTokens exposed as Tailwind classes (bg-brand-pink, text-brand-ink, ...).
src/components/editorial/DotPill · AccentText · PageHero · StatsBar · Timeline · CTASection · PrimaryButton + SecondaryButton.
src/components/icons/AonaIcon.tsx30 brand-consistent line glyphs. Replaces every generic emoji.
scripts/lint-slop.mjsStatic lint with 16 named rules. Run it before shipping. CI guard rail.
Mono slate body + ONE pink accent. Anything outside this palette is a regression.
Use these for backgrounds, borders, body text. Never hard-code other slate hexes.
Light-tone tag colours for badges. Don't use bright primaries as fills. Tight uppercase tracked typography reads as a status, not just a tag.
Pre-baked severity chip used inside template cards, comparison rows, and regulation cards. Maps level=critical/high/medium/low/info/neutral to the canonical status palette so red/amber/green never get rolled inline.
Source: src/components/editorial/SeverityBadge.tsx. Reach for this anywhere a row needs a severity tag.
Tailwind's 4px scale. Use these for padding, gaps, and margins. Don't reach for arbitrary `p-[19px]`.
p-14pxp-28pxp-312pxp-416pxp-624pxp-832pxp-1040pxp-1248pxp-1664pxp-2080pxp-2496pxThree shadow tones for cards and overlays. Stay away from puffy multi-layer drops.
Dashboard / hero glow uses the third token: 0 30px 80px -30px rgba(40,20,80,0.22). Buttons get an inner highlight: inset 0 1px 0 rgba(255,255,255,0.18).
Five layers. Don't invent new ones inline.
z-0 base content z-10 section content above decorations (radial glows) z-20 sticky in-page nav (e.g. /styleguide SubNav) z-30 site Header dropdowns z-40 TopBanner (always above the page) z-50 Header (fixed)
Tailwind defaults plus the custom xs (475px). Mobile-first.
xs 475px (custom) sm 640px md 768px lg 1024px xl 1280px 2xl 1536px
Most layouts need only `sm` and `md`. Use `lg` for split-column heroes and `xl` only when you have a max-width 7xl grid.
Use these named widths so every section lines up.
maxWidthHero max-w-4xl // page heroes maxWidthSection max-w-5xl // section content maxWidthPage max-w-7xl // very wide grids / footer sectionPaddingY py-14 md:py-20 heroPaddingTop pt-36 pb-14 md:pt-44 md:pb-24
Two durations only. Never use hover:scale-* on CTAs.
fast 150ms base 300ms ease cubic-bezier(0.32, 0.72, 0, 1)
Pill (chips), card (rounded-2xl), cardLg (rounded-3xl), control (buttons + inputs).
pill 9999px card 1rem cardLg 1.5rem control 0.75rem hairline 0.375rem
Design tokens for the product dashboard — colours, spacing, shadows, typography, and interaction states. Exported from the dashboard design system.
Tokens that everything is built from — colors, typography, spacing, radii, shadows, icons.
const color = "#6412A6";Wordmark on light + dark surfaces. PNG/WebP available; prefer WebP. Don't recolour.
/images/logos/aona-logo.{webp,png}
/images/logos/aona-logo-light.{webp,png}App icon / favicon: see public/favicon.ico and public/apple-icon.png.
Manrope across the entire site. Weights below are loaded; the rest aren't.
/* tailwind.config.js */
fontFamily: {
sans: ["Manrope", "ui-sans-serif", "system-ui", ...],
}
/* usage */
className="font-bold" // 700
className="font-extrabold" // 800Live samples of the type scale at every step.
Display · 60
Heading 1 · 48
Heading 2 · 36
Heading 3 · 24
Heading 4 · 20
Body 16 · the lazy fox jumps over the slate hairline. Aona governs every AI tool your workforce uses.
EYEBROW · 11 small caps
One icon vocabulary for the site. Replaces every generic emoji. Inherits currentColor.
Brand-purple gradient illustrations for governance pillars and template categories. PNG-fill, not currentColor.
discovery
policy
risk
controls
monitoring
compliance
enablement
maturityMore in public/images/icons/ (template-*, industry icons). All use the canonical #8B5CF6 → #6412A6 gradient.
Logo, wordmark, and gradient treatments as used inside the product dashboard.
Logo, wordmark, and how to apply them across surfaces.
Aona
The marketing-site header. Theme-aware: light pages get the slate logo + dark nav text, dark pages get the inverse. Responsive: hover dropdowns for Solutions / Resources / Compliance on desktop, hamburger drawer on mobile.
Source: src/components/shared/Header.tsx. Pass isLightTheme={true} on light pages.
The canonical pill-shaped Book a demo CTA used in the site Header and across hero sections. Same fill as PrimaryButton, but rounded-full + arrow-up-right glyph. Lives in src/components/shared/BookDemoButton.tsx.
Secondary text+arrow link used after a primary CTA. Two variants: standard (purple) and hero (white on dark).
Source: src/components/shared/LearnMoreButton.tsx.
Hero-style closing CTA used on /home. Dark slate panel + brand-pink heading accent + dashboard illustration on the right.
Boost productivity with safe, trusted AI.
Source: src/components/shared/CallToActionArea.tsx. Self-contained — customise copy by editing the source.
Buttons, badges, cards, inputs, lists, tabs, dropdowns, avatars, and toasts as used inside the product dashboard.
Every component here maps 1:1 to a React component in src/components/ui.
button.tsxbadge.tsxinput · textarea · select · checkbox · switch · label · progress · sliderMust be a valid email.
card.tsx · default + 5 colored variantsUsed for most content containers across the dashboard.
of employees using AI
passed all checks
require review
in the last 30 days
awaiting approval
Users who had at least one tracked AI conversation in the selected window, divided by total active users.
avatar.tsx · UserAvatarPlatformLogo.tsx
breadcrumb · tabs · separator · navigation-menutable.tsx · table-pagination.tsxUsage across the organization in the last 30 days
| Platform | Users | Conversations | Status | Last activity | Trend | ||
|---|---|---|---|---|---|---|---|
|
642 | 5,820 | Active | 2 min ago | 12% | ||
C |
418 | 4,310 | Active | 11 min ago | 24% | ||
|
287 | 2,091 | Monitoring | 1 h ago | 3% | ||
|
198 | 1,477 | Pilot | 3 h ago | 8% | ||
|
94 | 708 | Unsanctioned | yesterday | 14% |
Dark canvas used on /home. Near-black base with a purple + pink radial gradient pair, a 48px grid masked to the centre, and small brand-coloured dots that travel along grid lines like data packets. Place hero copy + DashboardFrame on top.
Discover every AI tool and every agent across your company.
Base: #0b0118 with two radial hotspots — purple rgba(137,24,229,0.35) at 30%/20% and pink rgba(246,3,133,0.30) at 75%/80%.
Grid: 48px lattice at rgba(255,255,255,0.04), faded out toward edges with a radial mask so it never reads as wallpaper.
Dots: 6px brand-pink/purple dots with a soft box-shadow glow. Lanes snap to multiples of 48px so each dot rides a grid line. Linear keyframes move them off-screen with fade-in/out at the edges; durations and delays are coprime so the field never resyncs. prefers-reduced-motion disables them.
Source: src/components/home/HeroOption23.tsx. Import and adapt for any other dark hero.
Tight pill with an accent dot. Pink is the editorial default for sub-pages; purple matches /home + /product.
Pink (default — solutions, compliance, templates)
Purple (use on home / product surfaces)
Pink → purple gradient clip-text. ONE phrase per hero h1, never on stats or buttons.
Turn AI from a Risk into a Competitive Edge
Inline trust signals beneath a hero CTA. Green check + small slate copy.
Wrap a product screenshot in the hairline-bordered frame with a soft purple glow + optional live badge. Matches /home.
liveBottom-of-hero infinite marquee. Use to show breadth ('5,600+ AI tools monitored').
The canonical body-section wrapper. Locks vertical rhythm (py-14 md:py-20), max-width (default max-w-5xl), horizontal padding, and the eyebrow + heading + intro paragraph rhythm. Reach for this anywhere a page needs a content section. Don't roll your own <section className='py-...'>.
One platform handles every phase of the AI lifecycle. Stop assembling a tool stack — Aona ships discovery, policy, and runtime enforcement in a single light-weight install.
CardGrid, TwoColumn, or arbitrary children.Surfaces: white (default), gray, lavender, lavenderStripe.
Widths: narrow (max-w-3xl, 768px), default (max-w-5xl, 1024px), wide (max-w-content, 1263px), full (max-w-content, 1263px). The wide/full tracks line up exactly with PageHero, StatsBar, and CTASection so card grids align with the hero card edges.
Densities: compact (py-10 md:py-14), default (py-14 md:py-20), spacious (py-16 md:py-24).
Source: src/components/editorial/PageSection.tsx.
Even (or 5/4) two-column split. Use inside a PageSection for 'text left, visual right' rows. Locks the gap, vertical alignment, and stacking order.
Aona inspects every prompt inline and redacts or blocks sensitive content before it leaves your environment. No round-trip to a model provider with PII attached.
Ratios: even (default), text-heavy (5/4), visual-heavy (4/5). Pass reverse to flip on desktop. Source: src/components/editorial/TwoColumn.tsx.
Responsive card grid that locks columns and gap so every grid on the site reads the same. Pair with FeatureCard, or pass arbitrary cards as children.
Inventory every AI tool in use across browsers, desktops, and APIs.
Set per-tool, per-user policies and require approvals where it matters.
Inspect and redact prompts inline. Block exfiltration before it leaves the browser.
Columns: 2 | 3 | 4. Gaps: tight | default | loose. Source: src/components/editorial/CardGrid.tsx.
The canonical card cell used inside CardGrid. Locks fill, hairline border, hover treatment, and rounded-2xl radius.
Standard variant — small icon tile, slate heading, muted body.
Drop the icon for a tighter card. Use when the row is information-dense.
The card used on /resources/templates and any 'downloadable resource' grid. Per-category accent stripe across the top, soft halo on hover, accent-tinted icon tile + category label, brand-pink-style check bullets on the Includes list, and a primary download + secondary Details action row. Pass `accent` to colour the stripe / icon tile / category label per category.
Eight-page template covering approved tools, prohibited data classes, escalation paths, and audit logging. Customise in 30 minutes; deploy via your existing AUP rollout.
Score third-party AI vendors against 32 weighted criteria across security, privacy, governance, and operational maturity.
Twelve-section playbook covering severity classification, containment, investigation, communication, remediation, and post-incident review for AI-related events.
Source: src/components/editorial/TemplateCard.tsx. Per-category accents on /resources/templates: Policy #9333ea, Assessment #10b981, Incident Response #ef4444, Framework #3b82f6, Checklist #f59e0b, Compliance #6366f1, Training #14b8a6, Discovery #0ea5e9, Risk Management #f43f5e, Legal #475569, Documentation #c026d3. Pass downloadHref for the primary download link, or omit it to render a "View" button to the detail page instead.
Convenience wrapper that combines PageSection + FAQ. Use for the 'Common questions' section that lives near the bottom of every page. Centered narrow column, gray surface by default.
Source: src/components/editorial/FAQSection.tsx.
Slate numbers, small-caps labels. No tier colours.
Inline 2×4 mini-stat row used inside hero sections on stats pages. Smaller than StatsBar — no surface, just the cards.
KPI card with optional trend indicator (up/down/neutral) and coloured left border. Used in dashboard previews.
Source: src/components/shared/MetricCard.tsx.
Tiny pill above stats hero with a pulsing dot. 'Updated Q1 2026 · 30 stats'.
30 statistics, Updated 2026Count-up animation for hero stats. Eases from 0 to target over 2s when scrolled into view.
Pattern lives inline on stats pages (useCountUp hook). Promote to a primitive when reused 3+ times.
Charts, heatmaps, calendars, and tables from the product dashboard.
Consistent chart palette powered by Recharts. Canonical order: purple → green → orange → pink, with area fills at 20% opacity.
Volume of prompts classified
Share of conversations per platform
Stacked by risk category
78 of 100%
Last 7 days · darker = more activity
DataTable with sparklines and trend indicators
| Department | Users | Adoption | Trend | Compliance |
|---|---|---|---|---|
| Engineering | 124 | 92% |
Compliant | |
| Sales | 86 | 74% |
Compliant | |
| Marketing | 54 | 58% |
Review | |
| Legal | 12 | 31% |
Blocked |
SecurityMetricsGridtotal events
73% of total
25% of total
require review
Numbered steps, all on the left, single column. Dark slate step circles, soft pink line, pink highlight per row. Use for 'How it works' explainers.
Date-anchored alternating timeline used on /compliance to track regulation milestones. Brand pink → purple vertical spine, purple date labels, alternating left/right cards. Use for any 'milestones / deadlines' rail.
Source: src/components/editorial/RegulationTimeline.tsx. Distinct from Timeline: that one is the numbered-steps "how it works" pattern; this one is date-anchored milestones.
Three card flavours used across the site. All use white bg + gray-200 border + slate text.
Default card for feature grids on Solutions and Compliance pages.
Pattern from TemplatesPageClient — coloured 3px accent line on top.
Used for clickable cards (`href` Link). Translates -1px on hover, no scale.
Numbered process step (01/02/03) used on /solutions and /governance 'How it works' grids. Bigger than a Timeline row.
Scan every browser, app, and integration. Auto-detect 5,000+ AI tools.
Set policy by team and data type. Enforce in real time.
Generate compliance reports automatically. SOC 2, ISO 42001 ready.
Governance framework pillar (PILLAR 01 + icon + title + body + 'Read pillar →' link). Icon sits flush on the card — no tinted tile around it.
Identify and catalog every AI system, tool, and application across your organisation.
Read the pillar →EU-AI-Act-style tier card. Coloured left bar + tier label + description + 2-column Examples / Obligations.
Bulleted feature list. Flat pink-tinted square check tile, not a gradient circle — Linear/Vanta editorial feel.
Three-column comparison table. Aona column gets a pink left-accent + tinted bg so it reads as the protagonist. Rows zebra-stripe and group under category headers. Hover highlights a row.
| Capability | Aona | Competitor |
|---|---|---|
| Detection | ||
| AI tool discovery (5,000+) | ||
| Browser-layer enforcement, no agents | ||
| Real-time prompt inspection | ||
| Compliance | ||
| EU AI Act evidence, automated | ||
| SOC 2 audit-ready logs | ||
| ISO 42001 controls library | ||
| Workflow | ||
| Native SIEM integration (Splunk / Sentinel) | ||
| Real-time employee coaching | ||
Floating bottom bar that appears after 500px scroll on /resources/comparisons/aona-vs-* pages. White bg, hairline top border, 'Comparing AI governance tools?' + Start Trial / Book a demo.
Live behaviour: appears after 500px scroll on a comparison page, fixed to the viewport bottom, hides near footer.
Brand-pink emphasis used on the comparisons hub to mark the Aona row as the recommended pick. Uppercase, tight tracking, white text on pink fill — distinctly different from the slate severity chips so users read it as a brand recommendation, not a status.
Use sparingly — at most one row per comparison list.
Source: src/components/editorial/OurPickBadge.tsx.
Closing CTA pattern. Default is a centered lavender card with soft pink + purple decorative glows, an editorial heading rhythm, and an optional trust strip. Pass `title={[prefix, accent]}` for split-color heading. Pass `media={...}` to switch to the 2-column split layout with a screenshot or illustration on the right — only when you have a real visual.
Aona deploys in under five minutes via your MDM. Run a free 90-day trial across every AI tool your workforce uses.
Join enterprises across financial services, healthcare, and legal who use Aona to govern AI.
Templates are a great start. Aona adds the runtime enforcement that catches the prompt that just left the browser.
Inline definition callout. Pink left-bar makes it read as a callout, not a generic gray card.
Shadow AI refers to AI tools and applications employees use without IT knowledge or approval. It is the AI-era evolution of shadow IT, a growing governance blind spot affecting 9 in 10 enterprises worldwide.
Click to expand; only one open at a time. Slate-bordered card, plus icon rotates 45deg.
Email capture + standard input. Pink focus ring matches the brand accent.
No spam. Unsubscribe anytime.
RegulationSubscribeWidget — banner / inline / compact. Reused on /compliance and resources hubs.
Get notified when new AI regulations are introduced or updated. Join 500+ compliance professionals.
Get notified when new AI regulations are introduced or updated. Join 500+ compliance professionals.
Modal confirmation after form submit. Auto-dismisses after a configurable delay. Used by demo / trial / contact flows.
Auto-closes after 5s. Click outside or the × to dismiss.
Captures email when the user moves their cursor toward the browser chrome. Session-storage gates re-show. Static preview below — the real popup self-triggers and shouldn't be opened manually.
A 10-page PDF comparing the major Workforce AI Security platforms by feature, price, and deployment time.
No spam. Unsubscribe anytime.
Source: src/components/shared/ExitIntentPopup.tsx. Already wired site-wide. Don't tune the trigger threshold inline.
Marketing-site section templates from the Section Lab exploration. Each card is a full-width band designed for aona.ai pages — drop-in layout, copy and motion patterns.
A complete, real-time inventory of AI usage — who’s using what, how often, and what data flows through. 5,000+ tools in the detection library.
Inspect prompts in real time. Block or redact PII, source code, and credentials before they reach third-party models.
Per team, per tool, per data type — enforced in real time without breaking workflows.
Usage mapped against ISO 42001, the EU AI Act, and internal policy. One-click reports.
Your SIEM, CASB, and SSO weren’t designed for AI-native threats. Aona is — and it plugs straight into the stack you already run.
Book a demoDetect and inventory every AI tool in use — browser extensions, desktop apps, API integrations, embedded AI features — with real-time alerts on unapproved tools.
Inspect prompts and responses in real time, classify data sensitivity, and block or redact PII, source code, credentials, and IP before it reaches third-party models.
Define policies per team, tool, data type, and sensitivity level. Enforce in real time — block, warn, redact, log, or escalate — without disrupting workflows.
Push AI security events into Splunk or Microsoft Sentinel. Integrate Okta, Azure AD, and Google Workspace for identity-aware policies.
A lightweight browser extension deploys via your MDM. Complete usage map within a day.
Detection library covering chatbots, copilots, agents, and embedded AI — updated weekly.
Approve trusted tools, block risky ones, coach users in real time — with 90% less risk.
SOC 2 Type II certified, with residency options across seven regions worldwide.
Every tool, every user, every policy event — aggregated at the browser layer, where all employee AI activity is actually visible.
Source code detected in a prompt to an unapproved tool. Redacted & logged.
Claude for Enterprise added to the approved registry for Engineering.
AI Usage Overview
ChatGPTLOW
GeminiLOW
DeepSeekHIGH
008 AgentHIGH
5factsMEDAn employee pastes customer data into a chatbot. Aona classifies it mid-keystroke, redacts what shouldn’t leave, and explains why — all before submit.
chat.openai.com — composing promptaona extension · activeUser, tool, data classification, policy action, timestamp. The evidence your auditors ask for — produced as a side effect of protection.
Explore the event schemaA hard block teaches employees to switch to a personal device. A well-timed nudge teaches them the safe path — and keeps the interaction inside your visibility.
This prompt contains what looks like an unreleased product name. The approved Claude workspace keeps it under NDA-grade controls — switch over?
Track safe-usage rates per team. Watch coached employees graduate from risky patterns. Show the board the line going the right way.
Quarterly AI governance reports generate themselves — posture, trends, incidents prevented, and framework coverage, formatted for people who don’t log into dashboards.
See a sample reportNo regex, no rule trees. Guardrails are sentences — every underlined part is a dropdown.
Every tool, user, and policy is one ⌘K away.
DeepSeek — view usageUNAPPROVED41 users · 3 teamsBlock DeepSeek for all teamspolicy actionRedact PII → DeepSeek onlypolicy action“TASK · SAFERewrite this onboarding doc for PII · REDACTMeridian Health, include the IP · REDACTQ3 pricing matrix, and make it sound urgent because CONTEXT · COACHlegal hasn’t approved it yet.”
Every team has unofficial AI “staff” now. They don’t show up in the HRIS — they show up in Aona.
Marketing-site section templates from the Section Lab exploration. Each card is a full-width band designed for aona.ai pages — drop-in layout, copy and motion patterns.
of employees use AI tools that were never approved by IT or security.
of employees have entered non-public company information into generative AI tools.
AI tool usage doesn’t generate the events your existing stack was built to collect.
Orgs that ban AI tools see usage move to personal devices and unmanaged accounts. Orgs that govern it see shadow usage collapse — because the safe path is also the easy one.
Read the methodologyMost employee AI activity happens in the browser, over encrypted sessions your network tooling reads as ordinary web traffic.
Once usage is governed, you can finally chart it honestly: adoption deepening week by week, with risk events fading instead of multiplying.
See your yearBefore discovery, your AI tools are random stars — you know a few names, not the shape. Mapping them reveals the figure that was always there: your org’s actual AI workflow.
Chart your skyMarketing-site section templates from the Section Lab exploration. Each card is a full-width band designed for aona.ai pages — drop-in layout, copy and motion patterns.
It never names and shames. It never files a ticket about you. It just catches the mistake, explains it once, and lets you get back to work.
Click every span that shouldn’t reach a third-party model. Aona found them in 41 milliseconds.
“Hey, can you check this deployment script for bugs? It connects with AKIA-9X2F-PROD-7731 to our staging cluster, then emails jane.doe@meridianhealth.com a report. Also rewrite the comment my boss left — ‘fix before the FDA audit on Aug 12’ — to sound less panicked. The script uses our standard logging library.”
Your org runs 147 AI tools. About 38 of them were never approved. Roughly half your staff has pasted something they shouldn’t. You can govern all of it by this time tomorrow.
library re-scored weekly · your usage re-priced in real time · circuit breakers built in
Deployment takes an afternoon. The clock above is real. So is the one your auditors use.
Beat the clockMarketing-site section templates from the Section Lab exploration. Each card is a full-width band designed for aona.ai pages — drop-in layout, copy and motion patterns.
Push the extension via your MDM or endpoint tool. Connect SSO. Live in a single afternoon.
~2 hrs effortYour complete AI map: approved tools, shadow tools, and the gap between policy and reality.
147 tools · typical orgGuardrails tuned per team and data type. Coaching live. Risky flows blocked, safe ones fast.
policy events ▼ 60%Board-ready posture: usage mapped to ISO 42001 and the EU AI Act, with trend lines to prove it.
one-click reportsYou can’t govern what you can’t see. Aona maps every AI tool in use across the organisation — who’s using what, how often, and what category of data is flowing through it.
Set smart guardrails that protect sensitive data and IP while letting employees use AI productively. Approve trusted tools, block risky ones, redact what shouldn’t leave.
Turn governance into adoption. The AI Coach guides employees in the flow of work, and board-ready reporting quantifies time saved, risk reduced, and value created per team.
Any AI tool, any browser, any team.
Content inspected against policy in milliseconds.
Only what policy allows to leave.
One pass, milliseconds long. Four possible endings — and the employee’s work continues in every one.
Employees request tools from their popup. Aona attaches the risk evidence automatically — vendor posture, data flows, observed usage — so the review is a decision, not a research project.
See the approval workflowEvery black bar below was caught by Aona before a real prompt left a real browser. The prompt still worked — the model never needed the secrets.
Every incident is a compound of these. Aona bonds with all of them.
Aona reads it for every tool in the library — retention, training rights, jurisdiction, breach history — and turns it into a risk rating your policies can act on.
See a real tool reportJust pasting the customer list into a chatbot real quick
Everyone knows the words. Aona is the part of the machine that beeps on the pink ones — before the verse is over.
Marketing-site section templates from the Section Lab exploration. Each card is a full-width band designed for aona.ai pages — drop-in layout, copy and motion patterns.
chatbots · copilots · agents · embedded AI — updated weekly
your org last week: 147 detected · 38 unapproved · 12 new
Aona gave us visibility and control over AI use across our teams — secure, while embracing innovation.
When the board asks about AI risk, we don’t give vague reassurances anymore. We open the dashboard.
A security product has to clear a higher bar than the tools it watches. Receipts below.
Independently audited controls, continuously monitored.
AI management system mapping built into reporting.
Usage dashboards mapped to obligations as enforcement lands.
Guardrail engine aligned to govern / map / measure / manage.
When the audit comes, your AI governance evidence is already organised the way frameworks expect it.
Network tools see encrypted sessions. Endpoint tools see processes. Neither sees what was asked and what was answered — the layer where AI risk actually lives.
Aona instruments that layer directly, then hands structured events down to the stack you already trust.
“We’d budgeted a quarter for discovery alone. Aona finished it before our kickoff deck was approved. The interesting work — actually setting policy — started in week two.”
“Aona gave us visibility and control over AI use across our teams — secure, while embracing innovation.”Head of Information Security · financial services
“A clever solution to facilitate GenAI adoption securely — with granular controls and oversight.”CISO · global technology company
“Aona empowered us to innovate with confidence — protecting IP and unlocking AI’s full potential.”Head of Data · healthcare enterprise
“We blocked ChatGPT, so we’re covered.”
Blocking one tool moves usage to the other 5,000 — and to personal devices, where you have no visibility at all. Governed access beats whack-a-mole.
“Monitoring prompts means spying on staff.”
Aona inspects AI interactions against policy scope — not personal browsing. The boundary is explicit, auditable, and visible to employees in their own popup.
“We’ll wait for the AI Act to settle first.”
Article 4 AI-literacy duties already apply, and record-keeping obligations land on deployers. Starting discovery now is what “preparing” actually looks like.
Every document below is generated and kept current by the platform itself. Audit prep becomes a download, not a quarter.
Browse sample evidenceSix questions auditors and regulators are already asking. Tick what you can prove — not what's written in a policy somewhere.
Marketing-site section templates from the Section Lab exploration. Each card is a full-width band designed for aona.ai pages — drop-in layout, copy and motion patterns.
Your existing stack is excellent at what it was designed for. AI interactions weren’t it.
| Capability | Network DLP | CASB | Endpoint agent | Aona |
|---|---|---|---|---|
| Sees encrypted AI traffic in the browser | — | PARTIAL | PARTIAL | ✓ |
| Understands prompt content & intent | — | — | — | ✓ |
| Redacts mid-prompt, before submit | — | — | — | ✓ |
| Detects embedded AI & local agents | — | — | PARTIAL | ✓ |
| Coaches employees in the flow of work | — | — | — | ✓ |
| Maps usage to ISO 42001 / EU AI Act | — | — | — | ✓ |
| Feeds events to Splunk / Sentinel | ✓ | ✓ | ✓ | ✓ |
Aona complements your stack — it doesn’t replace it.
Straight answers. For anything else, our security team talks to your security team.
Ask something elseMarketing-site section templates from the Section Lab exploration. Each card is a full-width band designed for aona.ai pages — drop-in layout, copy and motion patterns.
Deploy in an afternoon. Get your complete shadow AI map within 24 hours. Keep the report either way.
Deploy the extension, watch the inventory build, and get your risk report. Free for 90 days.
Start free trialA 30-minute session with an AI security engineer, mapped to your stack and your auditors’ questions.
Book a demoThe Workforce AI Security platform.
One field. We reply with rollout steps and a sandbox tenant — usually inside a business day.
Banning AI is a resignation letter from the future.
Visibility is not surveillance. It’s the opposite of guessing.
The safe path must also be the fast path — or nobody takes it.
Governance should produce evidence, not meetings.
THE WORKFORCE AI SECURITY PLATFORM
The big names are easy. It’s lines four through six — the free tools, embedded features, and agents — where the risk actually lives. Aona reads the whole chart.
Test your vision — freeEvery class of data gets travel rules: where it may go, under which visa, and which borders are closed. Aona is the border control that actually checks.
Set your travel rulesDashboard-side patterns: overlays, feedback states, layout patterns, editors, wizards, activity feeds, and auth pages.
Tooltips, dropdowns, popovers, dialogs, sheets, confirmation dialogs, command menu.
tooltip.tsxdropdown-menu.tsxpopover.tsxcommand.tsxdialog.tsxSend email invites. They'll receive a signup link.
confirmation-dialog.tsxThis will remove "PII redaction" from 14 platforms. Cannot be undone.
sheet.tsxAlerts, toasts, empty states, loading skeletons, banners.
alert.tsxTrialBanner.tsxsonner.tsxTry adjusting filters or search terms.
Create one to start securing AI usage.
Invite your team to get started.
Recurring page layouts across the dashboard.
Page title · action row · filter bar · table with pagination. Used for Users, Groups, Guardrails, Frameworks, Reports.
Breadcrumb · H2 title · tabs · metric row · charts grid. Used for AI Adoption, Security & Compliance, Reports.
Breadcrumb · title · metadata · tabs · content blocks. Used for User, Group, Framework, Guardrail, Partner.
Centered form card with brand visual. Used for Login, Signup, Verification, Request Access.
Date picker, file upload, rich-text, code editor, autocomplete search.
rich-text-editor.tsxEmployees must not share PII with external AI tools.
This includes customer names, email addresses, or any identifying information. Review the full policy for exceptions.
CodeMirrorPanel{
"name": "PII redaction",
"version": 3,
"trigger": {
"entities": ["EMAIL", "PHONE", "SSN"]
},
"action": "redact",
"platforms": ["chatgpt", "claude"]
}Multi-step flows from Business Setup, Onboarding, and Guardrail creation.
BusinessSetupWizardOnboardingLayout
Let's get you set up with safer AI in under 5 minutes.
QuizScreenFeeds, audit logs, notifications, status indicators.
The only pages outside the dashboard shell. All five follow one of three layouts: split-screen with animated hero (Login, Signup), centered card on radial mist (Verify email), or centered card on neutral wash (Subscription expired, Access denied).
Left brand panel (animated radial mesh, hidden below lg), right form column (max-w-[338px], white).
560px rounded-[28px] card on a soft purple radial. Used for transient verification states.
Compact card (max-w-md) on bg-purple-50/50 or bg-gray-50.
AuthHeroBackdrop.tsx
Discover Shadow AI, stop data leaks, and audit every agent — all from one platform.
#0b0118 with two radial blobs — magenta #F60385 @ 25%/95%, violet #8918E5 @ 80%/90%, each at 22% / 20% opacity, fading to transparent at 55%.rgba(255,255,255,0.04), vignette-masked to fade at the edges.prefers-reduced-motion is set.hidden lg:flex lg:w-1/2 — collapses on mobile so the form fills the screen.LoginPage.tsx · Layout Alg:w-1/2, hidden below lgAuthHeroBackdrop — solid #0b0118 with two radial blobs (magenta + violet) plus an animated grid and streaking glow dots.px-12 lg:px-16, vertically centered, max-w-[560px]/aona_logo_w_text.png at h-[90px], nudged left with -ml-[15px]. No separate icon tile + wordmark — the logo PNG is one asset.space-y-[40px] between logo and copytext-[32px] sm:text-[38px] lg:text-[44px], leading-[1.1], tracking-tighttext-[18px] leading-[1.75], text-white/65flex-1 bg-white grid place-items-center p-4, content md:w-[338px]flex flex-col gap-8 between sectionstext-[#18181b]. No eyebrow ("Welcome! 👋" was removed).h-10, border-[#6412a6], label in primary purple, 24 × 24 white logo badge, hover bg-purple-50bg-[#6412a6] hover:bg-[#7c1ec9]SignupPage.tsx · Layout ASignupVerificationPage.tsx · Layout BVerify Email
Open the verification email to continue setup.
Account created successfully
We sent a verification email to b@acme.com. Open it to continue setup.
If you don't see the email, check spam or resend it.
Default after signup. CheckCircle2 · green.
accountExists=1. Info · blue.
emailFailed=1. AlertCircle · amber.
Token failed/expired. AlertCircle · red.
SubscriptionExpiredPage.tsx · Layout CYour Pro plan subscription has expired. To continue using Aona, please renew your subscription.
Need help? Contact support
AccessDeniedPage.tsx · Layout CYou're signed in as b@acme.com, but your account does not have permission to access the admin app. Please contact your administrator to request access.
border-[#6412A6] on OAuth buttons (not gray) — they're brand-prominentbg-purple-50AuthHeroBackdrop — animated radial mesh, never a photo or solid gradient/aona_logo_w_text.png at h-[90px], single asset with text baked inrounded-[28px] + radial mist backgroundlogin-background.png photo panel — it's been retiredEvery body section gets the same h2 + intro paragraph rhythm. Use this — don't reinvent.
One short paragraph. Sets up the section. Always slate-600, max-w-2xl, mb-8 before the content.
<h2 className="text-2xl md:text-3xl font-extrabold text-gray-900 mb-2 tracking-tight text-balance"> Section heading </h2> <p className="text-gray-600 max-w-2xl mb-8"> One-paragraph intro. </p>
Hero customer / certification logo wall. Mono-tinted opacity, even spacing.
Large quote with attribution and optional avatar. Use for customer + analyst quotes.
“Aona showed us 4× more AI usage than we knew we had, and gave us policy controls that didn’t slow our engineers down.”
Underline-style tabs. Active gets a slate underline + bold weight. Use for switching between content panels.
Numeric pagination for blog / template archives. Active page = filled slate, others = outlined.
When a filter or search returns 0 results. Friendly + actionable, not apologetic.
Try clearing one of the filters or searching for a broader term.
Use animated skeleton blocks while content is loading. Same shape as the final card.
Validation errors live below the input, in red. Helper text in slate-500 above the input.
Please enter a valid work email.
Helper text appears above the field, slate-500.
Toggle filter row used on /compliance/regulations and /resources/templates. Active = solid slate, inactive = light gray.
Inline metadata chips on cards (region, type, status). Use the matching status palette.
Animation timing and accessibility guidelines for the product dashboard.
Consistent timing and easing keep the interface calm. Keep it subtle — UI, not theatrics.
hover, focus, checkbox
toggles, tabs, sidebar
modals, sheets, route
default for all
MetricCard uses easeOutQuad · 600ms
What we ship by default, and how the dashboard reflows across screen sizes.
Every interactive element gets a 2px ring in --ring with 2px offset.
Plain English, direct, no marketing fluff, no em dashes ever.
Use Tailwind utility classes, but token sizes are documented here.
eyebrow 0.6875rem line 1 weight 600 body 1rem line 1.6 weight 400 bodyLg 1.125rem line 1.6 weight 400 h4 1.25rem line 1.4 weight 700 h3 1.5rem line 1.3 weight 700 h2 2.25rem line 1.2 weight 800 h1 3rem line 1.1 weight 800 display 3.75rem line 1.05 weight 800
Lint guards in scripts/lint-slop.mjs. Adding new slop here is a hard fail.