Loading content
Internal Framework · v1.0
Nordic Studio Framework is a reusable, production-ready base for hundreds of client websites — a single design system, theme engine, config layer, and SEO and accessibility foundation. Configure once, ship refined sites endlessly.
A restrained, three-role palette in OKLCH: cool Nordic neutrals, an ink foreground, and a single fjord-blue accent. Every value is a semantic token that adapts automatically between the Daylight and Polar Night themes.
Two families do the work: Geist for interface and prose, Geist Mono for code, labels and token values. A tight modular scale keeps display type confident and body type calm and legible.
Interface & body
Code, labels & tokens
A single spacing scale drives layout rhythm, a shared radius token unifies corners, and soft, cool-tinted shadows convey elevation without heaviness — the calm surfaces expected of premium Nordic work.
Framer Motion presets encode one restrained easing curve and a small set of entrances. Every preset is reduced-motion aware — visitors who opt out receive instant, static content. Pick a preset to preview it.
Every client-specific value lives in a single typed config. Change it once and the whole site — metadata, structured data, contact blocks, hours and imagery — updates in lockstep. The panel on the right is rendered live from that config.
A production-ready folder structure that scales from a single landing page to hundreds of client sites — clear boundaries between tokens, config, utilities, types and components.
OKLCH colour, type scale, spacing, radius and elevation — declared once as tokens.
app/globals.css · design/tokens.ts
Flash-free light / dark / system switching with a persisted preference.
components/theme
A single typed source of truth for every client-specific value.
config/site.config.ts
Metadata, Open Graph, Twitter cards and JSON-LD generated from config.
lib/seo.ts
Skip links, visible focus, reduced-motion support and semantic landmarks.
components/a11y
Layout and motion primitives, with section folders ready to fill per project.
components/*
nordic-studio/
├─ app/
│ ├─ globals.css · design tokens & themes
│ └─ layout.tsx · fonts · providers · SEO
├─ config/
│ └─ site.config.ts · single source of truth
├─ design/
│ ├─ tokens.ts · typed token mirror
│ └─ motion.ts · Framer Motion presets
├─ lib/
│ ├─ utils.ts · format.ts · seo.ts
├─ hooks/ · media-query · reduced-motion
├─ types/ · config & shared types
└─ components/
├─ layout/ motion/ theme/
├─ a11y/ seo/ ui/
└─ sections/ · build per client