The principles behind the Happenings design system
We draw from Airbnb and Facebook: white space, clear hierarchy, and content that breathes. No decorative gradients, no radial blobs, no visual noise. Every pixel earns its place by serving the user, not the designer.
Neutral zinc palette as the base, never a coloured background. Brand colour is an accent, not the canvas. OKLch colour variables ensure perceptual uniformity across light and dark themes. Four theme variants ship out of the box: default, slate, warm, and stone. Dark mode is first-class — it is never a bolted-on afterthought.
Every margin, padding, and gap snaps to a 4px grid. No magic numbers, no one-off spacing. The grid creates visual rhythm without effort: 4, 8, 12, 16, 20, 24. Component internal spacing follows the same grid so compositions align automatically.
Inter for UI, system stack for fallback. Three weights only: regular (400) for body, medium (500) for labels, semibold (600) for headings. No bold in running text. Line heights are tight on headings (1.2) and relaxed on body (1.5). Letter-spacing is negative on headings, neutral on body.
Every interactive element uses scale-down press feedback — active:scale-[0.97] — and cursor-pointer. No Material ripples, no bounce animations, no spring physics. Transitions are fast (150ms) and functional. The interface should feel snappy and direct, like tapping glass.
Every data-driven surface shows a skeleton while loading. No spinners on full screens, no blank states that flash. Skeletons match the final layout shape so the transition from loading to loaded is seamless. The user should never wonder whether the app is working.
Font Awesome Pro exclusively. No Lucide, no Heroicons, no custom SVGs for UI elements. Consistent weight and sizing across every surface. This constraint eliminates visual inconsistency and keeps the bundle predictable.
Web (shadcn/ui + Tailwind) and Flutter (happenings_ui) share the same tokens, spacing, and interaction patterns. A button should feel the same whether it renders in a browser or on a phone. One design language, two runtimes. Token names and values are identical across platforms.
Components are small, single-purpose, and composable. A Card does not have a built-in header prop — you compose CardHeader inside Card. This mirrors the shadcn/ui philosophy: the source is yours to own, not a black box. Deep prop trees are a code smell; nested children are the API.
UI updates should be live. Polling, stale caches, and manual refreshes are bugs, not features. Every data-driven surface should feel alive — if something changed, the user should see it without asking.
On mobile, key interactions (toggles, destructive actions, success states) fire haptic feedback. Light impact for toggles, medium for confirmations, notification-style for errors. The phone should acknowledge what you did. Web components carry the same intent through visual micro-feedback.
Danish UI copy uses proper æ, ø, å — never ae, oe, aa. For gesture verbs (swipe, scroll, tap) we use the English loanwords that Danish users already know. The brand voice says "what's happening" and "det sker", never "find events". Labels are concise: one or two words, never a sentence.
Happenings Group A/S