name	darkmatter-styles
description	Applies the Darkmatter aesthetic - Commit Mono font,

Darkmatter Styles

Overview

The Darkmatter aesthetic: dark, minimal, monospace. No frameworks, no decorative flourishes. Everything is functional and stark.

The canonical reset, tokens, fonts, and component styles ship in the andromeda-darkmatter-css crate. Do not duplicate the CSS per app — mount the crate's router and link its stylesheet.

Using the Crate

Add to Cargo.toml:

[dependencies]
andromeda-darkmatter-css = { path = "../../crates/darkmatter-css" }

Mount in the Axum app:

let app = Router::new()
    .route("/", get(index))
    .merge(andromeda_darkmatter_css::router());

Link from templates:

<link rel="stylesheet" href="/assets/darkmatter.css" />
<meta name="theme-color" content="#121113" />

The crate serves:

/assets/darkmatter.css — full stylesheet (reset + tokens + components)
/assets/fonts/CommitMono-400-Regular.otf, …-700-Regular.otf
/darkmatter — live component gallery (reference when building)

Core Palette

Token	Value	Usage
Background	`#121113`	All surfaces — html, inputs, buttons, textarea
Foreground	`#ffffff`	All text and borders
Border	`1px solid white`	Inputs, buttons, textarea
Gray Dark	`#1e1c1f`	Code block backgrounds
Gray Mid	`#333`	Dividers, list item borders, section separators
Gray Light	`#555`	Tertiary borders (blockquote borders)

No accent colors, no gradients. Background, white, and grays only.

Visual Hierarchy via Opacity (NOT gray color values)

Use opacity on white text instead of gray hex colors for secondary/tertiary text:

Level	Opacity	Usage
Primary	1.0	Headings, body text, links
Secondary	0.7	Labels, form labels, blockquotes
Tertiary	0.5	Nav links dimmed, table headers, dates, metadata, empty states
Muted	0.3	Null/placeholder values
Error	0.8	Error messages

Do NOT use color: #888 for secondary text. Always use opacity on white text instead.

Typography

Font: "Commit Mono" (served by the crate), fallback monospace, sans-serif
Applied globally via the crate's * { font-family: ... }
Body font-size: 14px
Line-height: 1.6

Font Size Scale

Size	Usage
28px	Site logo/title (bold, uppercase)
18px	Markdown h1
16px	Markdown h2, note/item titles, primary labels
15px	Markdown h3
14px	Body text, inputs, buttons, markdown h4-h6
13px	Inline code, error messages
12px	Nav links, form labels, metadata, dates, table headers, action links

Shared Component Classes

The stylesheet ships ready-to-use classes. Prefer these over writing new rules:

Layout: .header, .logo, .links, .footer
Forms: .form, .form-row, .form-field, .form-actions, .checkbox-field, .switch, .switch-slider
Buttons: button, .btn, .link-button, .link-button.danger
Lists: .item-list / .item / .item-title / .item-meta
Admin lists: .admin-list, .admin-list-item, .admin-toolbar, .admin-list-actions
Feedback: .error, .success, .empty
Tags: .tag, .status-badge, .status-published, .status-draft
Misc: .spinner, .scroll-x, .hidden, .inline-form

Visit /darkmatter on any app that mounts the crate to see live examples.

Writing New Styles

Only add app-specific CSS when the shared sheet does not cover the pattern. When you do:

Match the palette and opacity scale above
border-radius: 0 everywhere
Keep selectors shallow and class-based
Prefer extending existing classes over inventing new ones

What NOT to Do

Do not copy Darkmatter CSS into an app's static assets — link the crate's /assets/darkmatter.css instead
No border-radius — keep all corners sharp
No box shadows or drop shadows
No color other than #121113, #ffffff, and the gray tones (#1e1c1f, #333, #555)
No color: #888 — use opacity on white text for visual hierarchy instead
No external font CDNs — fonts come from the crate
No utility frameworks (no Tailwind, no Bootstrap)
No decorative elements, icons, or emojis

name	darkmatter-styles
description	Applies the Darkmatter aesthetic - Commit Mono font,