Design language

The working brand for moja — in light and dark. Everything here renders from the real tokens (src/app/globals.css) and the real UI kit (src/components/ui), so this page is always true: flip the theme switcher above and the whole language flips with it. Re-branding later is a token edit, not a rewrite. Narrative & rules: docs/brand.md.

Logo & assets

The mark works on any background; the wordmark re-inks per surface (in code it inherits currentColor — src/components/ui/Logo.tsx).

Mark · light backgroundsThe arch alone (onyx) — avatars, favicons, tight spots.moja-mark.svg · 512×512

svgDownload

png

1×2×3×

jpg

1×2×3×

Mark · dark backgroundsThe arch alone (daylight) — for dark surfaces.moja-mark-dark.svg · 512×512

svgDownload

png

1×2×3×

jpg

1×2×3×

Wordmark · light backgroundsMark + name in onyx ink.moja-logo-light.svg · 268×96

svgDownload

png

1×2×3×

jpg

1×2×3×

Wordmark · dark backgroundsMark + name in daylight ink.moja-logo-dark.svg · 268×96

svgDownload

png

1×2×3×

jpg

1×2×3×

SVG is the source; PNG (transparent) and JPG (flat background) are rasterized from that same SVG at the picked scale, so they always match. Every download is a static file served with a file-attachment header, so it saves reliably everywhere — including on iOS. The favicon (src/app/icon.svg) and the generated Apple/OG images derive from the same mark. In the wordmark SVGs the type is outlined to vector paths (Unbounded), so it needs no font and renders identically in every viewer.

Color

Components use the semantic tokens — never raw palette steps — so every surface themes itself. Each token is defined once with CSS light-dark(); the swatches below are live. Click a chip to copy its utility class. Brand color is for actions and state, not decoration; amber/red are semantic only.

Typography

Unbounded for headings & the logotype (--font-display, real h1–h6 pick it up automatically); Geist Sans for body copy (--font-sans); Geist Mono for keys, ids, PINs and code (--font-mono). Numbers in stats use tabular figures.

Spacing & radii

One spacing unit = --spacing: 0.25rem; every gap/padding/margin utility derives from it. Cards round with rounded-card (0.75rem), controls with rounded-control (0.5rem); the embeddable widget uses --radius-widget (14px).

Icons

The standard set: Lucide icons animated with Motion (animate-ui), vendored into @/components/icons. Import by name and set the size with a Tailwind size-* class. They animate on animateOnHover, animateOnTap, animateOnView or an animate trigger — or wrap a region in <AnimateIcon animateOnHover> to drive every icon inside it. Hover a tile to see it move.

UI kit

Theming — how it works

@theme {
  --color-surface: light-dark(
    #ffffff,               /* light */
    oklch(0.21 0.04 266)   /* dark  */
  );
}
/* usage: bg-surface, text-ink, border-line … */

:root { color-scheme: light dark; }   /* follow OS   */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark;  }

<div className="scheme-light bg-white …">
  {/* mirrored visitor page */}
</div>