# Scandinavian Nordic > Bright birch-white rooms, muted pastel accents and friendly rounded type — simple, functional cards that feel cosy rather than clinical. - Nickname: Hygge - Also called: Scandi, Nordic minimal, Hygge UI - Category: Organic & Natural - Moods: Friendly, Calm, Trustworthy, Natural - Industries: E‑commerce, Real Estate, Kids & Family, SaaS, Food & Restaurant - Style page: https://uilingo.dev/styles/scandinavian-nordic/ Scandinavian Nordic is the cosy, practical side of minimalism. Backgrounds are warm white and pale birch, accents are soft Nordic pastels — fjord blue, blush, lichen sage and butter — and type is a friendly rounded sans. Cards are simple, rounded (12–18px) and honest about what they do, with light borders and the gentlest shadow. Illustrations are folk-simple shapes: a pendant lamp, pastel colour blocks, a knitted sweater band. It reads as calm, warm and very usable. ## Best for - Furniture, homeware and lifestyle e-commerce - Family, parenting and kids-adjacent services - Friendly consumer SaaS and booking apps - Cafés, bakeries and neighbourhood shops ## Avoid for - Luxury fashion that needs drama - Gaming, nightlife and edgy youth brands - Hardcore developer or trading tools ## Do - Keep the canvas warm white (#F8F6F2) with pure-white cards - Use one fjord-blue primary and rotate pastels for categories and tiles - Round moderately: cards 18px, buttons/inputs 12px, small chips 8px, room panel 24px — never full blobs ## Don't - Don’t saturate the pastels — they should look washed by Nordic light - Don’t add heavy shadows or glossy 3D - Avoid thin serif headlines and charcoal-only palettes (that is Japandi) ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Scandinavian Nordic" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Bright birch-white rooms, muted pastel accents and friendly rounded type — simple, functional cards that feel cosy rather than clinical. Design keywords: birch white, muted Nordic pastels, fjord blue, friendly rounded sans, white bordered 18px cards, pendant lamp illustration, knitted pattern band, pastel tile rotation, butter highlighter headline. ## Visual language The cosy, practical side of minimalism. A warm birch-white canvas (#F8F6F2) holds pure-white cards with light #E4DED4 borders, 12-18px corners and the gentlest shadow. Colour is soft Nordic light: one fjord-blue primary (#2F5266) plus washed pastels — mist blue, blush, lichen sage and butter — used as flat fills for tiles, chips, icons and badges. Type is a friendly rounded sans (Latin Nunito 800 display / 700 h2-h4; Thai Mitr 500 at every heading level). Illustrations are folk-simple: a pendant lamp with a warm glow over a table with a vase, and a knitted-sweater diamond band. It feels bright, calm, honest and very usable. ## Signature details (must be visible) - Pastel tile rotation: feature cards, category chips and list icons cycle the tile tints mist #DCE7EF, blush #F4E1D9, lichen #DFE8DA and butter #F7EBC6 (borderless when filled). Token secondary #EBCBBF is only the accent-button fill; token accent #F2D98D is reserved (charts/small marks) — the hero highlighter uses butter #F7EBC6 - White bordered cards: #FFFFFF, 1px #E4DED4, 18px radius, shadow 0 1px 2px rgba(36,48,58,.05); hover lifts 2px to a soft 0 10px 28px -14px shadow - Pendant-lamp illustration in CSS, shown in the web hero and on onboarding/article art: a 2px #24303A cord, a #E8CD78 half-dome lamp (radius 999px 999px 0 0) whose 5px fjord-blue rim is a solid band along the bottom edge of the half-dome, a warm radial glow, a #9DBBD0 oval vase and a #A9C2A0 pebble on a birch table line - Knitted band: 16px tall, 24px repeat on #F0EBE3: 2px #2F5266 rules at y 1.5 and 14.5, a 10px #D99483 diamond centred, 1.7px #2F5266 dots between diamonds; used along the CTA bottom, footer top and featured card. The knit diamonds map to chart blush #E3A99A's family - Butter highlighter behind the hero headline. Latin: linear-gradient(transparent 70%, #F7EBC6 70% 92%, transparent 92%) with box-decoration-break clone. Thai: a gradient breaks across Thai lines, so draw it per word group (each group wrapped in a no-break span) as text-decoration: underline 0.34em #F7EBC6 with text-underline-offset -0.2em and text-decoration-skip-ink none - Fjord-blue #2F5266 as the single strong colour: primary buttons, active nav and tab states, chart line - KPI cards carry a 4px pastel top inset (mist / blush / lichen / butter) ## Design tokens — use these exact values Colours (light mode): - background #F8F6F2 - surface #FFFFFF - surface-2 #F0EBE3 - text #24303A - text-muted #5A6570 - primary #2F5266 (text on it #FFFFFF) - secondary #EBCBBF (text on it #24303A) - accent #F2D98D - border #E4DED4 - success #3F7D5C · warning #A86E1A · danger #B4443B - chart series #2F5266, #9DBBD0, #E3A99A, #A9C2A0, #E8CD78 Radius: sm 8px, md 12px, lg 18px, xl 24px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(36, 48, 58, 0.05)`, md `0 10px 28px -14px rgba(36, 48, 58, 0.18)`, lg `0 24px 48px -24px rgba(36, 48, 58, 0.24)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 200ms cubic-bezier(.2,.7,.3,1) ## Typography (Latin + Thai) - Headings: Nunito 700/800 with Thai fallback Mitr 500/700 - Body: Nunito Sans 400/600/700 with Thai fallback Anuphan 400/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Nunito+Sans:wght@400;600;700&family=Mitr:wght@500;700&family=Anuphan:wght@400;600&display=swap - CSS stacks: heading `"Nunito", "Mitr", system-ui, sans-serif`; body `"Nunito Sans", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.5vw, 4.4rem), heading weight 700, heading tracking -0.015em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Mitr’s chunky rounded geometry mirrors Nunito’s soft terminals in headlines, and every Thai heading uses Mitr 500 because it matches the colour of Nunito 800 (700, loaded only as the token fallback, is too black); loopless, open Anuphan matches the friendly, even colour of Nunito Sans in body text. ## Components - Primary button: fjord blue #2F5266, white text, 12px radius, no shadow; hover = color-mix(in srgb, #2F5266 86%, #000) - Secondary button: white with a light border; hover fills with mist blue - Accent button: blush #EBCBBF fill, #24303A text, 12px radius, no shadow — used for one secondary promo action (e.g. a discount or gift CTA), never twice per view - Inputs: white, 12px radius, light border; focus = fjord-blue border + 4px mist ring - Eyebrow: mist-blue pill with fjord-blue bold text, sentence case - Badges: pastel pills with darkened text of the same hue: success #2F5E44 on lichen, warning #6E5112 on butter, danger #923A31 on blush, default #2F5266 on mist - Chips: pills; chip text is #24303A on every pastel tint (mist / blush / lichen / butter); the active chip is #FFFFFF on fjord blue - Segmented control: birch track with a white raised selected segment in fjord-blue text - Tables: zebra rows tinted with birch #F0EBE3; sentence-case headers - Charts: 3px fjord-blue line + 2.5px mist line with soft area, solid light grid, rounded pastel bars rotating colours, rounded funnel steps - FAQ toggle: a 26px mist circle with a drawn plus that becomes a minus on butter when open - Headings: Latin Nunito 800 display / 700 h2-h4; Thai Mitr 500 for every heading level including h4, card titles, form legends, KPI and price values (700 reads too black beside Nunito); Latin digits inside Thai headings stay in Nunito - Showcase tabs: CSS-only tabs, active = 3px fjord-blue underline. Logo strip: Latin wordmarks (fictional maker or shop names) in Nunito 800, each preceded by a small outline glyph, 65% opacity, text-muted - Footer: starts with the 16px knit band, then a birch #F0EBE3 block with the logo, 3-4 link columns in muted text and a mist newsletter input ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: centred headline with the product visual below it. Navigation: bar style. Sections in order: hero → logos → features → showcase → testimonials → pricing → faq → cta. Feature section as grid. Centred hero: bold rounded headline with a butter highlighter, short lead, two buttons, then a birch 'room' panel (24px radius) topped by a 96×12px pill that crops the 16px knit band (tile 24×16px, centred vertically; do not scale it), centred on its top edge; the pendant lamp, vase and pebble fill the left third of the panel and a white card floats on the right — either a product or order card (product photo block, price, add-to-cart) for shopper-facing builds, or the chart + two KPI cards for admin/analytics builds. Then a logo strip, a three-up pastel feature grid, showcase with tabs, testimonials, white pricing cards with one fjord-blue plan, FAQ and a fjord-blue CTA ending in a knitted band. The footer starts with the same 16px knit band, then a birch #F0EBE3 block with the logo, 3-4 muted link columns and a mist newsletter input. Dashboards use a top nav with a mist-blue active pill, white cards and pastel chart colours. Thai radio/segment labels never wrap mid-phrase (keep-all, cards size to their label). ## Content Use realistic product copy (fictional brand) suited to: Furniture, homeware and lifestyle e-commerce. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Keep the canvas warm white (#F8F6F2) with pure-white cards - Use one fjord-blue primary and rotate pastels for categories and tiles - Round moderately: cards 18px, buttons/inputs 12px, small chips 8px, room panel 24px — never full blobs ## Don't - Don’t saturate the pastels — they should look washed by Nordic light - Don’t add heavy shadows or glossy 3D - Avoid thin serif headlines and charcoal-only palettes (that is Japandi) - Oat/charcoal palettes, hairline-only cards and serif headlines (reads as Japandi) - Saturated primaries or bold flat colour blocks without borders (reads as Flat Design) - Puffy inner-highlight 3D pastel shapes and 30px+ radii (reads as Claymorphism) - Heavy shadows, gradients on buttons or glass blur - Clip-art Viking, flag or snowflake motifs — keep folk references to the knitted band - Pure grey cold UI with no warmth in the background ## Stack notes One self-contained HTML file with a