CSS Customisation Cheat-Sheet

Overview

Domma can be dropped into existing projects without disrupting your design system. This cheat-sheet shows you exactly which CSS variables and classes to override to make Domma elements match your brand colours, typography, spacing, and more.

Three-Tier CSS Variable Architecture

Domma uses a cascading variable system that gives you flexibility at multiple levels:

1. Palette tier - Raw colour values (e.g., --dm-blue-600, --dm-slate-300)
2. Semantic tier - Contextual tokens (e.g., --dm-primary, --dm-border, --dm-text)
3. Component tier - Element-specific (e.g., --dm-card-bg, --dm-navbar-text)

Override Strategy

Override at the highest tier for maximum impact. Changing --dm-primary affects buttons, badges, links, focus states, and 15+ components. Changing --dm-blue-600 (the default value of --dm-primary) affects everything that references blue.

Minimal CSS Inclusion for Existing Projects

If you already have a design system, you only need to load Domma's component CSS:

<!-- Load only what you need -->
<link rel="stylesheet" href="dist/elements.css">  <!-- UI components -->

<!-- Optional: grid system if you don't have one -->
<link rel="stylesheet" href="dist/grid.css">

<!-- Override Domma variables to match your system -->
<style>
:root {
    --dm-primary: #your-brand-colour;
    --dm-font-sans: 'Your Font', sans-serif;
    /* ...more overrides */
}
</style>

Quick Start - 10 Variables That Change Everything

These 10 high-impact variables adapt the entire Domma framework to your brand in under 30 seconds.

Copy-Paste Override Template

:root {
    /* Brand colours */
    --dm-primary: #0066cc;               /* Your brand blue */
    --dm-primary-hover: #0052a3;         /* Darker for hover */
    --dm-secondary: #6c757d;             /* Secondary/muted colour */

    /* Backgrounds */
    --dm-background: #f5f5f5;            /* Page background */
    --dm-surface: #ffffff;               /* Card/panel background */

    /* Text */
    --dm-text: #2c3e50;                  /* Body text */
    --dm-text-secondary: #7f8c8d;        /* Muted text */

    /* Borders & shapes */
    --dm-border: #dee2e6;                /* Border colour */
    --dm-radius-md: 0.5rem;              /* Corner radius */

    /* Typography */
    --dm-font-sans: 'Inter', sans-serif; /* Your font stack */
}

Before / After Demo

See the impact of custom variables in real-time:

<div class="grid grid-cols-1 grid-cols-md-2 gap-4">
    <!-- Default theme -->
    <div>
        <p class="font-semibold mb-2">Default Domma Theme</p>
        <div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title">Sample Card</h4>
                <p class="card-text mb-3">This uses default Domma variables.</p>
                <button type="button" class="btn btn-primary btn-sm">Primary Button</button>
            </div>
        </div>
    </div>

    <!-- Custom branded theme -->
    <div class="custom-brand">
        <p class="font-semibold mb-2">Custom Brand Theme</p>
        <div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title">Sample Card</h4>
                <p class="card-text mb-3">This uses custom overrides.</p>
                <button type="button" class="btn btn-primary btn-sm">Primary Button</button>
            </div>
        </div>
    </div>
</div>

Global Variable Reference

Complete list of semantic CSS variables organised by category. These control appearance across all components.

Semantic Colours

Backgrounds & Surfaces

Text Colours

Borders & Focus States

Spacing

Typography

Border Radius

Shadows

Transitions

Per-Component Override Reference

Component-specific variables for fine-tuned control. Override these when global changes aren't enough.

Button

Classes: .btn, .btn-primary, .btn-outline-*

Variables: --dm-primary, --dm-primary-hover, --dm-radius-md, --dm-space-2, --dm-space-4, --dm-focus-ring

Common override: Change brand → --dm-primary: #your-colour; | Rounder → --dm-radius-md: var(--dm-radius-full);

Card

Classes: .card, .card-header, .card-body, .card-footer

Variables: --dm-card-bg, --dm-card-border, --dm-card-shadow, --dm-radius-lg

Common override: Dark cards → --dm-card-bg: var(--dm-slate-800); | Flat design → --dm-card-shadow: none; --dm-radius-lg: 0;

Modal

Classes: .modal, .modal-header, .modal-body, .modal-footer

Variables: --dm-surface, --dm-radius-lg, --dm-shadow-xl, --dm-transition-normal

Common override: Smooth modals → --dm-transition-normal: 400ms cubic-bezier(0.4, 0, 0.2, 1);

Tabs

Classes: .tabs, .tab-item, .tab-content

Variables: --dm-tab-border, --dm-tab-hover-bg, --dm-tab-active-border, --dm-tab-active-text

Common override: Custom active colour → --dm-tab-active-border: #your-colour; --dm-tab-active-text: #your-colour;

Accordion

Classes: .accordion, .accordion-item, .accordion-header

Variables: --dm-accordion-border, --dm-accordion-header-hover, --dm-radius-lg

Common override: Borderless → --dm-accordion-border: transparent;

Tooltip

Classes: .tooltip, .tooltip-arrow

Variables: --dm-slate-900 (background), --dm-radius-md, --dm-font-size-sm

Common override: Light tooltip → Override with inline style on tooltip element or create custom CSS class

Table

Classes: .table, .table-striped, .table-hover

Variables: --dm-table-border, --dm-table-hover-bg, --dm-table-stripe-bg

Common override: Zebra stripes → --dm-table-stripe-bg: var(--dm-slate-50);

Forms (Inputs, Select, Textarea)

Classes: .form-input, .form-select, .form-textarea

Variables: --dm-input-bg, --dm-input-border, --dm-input-text, --dm-input-focus-border

Common override: Outline focus → --dm-input-focus-border: #your-brand-colour;

Badge

Classes: .badge, .badge-primary, .badge-success, etc.

Variables: --dm-primary (+ status colours), --dm-radius-full

Common override: Square badges → --dm-radius-full: var(--dm-radius-sm);

Alert

Classes: .alert, .alert-success, .alert-danger, etc.

Variables: Status colour variants (--dm-*-light, --dm-*-dark)

Common override: Subtle alerts → Lighten --dm-success-light, --dm-danger-light, etc.

Navbar

Classes: .navbar, .navbar-item, .navbar-brand

Variables: --dm-navbar-bg, --dm-navbar-text, --dm-navbar-border

Common override: Dark navbar → --dm-navbar-bg: var(--dm-slate-900); --dm-navbar-text: var(--dm-white);

Sidebar

Classes: .sidebar, .sidebar-item

Variables: --dm-sidebar-bg, --dm-sidebar-border, --dm-sidebar-item-hover, --dm-sidebar-item-active

Common override: Match navbar → Use same background/text variables as navbar

Dropdown

Classes: .dropdown, .dropdown-item

Variables: --dm-dropdown-bg, --dm-dropdown-border, --dm-dropdown-item-hover

Common override: Hover highlight → --dm-dropdown-item-hover: var(--dm-primary-light);

Autocomplete

Classes: .autocomplete, .autocomplete-item

Variables: --dm-autocomplete-bg, --dm-autocomplete-border, --dm-autocomplete-highlight

Common override: Match highlight → --dm-autocomplete-highlight: #your-yellow;

Pillbox

Classes: .pillbox, .pill

Variables: --dm-pillbox-bg, --dm-pillbox-border, --dm-pill-bg, --dm-pill-color

Common override: Brand-coloured pills → --dm-pill-bg: var(--dm-primary); --dm-pill-color: var(--dm-text-inverse); on .dm-pillbox

Toast

Classes: .toast, .toast-success, .toast-error

Variables: --dm-slate-800 (background), status colours, --dm-radius-md

Common override: Position or styling requires JavaScript options (not CSS variables)

Loader

Classes: .loader, .loader-spinner, .loader-dots

Variables: --dm-primary (spinner colour)

Common override: White spinner → Override via JavaScript color option or target .loader-spinner CSS

Hero

Classes: .hero, .hero-primary, .hero-dark

Variables: --dm-primary, gradient definitions

Common override: Custom gradient → Define new .hero-custom class with background property

Carousel

Classes: .carousel, .carousel-item, .carousel-controls

Variables: --dm-radius-lg, --dm-primary, --dm-shadow-md

Common override: Control colour → Target .carousel-controls button with background or color

Dialog

Classes: .dialog (same as modal)

Variables: --dm-surface, --dm-radius-lg, --dm-border

Common override: Same as Modal

Breadcrumbs

Classes: .breadcrumbs, .breadcrumb-item

Variables: --dm-primary, --dm-text-muted

Common override: Active crumb → Target .breadcrumb-item.active with color

Timer

Classes: .timer

Variables: --dm-success, --dm-warning, --dm-secondary

Common override: Time colour thresholds → Pass color via JavaScript options

Footer

Classes: .footer, .footer-simple, .footer-columns

Variables: --dm-surface, --dm-border, --dm-text-muted

Common override: Dark footer → --dm-surface: var(--dm-slate-900); --dm-text-muted: var(--dm-slate-400);

Back-to-Top

Classes: .back-to-top

Variables: --dm-primary, --dm-primary-hover, --dm-radius-full

Common override: Icon size or position → Target .back-to-top with width/height or bottom/right

Progression (Timeline/Roadmap)

Classes: .progression, .progression-item

Variables: Status colours (--dm-success, --dm-warning, --dm-info, --dm-danger), --dm-primary, --dm-surface

Common override: Status indicators → Override status colour variables

Integration Recipes

Practical examples for integrating Domma into existing projects with popular frameworks and design systems.

Recipe 1: Bootstrap Project

Map Bootstrap's CSS variables to Domma's for consistent branding:

:root {
    /* Map Bootstrap primary to Domma primary */
    --dm-primary: var(--bs-primary, #0d6efd);
    --dm-primary-hover: var(--bs-primary-dark, #0a58ca);

    /* Map Bootstrap surfaces */
    --dm-surface: var(--bs-body-bg, #fff);
    --dm-background: var(--bs-light, #f8f9fa);

    /* Map Bootstrap text */
    --dm-text: var(--bs-body-color, #212529);
    --dm-text-secondary: var(--bs-secondary, #6c757d);

    /* Map Bootstrap borders */
    --dm-border: var(--bs-border-color, #dee2e6);
    --dm-radius-md: var(--bs-border-radius, 0.375rem);

    /* Map Bootstrap status colours */
    --dm-success: var(--bs-success, #198754);
    --dm-danger: var(--bs-danger, #dc3545);
    --dm-warning: var(--bs-warning, #ffc107);
    --dm-info: var(--bs-info, #0dcaf0);
}

Recipe 2: Tailwind Project

Map Tailwind colour tokens to Domma variables:

:root {
    /* Map Tailwind primary (e.g., indigo) */
    --dm-primary: rgb(99 102 241);          /* indigo-500 */
    --dm-primary-hover: rgb(79 70 229);     /* indigo-600 */
    --dm-primary-active: rgb(67 56 202);    /* indigo-700 */

    /* Map Tailwind surfaces */
    --dm-background: rgb(249 250 251);      /* gray-50 */
    --dm-surface: rgb(255 255 255);         /* white */

    /* Map Tailwind text */
    --dm-text: rgb(17 24 39);               /* gray-900 */
    --dm-text-secondary: rgb(107 114 128);  /* gray-500 */
    --dm-text-muted: rgb(156 163 175);      /* gray-400 */

    /* Map Tailwind borders */
    --dm-border: rgb(229 231 235);          /* gray-200 */

    /* Match Tailwind radius */
    --dm-radius-md: 0.375rem;               /* rounded */
    --dm-radius-lg: 0.5rem;                 /* rounded-lg */
}

Recipe 3: Dark Theme Integration

Override variables for a dark-themed site:

/* Dark theme overrides */
:root {
    /* Dark backgrounds */
    --dm-background: #0f172a;               /* slate-900 */
    --dm-surface: #1e293b;                  /* slate-800 */
    --dm-surface-raised: #334155;           /* slate-700 */

    /* Dark text */
    --dm-text: #f1f5f9;                     /* slate-100 */
    --dm-text-secondary: #cbd5e1;           /* slate-300 */
    --dm-text-muted: #94a3b8;               /* slate-400 */

    /* Dark borders */
    --dm-border: #334155;                   /* slate-700 */
    --dm-border-light: #1e293b;             /* slate-800 */

    /* Adjust status colours for dark bg */
    --dm-primary-light: #1e3a8a;            /* blue-900 */
    --dm-success-light: #14532d;            /* green-900 */
    --dm-danger-light: #7f1d1d;             /* red-900 */

    /* Component-specific for dark */
    --dm-card-bg: var(--dm-surface);
    --dm-navbar-bg: var(--dm-slate-900);
    --dm-navbar-text: var(--dm-text);
}

Scoping Overrides

Override variables for specific sections of your page by scoping them to a container element. This lets you have different colour schemes in sidebars, admin panels, or feature sections.

Scoped Example

/* Entire page uses default Domma theme */
:root {
    --dm-primary: #2563eb;  /* Blue */
}

/* Sidebar uses green accent */
.my-sidebar {
    --dm-primary: #198754;  /* Green */
    --dm-primary-hover: #157347;
}

/* Admin panel uses red accent */
.admin-section {
    --dm-primary: #dc2626;  /* Red */
    --dm-primary-hover: #b91c1c;
}

Result

Elements inside .my-sidebar will have green buttons, badges, and links. Elements inside .admin-section will be red. Everything else stays blue.

Custom Themes

Domma ships with 10+ built-in themes (charcoal, ocean, forest, sunset, etc.), but you can also create custom themes by defining your own CSS classes.

Difference Between Approaches

• Overriding :root - Changes apply globally and immediately
• Using .dm-theme-* classes - Apply pre-built Domma themes by adding class to <body>
• Creating a custom theme file - Bundle your overrides into a reusable theme that can be toggled

Minimal Custom Theme Template

/* custom-theme.css */
.dm-theme-corporate {
    /* Brand */
    --dm-primary: #003d7a;              /* Corporate blue */
    --dm-primary-hover: #002f5f;
    --dm-secondary: #6c757d;

    /* Backgrounds */
    --dm-background: #f8f9fa;
    --dm-surface: #ffffff;

    /* Text */
    --dm-text: #2c3e50;
    --dm-text-secondary: #546e7a;

    /* Shapes */
    --dm-radius-md: 0.25rem;            /* Sharp corners for corporate look */
    --dm-radius-lg: 0.5rem;

    /* Typography */
    --dm-font-sans: 'Helvetica Neue', Arial, sans-serif;
}

Usage

<link rel="stylesheet" href="custom-theme.css">
<body class="dm-theme-corporate">
    <!-- Your content -->
</body>

For advanced theme creation with light/dark variants and automatic switching, see the Theme Roller tool.

Related Resources

Explore these resources for more on theming and customisation:

<div class="grid grid-cols-1 grid-auto-fit-250 gap-4"><a href="/showcase/themes" class="card card-hover no-underline text-inherit">
        <div class="card-body">
            <h4 class="card-title">Themes Showcase</h4>
            <p class="card-text">View all 10+ built-in themes with live previews.</p>
        </div>
    </a>

    <a href="/showcase/theme-roller" class="card card-hover no-underline text-inherit">
        <div class="card-body">
            <h4 class="card-title">Theme Roller</h4>
            <p class="card-text">Visual theme customisation tool with live preview and export.</p>
        </div>
    </a>

    <a href="/showcase/elements" class="card card-hover no-underline text-inherit">
        <div class="card-body">
            <h4 class="card-title">All Elements</h4>
            <p class="card-text">Browse all 29 UI components with interactive examples.</p>
        </div>
    </a>

    <a href="/showcase/grid" class="card card-hover no-underline text-inherit">
        <div class="card-body">
            <h4 class="card-title">Grid System</h4>
            <p class="card-text">Learn about Domma's CSS Grid and Flexbox utilities.</p>
        </div>
    </a>
</div>