Internal design reference

MUTO

A compass for life.

UNORDERED LISTS

The bullet list below inherits body styles from _typography.scss. List items use $space-2 bottom margin.

Coral red primary — #F65F50
Aqua secondary — #BAF3FE
Indigo accent — #7377FE
Yellow accent — #FACD61
Neutral scale from 0 → 1000

ORDERED LISTS

Same list styles, decimal variant. Both lists reset padding in _reset.scss and restore it in _typography.scss.

Define tokens in _variables.scss
Expose via CSS custom props in _base.scss
Auto-inject vars with Vite additionalData
Import global sheet in +layout.svelte
Use var(--colour-*) everywhere

Life Log

Aqua / blue-green. var(--colour-secondary) — anchor #BAF3FE. Used for supporting UI elements and highlights.

Field Recorder

Accent violet. var(--colour-indigo) — anchor #7377FE. Used for interactive states, links, and focus rings.

Future Postcards

Accent gold. var(--colour-yellow) — anchor #FACD61. Used for warnings, highlights, and attention states.

Typography

h1 · Handjet · 3rem

The quick brown fox

h2 · Handjet · 2.25rem

The quick brown fox

h3 · Albert Sans · 1.5rem

The quick brown fox

h4 · Albert Sans · 1.25rem

The quick brown fox

h5 · Albert Sans · 1.125rem

The quick brown fox

h6 · Albert Sans · 1rem

The quick brown fox

Body copy — Albert Sans 1rem / 1.6 line-height. Colour is var(--colour-text-secondary). Paragraph spacing uses $space-4 top margin between consecutive paragraphs.

A second paragraph to demonstrate the sibling selector margin. Strong text uses $weight-semibold and var(--colour-text-primary). Italic text uses font-style: italic. Small text uses $text-sm and var(--colour-text-tertiary).

Buttons

All five variants — default size

Size variants — Primary

States

Form Fields

States & Controls

Username Username is available.

Email address Please enter a valid email address.

Checkboxes

Daily journaling reminders

Weekly reflection prompts

Monthly progress summaries

Radio buttons

Free — personal use

Pro — €6 / month

Team — €12 / month

Toggles

Push notifications

Dark mode (manual override)

Columns

This column spans 8 of 12 grid tracks at md+, and collapses to full width on mobile. The .row uses display: grid with a 12-column template and a $grid-gutter gap.

Below the rule. Horizontal rules pick up var(--colour-stroke) for their border colour, and are spaced with $space-6 vertical margin — both defined in _base.scss.

Spacing scale

$space-1 · 4px

$space-2 · 8px

$space-4 · 16px

$space-6 · 24px

$space-8 · 32px

$space-12 · 48px

App background --colour-bg

Card surface --colour-bg-card

Elevated --colour-bg-elevated

Stroke --colour-stroke