Scandinavian Nordic

Also called: Scandi, Nordic minimal, Hygge UI

Bright birch-white rooms, muted pastel accents and friendly rounded type — simple, functional cards that feel cosy rather than clinical.

“Hygge”Organic & NaturalEra: 2010s–presentFriendlyCalmTrustworthyNaturalNew

Open full screen ↗

scandinavian-nordic / landingEN

scandinavian-nordic / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm8pxRadius md12pxRadius lg18pxRadius xl24pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

birch whitemuted Nordic pastelsfjord bluefriendly rounded sanswhite bordered 18px cardspendant lamp illustrationknitted pattern bandpastel tile rotationbutter highlighter headline

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)

Not to be confused with

Japandi →Japandi is oat and charcoal with hairlines, square corners and a mincho serif; Scandinavian Nordic is brighter, rounder, pastel and set in a friendly rounded sans.Flat Design →Flat Design uses bold saturated blocks and no borders; Nordic uses washed pastels, light borders and soft card shadows.Claymorphism →Claymorphism inflates pastel shapes with inner highlights and big radii; Nordic cards are flat, bordered and only moderately rounded.

On mobile

White cards on a warm-white screen, pastel category chips and tiles, and a plain bar tab bar with a fjord-blue active pill behind the icon. The knitted band and lamp illustration appear once (onboarding, featured card) — keep lists clean.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinNunito · 700/800

The quick brown fox

Heading · ThaiMitr · 500/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinNunito Sans · 400/600/700

Clear words make shared decisions.

Body · ThaiAnuphan · 400/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 8px · md 12px · lg 18px · xl 24px · pill 999px`
Border	`1px`
Shadow	`0 10px 28px -14px rgba(36, 48, 58, 0.18)`
Display	`clamp(2.6rem, 5.5vw, 4.4rem)`
Motion	`200ms cubic-bezier(.2,.7,.3,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Scandinavian Nordic (scandinavian-nordic) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 18px;
  --background: #F8F6F2;
  --foreground: #24303A;
  --card: #FFFFFF;
  --card-foreground: #24303A;
  --popover: #FFFFFF;
  --popover-foreground: #24303A;
  --primary: #2F5266;
  --primary-foreground: #FFFFFF;
  --secondary: #EBCBBF;
  --secondary-foreground: #24303A;
  --muted: #F0EBE3;
  --muted-foreground: #5A6570;
  --accent: #F0EBE3;
  --accent-foreground: #24303A;
  --destructive: #B4443B;
  --border: #E4DED4;
  --input: #E4DED4;
  --ring: #2F5266;
  --chart-1: #2F5266;
  --chart-2: #9DBBD0;
  --chart-3: #E3A99A;
  --chart-4: #A9C2A0;
  --chart-5: #E8CD78;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #24303A;
  --sidebar-primary: #2F5266;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F0EBE3;
  --sidebar-accent-foreground: #24303A;
  --sidebar-border: #E4DED4;
  --sidebar-ring: #2F5266;
}

.dark {
  --background: #171C21;
  --foreground: #EEF1F3;
  --card: #1F262D;
  --card-foreground: #EEF1F3;
  --popover: #1F262D;
  --popover-foreground: #EEF1F3;
  --primary: #9DC3DA;
  --primary-foreground: #12202A;
  --secondary: #E9C9BD;
  --secondary-foreground: #24303A;
  --muted: #27303A;
  --muted-foreground: #A8B3BD;
  --accent: #27303A;
  --accent-foreground: #EEF1F3;
  --destructive: #EE8A80;
  --border: #323C46;
  --input: #323C46;
  --ring: #9DC3DA;
  --chart-1: #9DC3DA;
  --chart-2: #5E86A0;
  --chart-3: #E3A99A;
  --chart-4: #A9C2A0;
  --chart-5: #E8CD78;
  --sidebar: #1F262D;
  --sidebar-foreground: #EEF1F3;
  --sidebar-primary: #9DC3DA;
  --sidebar-primary-foreground: #12202A;
  --sidebar-accent: #27303A;
  --sidebar-accent-foreground: #EEF1F3;
  --sidebar-border: #323C46;
  --sidebar-ring: #9DC3DA;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Scandinavian Nordic (scandinavian-nordic) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #F8F6F2;
  --color-surface: #FFFFFF;
  --color-surface-2: #F0EBE3;
  --color-text: #24303A;
  --color-text-muted: #5A6570;
  --color-primary: #2F5266;
  --color-on-primary: #FFFFFF;
  --color-secondary: #EBCBBF;
  --color-on-secondary: #24303A;
  --color-accent: #F2D98D;
  --color-border: #E4DED4;
  --color-success: #3F7D5C;
  --color-warning: #A86E1A;
  --color-danger: #B4443B;
  --color-chart-1: #2F5266;
  --color-chart-2: #9DBBD0;
  --color-chart-3: #E3A99A;
  --color-chart-4: #A9C2A0;
  --color-chart-5: #E8CD78;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(36, 48, 58, 0.05);
  --shadow-md: 0 10px 28px -14px rgba(36, 48, 58, 0.18);
  --shadow-lg: 0 24px 48px -24px rgba(36, 48, 58, 0.24);
  --font-heading: "Nunito", "Mitr", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Anuphan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #171C21;
  --color-surface: #1F262D;
  --color-surface-2: #27303A;
  --color-text: #EEF1F3;
  --color-text-muted: #A8B3BD;
  --color-primary: #9DC3DA;
  --color-on-primary: #12202A;
  --color-secondary: #E9C9BD;
  --color-on-secondary: #24303A;
  --color-accent: #F2D98D;
  --color-border: #323C46;
  --color-success: #86C3A0;
  --color-warning: #E8B866;
  --color-danger: #EE8A80;
  --color-chart-1: #9DC3DA;
  --color-chart-2: #5E86A0;
  --color-chart-3: #E3A99A;
  --color-chart-4: #A9C2A0;
  --color-chart-5: #E8CD78;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Scandinavian Nordic (scandinavian-nordic). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9725,
            0.9647,
            0.949
          ],
          "hex": "#f8f6f2"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.9216,
            0.8902
          ],
          "hex": "#f0ebe3"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.1882,
            0.2275
          ],
          "hex": "#24303a"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.3961,
            0.4392
          ],
          "hex": "#5a6570"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.3216,
            0.4
          ],
          "hex": "#2f5266"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9216,
            0.7961,
            0.749
          ],
          "hex": "#ebcbbf"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.1882,
            0.2275
          ],
          "hex": "#24303a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.851,
            0.5529
          ],
          "hex": "#f2d98d"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.8706,
            0.8314
          ],
          "hex": "#e4ded4"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.4902,
            0.3608
          ],
          "hex": "#3f7d5c"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.4314,
            0.102
          ],
          "hex": "#a86e1a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.2667,
            0.2314
          ],
          "hex": "#b4443b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.3216,
            0.4
          ],
          "hex": "#2f5266"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.7333,
            0.8157
          ],
          "hex": "#9dbbd0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.6627,
            0.6039
          ],
          "hex": "#e3a99a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.7608,
            0.6275
          ],
          "hex": "#a9c2a0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.8039,
            0.4706
          ],
          "hex": "#e8cd78"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.1098,
            0.1294
          ],
          "hex": "#171c21"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.149,
            0.1765
          ],
          "hex": "#1f262d"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1529,
            0.1882,
            0.2275
          ],
          "hex": "#27303a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9451,
            0.9529
          ],
          "hex": "#eef1f3"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.702,
            0.7412
          ],
          "hex": "#a8b3bd"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.7647,
            0.8549
          ],
          "hex": "#9dc3da"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.1255,
            0.1647
          ],
          "hex": "#12202a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.7882,
            0.7412
          ],
          "hex": "#e9c9bd"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.1882,
            0.2275
          ],
          "hex": "#24303a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.851,
            0.5529
          ],
          "hex": "#f2d98d"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1961,
            0.2353,
            0.2745
          ],
          "hex": "#323c46"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5255,
            0.7647,
            0.6275
          ],
          "hex": "#86c3a0"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.7216,
            0.4
          ],
          "hex": "#e8b866"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.5412,
            0.502
          ],
          "hex": "#ee8a80"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.7647,
            0.8549
          ],
          "hex": "#9dc3da"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.5255,
            0.6275
          ],
          "hex": "#5e86a0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.6627,
            0.6039
          ],
          "hex": "#e3a99a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.7608,
            0.6275
          ],
          "hex": "#a9c2a0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.8039,
            0.4706
          ],
          "hex": "#e8cd78"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1882,
              0.2275
            ],
            "hex": "#24303a",
            "alpha": 0.05
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1882,
              0.2275
            ],
            "hex": "#24303a",
            "alpha": 0.18
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 28,
            "unit": "px"
          },
          "spread": {
            "value": -14,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1412,
              0.1882,
              0.2275
            ],
            "hex": "#24303a",
            "alpha": 0.24
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 48,
            "unit": "px"
          },
          "spread": {
            "value": -24,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Nunito",
        "Mitr",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Nunito Sans",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.7,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!