Style Guide
A living reference of every reusable element across the site. All elements draw from the same design tokens, so updating a CSS variable in globals.css updates every instance site-wide.
Colour palette
Core semantic colours that drive the entire interface.
--accent--accent-dark--accent-muted--surface--surface-secondary--surface-tertiary--text-primary--text-secondary--text-muted--border--errorWarm neutral scale
Typography
Space Grotesk for headings (H1-H4), Host Grotesk for body and UI text.
The quick brown fox
The quick brown fox jumps over
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Ensurva unifies IT, security, finance, and procurement around one SaaS source of truth. Discover apps (paid and free), map spend, run renewals, and export audit evidence — without spreadsheet ops.
See your SaaS footprint in minutes — not months. Confidence-aware AI surfaces every match with a review path.
Buttons
Four variants across three sizes. All use the accent colour and button radius token.
Variants
Sizes
States
With icons
Cards
Four variants for different contexts. Cards use the card radius and shadow tokens.
Default
Uses bg-surface with subtle shadow. Ideal for general content containers.
Outlined
Border-only, no shadow. Clean and minimal for lists and grids.
Feature
Secondary background with accent-tinted hover border. For product features.
Pricing
Heavier border weight to stand out in pricing grids.
Card with hover effect
Hover card
Hover over this card to see the elevated shadow and lift transition.
Form elements
Inputs, selects, and textareas with labels, help text, and error states.
We use this to personalise your experience.
This field is required.
Badges
Inline labels and tags. Pill-shaped by default.
Variants
Sizes
Accordion
Expandable content panels for FAQs and collapsible information.
Section headers
Centred by default. Used at the top of every content section.
Centred header
This is the default alignment. Used for symmetrical page sections.
Left-aligned header
Used when content flows left-to-right, like feature lists.
Section backgrounds
Four background variants that alternate to create visual rhythm.
default (surface)Primary background for main content.
secondaryAlternating sections, hero backgrounds.
tertiaryThird-level distinction for nested elements.
accentAccent-tinted background for emphasis.
Shadows and radii
Design tokens that control depth and corner rounding across all elements.
shadow-subtleshadow-cardshadow-elevatedshadow-modalshadow-vignetterounded-cardrounded-inputrounded-badgeUI vignette
A realistic composition combining multiple elements to show how they work together.
Compliance check
Last run 2 hours ago
All 24 SaaS applications have been verified against your security policy. Three new apps were discovered and automatically flagged for review.
24
Verified
3
Flagged
98%
Confidence
CTA band
Full-width call-to-action strip. Two variants: default (dark) and accent.