Choose a Theme
Click any theme to preview it instantly. Changes apply to the entire page.
1. Branding & Surfaces
2. Typography
H1 — Quarterly performance overview
H2 — Revenue grew 23% year on year
H3 — Engineering team headcount
H4 — Customer satisfaction up four points
H5 — Migration completed last Tuesday
H6 — Last updated by Darryl on 22 April 2026
Standard paragraph text — the rain in Spain falls mainly on the plain. This is a hyperlink with an inline strong, an inline emphasis, and some inline code. Visited links should also have legible colour.
"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs
Muted helper text — usually used for form hints or metadata.
Secondary text — slightly de-emphasised body copy.
const order = { id: 'INV-2026-0042', customer: 'Acme Ltd', total: 4250.00 };
Domma.http.post('/api/invoices', order).then(res => {
E.toast('Invoice saved', { type: 'success' });
});
3. Buttons
4. Forms
5. Cards — header / footer combinations
Body only. No header, no footer. Just a single padded surface.
Header only
Header above, body below. No footer.
Body with a footer beneath. No header.
Header and footer
Full sandwich — header, body, and footer.
Hover card
Hover the card to see the elevation effect adjust to the active theme.
card-primary
Solid primary-tinted card. Watch this one carefully on light themes — header text often breaks here.
Primary card-accent
Default accent — uses --dm-primary for the left border.
Success card-accent-success
Tinted accent with a green left border. Use for confirmation and completion states.
Warning card-accent-warning
Yellow accent. Lemon-light theme has historically broken this combination.
Danger card-accent-danger
Red accent. Used for destructive confirmation flows.
Info card-accent-info
Blue accent. Mint-light historically had cyan-on-mint contrast issues here.
Collapsible card
Click the header to toggle. State persists to localStorage.
6. Badges, Pills & Number Badges
7. Alerts
8. Tabs & Accordion
- Overview
- Activity
- Settings
Tab content one — body text rendered inside the active panel. Headings, links and emphasised text should remain legible across all themes.
Tab content two — secondary tab. Inline link visibility check.
Tab content three — settings tab content.
Accordion body text. The chevron icon and the header background should both be readable.
Body of the second section.
9. Tables
| ID | Customer | Status | Total |
|---|---|---|---|
| INV-0001 | Acme Ltd | Paid | £4,250.00 |
| INV-0002 | Globex | Pending | £1,180.00 |
| INV-0003 | Initech | Overdue | £760.00 |
| INV-0004 | Soylent Corp | Paid | £12,500.00 |
10. Lists & List Groups
- Onboarding session with the new client
- Migrate legacy invoices to the new system
- Review Q2 procurement reports
- Stage the migration
- Run the dry-run script
- Cut over and verify
- API key
- A unique identifier used to authenticate requests.
- Rate limit
- 1,000 requests per hour, per key.
11. Navigation Components
12. Loaders & Progress
13. Tooltips
14. Modals, Dialogs & Toasts
Confirm payment
Are you sure you want to process the payment of £4,250.00 to Acme Ltd?
A receipt will be emailed to the registered billing address.
15. Slideovers
16. Autocomplete & Pillbox
17. Progression — Timeline & Roadmap
18. Carousel
Slide one — primary background
Caption text rendered against the primary brand colour.
Slide two — success background
Same caption pattern using success colour.
Slide three — warning background
Common contrast hot-spot in light themes.
19. Code & quotes
Inline code: const x = Domma.theme.set('mint-light') should remain readable.
function audit() {
const issues = [];
document.querySelectorAll('*').forEach(el => {
if (failsContrast(el)) issues.push(el);
});
return issues;
}