Slate

Slate is Stratum’s default theme. Inspired by Wealthsimple’s mobile app, it prioritises readability and trust: high contrast, generous whitespace, pill-shaped buttons, and a single restrained accent color.

Character

Trait	Value
Inspiration	Wealthsimple
Button shape	Pill (radius.full)
Icon weight	Regular
Border radius (md)	8
Border width (thin)	1
Accent	Deep indigo

When to use Slate

Slate works for any product that needs to feel trustworthy, legible, and professional — financial apps, productivity tools, health tracking. It’s the right default when you’re unsure which theme to start with.

Light vs dark

Both variants implement the full AppTheme interface. The dark variant inverts the background/surface hierarchy and shifts the accent slightly warmer to maintain contrast against dark surfaces.

Files

src/tokens/themes/slate.ts

Exports: slateThemeLight, slateThemeDark

Using Slate as a base for custom themes

import { createTheme } from '@/tokens/themes/createTheme';
import { slateThemeLight, slateThemeDark } from '@/tokens/themes/slate';

export const brandLight = createTheme(slateThemeLight, {
  colors: {
    accent:       '#E11D48',
    accentHover:  '#BE123C',
    accentSubtle: '#FFF1F2',
  },
});

Related

• Obsidian — structural, editorial theme
• Quartz — expressive, translucent theme
• Custom Themes — extending any built-in theme
• Theme Registry — registering themes