Skip to main content
Euraika Logo
Style GuideAutological

Style Guide

A 5-token architecture. One source of truth for all product themes.

This page is built entirely with the design system tokens. Switch the theme above — the entire page re-skins. The page IS the proof the system works.

Colour Tokens

5 semantic tokens
--color-product
--color-product-surface
--color-product-emphasis
--color-product-muted
--color-product-accent

Values update live when you change the product theme above.

Typography

fluid · clamp-based
text-heroPage hero — one per page

Stop Fighting Compliance.

text-titleSection titles, page headings

Complete Framework Coverage

text-headingCard titles, subsection headings

AI That Actually Helps

text-bodyParagraph text, descriptions

Euraika monitors your regulatory obligations across NIS2, DORA, GDPR, and the EU AI Act. Structured evidence trails, human-readable gap reports, and clear ownership — so your team always knows what to do next.

text-smallLabels, captions, metadata, legal copy

Last updated March 2026 · Euraika BV · EU-hosted infrastructure

Toggle a style theme to see fonts, tracking, and visual rhythm change live.

Spacing Rhythm

8px base unit
Tight8px
Base16px
Comfortable24px
Wide32px
Hero64px

Shadows & Radii

These change dramatically between style themes — Neobrutalism uses hard offset shadows and sharp corners, Bento uses diffused shadows and generous radii.

shadow-smCards at rest
shadow-mdHover elevation
shadow-lgModals, panels

Border Radii

sm (4px)Badges, chips
lg (12px)Cards, panels
fullPills, avatars

Component Patterns

6 pattern families

Navigation

Header bar — logo, links, CTA.

Content Cards

3-card feature grid — icon, title, description, link.
🛡

NIS2 Monitoring

Continuous gap assessment against the Network and Information Security directive.

Learn more →
📋

DORA Compliance

Automated evidence collection for Digital Operational Resilience Act reporting.

Learn more →
🤖

EU AI Act Readiness

Risk classification and documentation trails for AI systems in scope.

Learn more →

Data Table

Comparison table — semantic markup, themed header row.
FrameworkCovered
NIS2✓
DORA✓
GDPR✓
EU AI Act✓

Form

Input + select + submit — focus ring uses product token.

Feedback

Alert banners — info uses product colour, status uses semantic colours.

NIS2 deadline approaching

Your NIS2 assessment is due in 14 days. 3 controls require attention.

GDPR evidence exported

Article 30 records generated and ready for download.

Integration not verified

Microsoft 365 connector last synced 48 hours ago.

CTA Banner

Full-width conversion banner — dot-grid overlay, white CTA button.

Ready when you are

Start your free evaluation.

No lock-in. EU-hosted. Structured compliance support from day one.

CSS Reference

Two class applications unlock the full token system. Combine freely.

CSS / JSXproduct-tokens.css
/* 1. Apply a product theme to any wrapper */
<div class="product-aegis">

  /* 2. Apply a style theme (usually on <html>) */
  <html class="style-paper">

  /* 3. Use semantic tokens — they auto-resolve */
  .my-button {
    background: var(--color-product);
    color: white;
  }
  .my-button:hover {
    background: var(--color-product-emphasis);
  }

  /* 4. Tailwind utilities work identically */
  <div class="bg-product-surface text-product-emphasis
              border border-product/20 rounded-lg p-4">
    Token-driven content
  </div>

</div>