Theme Examples — Marai.UI

Four production-ready brand themes built entirely from token overrides. No component code changes — copy a theme block, adjust a token, ship.

Every theme below is a single CSS block. Drop it into your app after the Marai.UI stylesheet. Dark mode adapts automatically because only tokens change.

Fintech Theme

High-trust, structured feel. Deep indigo primary, tight radius, cool neutrals. Communicates precision and control — appropriate for financial dashboards, transaction UIs, and reporting tools.

css

/* Fintech Theme */

:root {
    --marai-primary: 243 75% 55%;
    --marai-primary-foreground: 0 0% 100%;

    --marai-secondary: 220 15% 45%;
    --marai-secondary-foreground: 0 0% 100%;

    --marai-background: 220 20% 98%;
    --marai-foreground: 224 30% 12%;
    --marai-card: 0 0% 100%;
    --marai-card-foreground: 224 30% 12%;
    --marai-popover: 0 0% 100%;
    --marai-popover-foreground: 224 30% 12%;

    --marai-muted: 220 15% 95%;
    --marai-muted-foreground: 220 12% 50%;
    --marai-accent: 243 60% 96%;
    --marai-accent-foreground: 243 50% 25%;

    --marai-border: 220 14% 88%;
    --marai-input: 220 14% 88%;
    --marai-ring: 243 75% 55%;

    --marai-success: 158 64% 38%;
    --marai-success-foreground: 0 0% 100%;
    --marai-destructive: 0 72% 51%;
    --marai-destructive-foreground: 0 0% 100%;
    --marai-warning: 38 88% 48%;
    --marai-warning-foreground: 30 40% 12%;

    --marai-radius: 0.375rem;
    --marai-shadow-sm: 0 1px 2px 0 rgb(60 80 140 / 0.07);
    --marai-shadow: 0 2px 6px 0 rgb(60 80 140 / 0.1);
    --marai-shadow-lg: 0 8px 24px -4px rgb(60 80 140 / 0.15);
}

.dark {
    --marai-primary: 243 85% 65%;
    --marai-primary-foreground: 243 60% 10%;

    --marai-background: 224 25% 8%;
    --marai-foreground: 220 15% 92%;
    --marai-card: 224 22% 11%;
    --marai-card-foreground: 220 15% 92%;
    --marai-popover: 224 22% 11%;
    --marai-popover-foreground: 220 15% 92%;

    --marai-muted: 224 20% 16%;
    --marai-muted-foreground: 220 14% 60%;
    --marai-accent: 243 40% 18%;
    --marai-accent-foreground: 243 80% 82%;

    --marai-border: 224 18% 20%;
    --marai-input: 224 18% 20%;
    --marai-ring: 243 85% 65%;

    --marai-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --marai-shadow: 0 2px 6px 0 rgb(0 0 0 / 0.4);
    --marai-shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.5);
}

Enterprise Dark Theme

Designed for data-dense dashboards and operations tools. Slate-based dark surfaces, cool blue primary, maximum readability at scale.

css

/* Enterprise Dark Theme */

:root {
    --marai-primary: 210 90% 55%;
    --marai-primary-foreground: 0 0% 100%;

    --marai-background: 215 28% 10%;
    --marai-foreground: 210 18% 88%;
    --marai-card: 215 24% 13%;
    --marai-card-foreground: 210 18% 88%;
    --marai-popover: 215 24% 13%;
    --marai-popover-foreground: 210 18% 88%;

    --marai-muted: 215 20% 18%;
    --marai-muted-foreground: 210 14% 58%;
    --marai-accent: 210 60% 18%;
    --marai-accent-foreground: 210 80% 78%;

    --marai-border: 215 18% 22%;
    --marai-input: 215 18% 22%;
    --marai-ring: 210 90% 55%;

    --marai-success: 160 60% 42%;
    --marai-success-foreground: 0 0% 100%;
    --marai-warning: 40 90% 52%;
    --marai-warning-foreground: 30 40% 10%;
    --marai-destructive: 0 68% 55%;
    --marai-destructive-foreground: 0 0% 100%;

    --marai-radius: 0.25rem;
    --marai-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
    --marai-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.5);
    --marai-shadow-lg: 0 12px 28px -4px rgb(0 0 0 / 0.6);
}

Minimal Neutral Theme

Pure, restrained, high-legibility. Neutral gray scale with generous radius, soft shadows, and understated interactions. Appropriate for content-first products and documentation tools.

css

/* Minimal Neutral Theme */

:root {
    --marai-primary: 220 9% 18%;
    --marai-primary-foreground: 0 0% 100%;

    --marai-secondary: 220 9% 46%;
    --marai-secondary-foreground: 0 0% 100%;

    --marai-background: 0 0% 100%;
    --marai-foreground: 220 9% 14%;
    --marai-card: 220 9% 99%;
    --marai-card-foreground: 220 9% 14%;
    --marai-popover: 0 0% 100%;
    --marai-popover-foreground: 220 9% 14%;

    --marai-muted: 220 9% 96%;
    --marai-muted-foreground: 220 9% 50%;
    --marai-accent: 220 9% 96%;
    --marai-accent-foreground: 220 9% 18%;

    --marai-border: 220 9% 90%;
    --marai-input: 220 9% 90%;
    --marai-ring: 220 9% 40%;

    --marai-radius: 0.625rem;
    --marai-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --marai-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.07);
    --marai-shadow-lg: 0 8px 20px -4px rgb(0 0 0 / 0.1);

    --marai-duration-base: 120ms;
    --marai-duration-slow: 200ms;
}

.dark {
    --marai-primary: 220 9% 85%;
    --marai-primary-foreground: 220 9% 10%;

    --marai-background: 220 9% 8%;
    --marai-foreground: 220 9% 90%;
    --marai-card: 220 9% 11%;
    --marai-card-foreground: 220 9% 90%;
    --marai-popover: 220 9% 11%;
    --marai-popover-foreground: 220 9% 90%;

    --marai-muted: 220 9% 16%;
    --marai-muted-foreground: 220 9% 55%;
    --marai-accent: 220 9% 16%;
    --marai-accent-foreground: 220 9% 90%;

    --marai-border: 220 9% 20%;
    --marai-input: 220 9% 20%;
    --marai-ring: 220 9% 60%;
}

High-Contrast Accessibility Theme

Optimised for WCAG 2.1 AAA contrast and users with visual impairments. Pure black/white surfaces, high-saturation action colors, sharp radius, and visible focus rings. All interactive states maintain a minimum 7:1 contrast ratio.

css

/* High-Contrast Accessibility Theme */

:root {
    --marai-primary: 220 100% 40%;
    --marai-primary-foreground: 0 0% 100%;

    --marai-secondary: 0 0% 20%;
    --marai-secondary-foreground: 0 0% 100%;

    --marai-background: 0 0% 100%;
    --marai-foreground: 0 0% 0%;
    --marai-card: 0 0% 100%;
    --marai-card-foreground: 0 0% 0%;
    --marai-popover: 0 0% 100%;
    --marai-popover-foreground: 0 0% 0%;

    --marai-muted: 0 0% 94%;
    --marai-muted-foreground: 0 0% 20%;
    --marai-accent: 220 100% 94%;
    --marai-accent-foreground: 220 100% 20%;

    --marai-border: 0 0% 0%;
    --marai-input: 0 0% 0%;
    --marai-ring: 220 100% 30%;

    --marai-success: 140 100% 25%;
    --marai-success-foreground: 0 0% 100%;
    --marai-warning: 40 100% 30%;
    --marai-warning-foreground: 0 0% 0%;
    --marai-destructive: 0 100% 38%;
    --marai-destructive-foreground: 0 0% 100%;
    --marai-info: 200 100% 30%;
    --marai-info-foreground: 0 0% 100%;

    --marai-radius: 0.25rem;
    --marai-shadow-sm: none;
    --marai-shadow: 0 0 0 1px rgb(0 0 0 / 1);
    --marai-shadow-lg: 0 0 0 2px rgb(0 0 0 / 1);
}

.dark {
    --marai-primary: 220 100% 65%;
    --marai-primary-foreground: 0 0% 0%;

    --marai-background: 0 0% 0%;
    --marai-foreground: 0 0% 100%;
    --marai-card: 0 0% 0%;
    --marai-card-foreground: 0 0% 100%;
    --marai-popover: 0 0% 5%;
    --marai-popover-foreground: 0 0% 100%;

    --marai-muted: 0 0% 12%;
    --marai-muted-foreground: 0 0% 80%;
    --marai-accent: 220 100% 15%;
    --marai-accent-foreground: 220 100% 85%;

    --marai-border: 0 0% 100%;
    --marai-input: 0 0% 100%;
    --marai-ring: 220 100% 70%;

    --marai-success: 140 100% 50%;
    --marai-success-foreground: 0 0% 0%;
    --marai-warning: 48 100% 55%;
    --marai-warning-foreground: 0 0% 0%;
    --marai-destructive: 0 100% 62%;
    --marai-destructive-foreground: 0 0% 0%;
}

Usage Notes

Load your theme CSS after _content/Marai.UI/marai-ui.min.css and before your Tailwind stylesheet.
Use bare HSL channels (e.g. 220 9% 90%) — not hsl(220, 9%, 90%). The hsl() wrapper is applied by components.
You do not need to override every token. Only override the ones that differ from the defaults.
Dark mode overrides live in a .dark { } block. ThemeService adds and removes that class on the root element.