Design System

Nordic

Cozy minimalism inspired by Scandinavian design

Warmth in simplicity.
Function with comfort.
Hygge in every detail.

01

Colors

A soft, natural palette inspired by Nordic landscapes. Light foundations with warm wood tones and nature-derived accents create an inviting, comfortable atmosphere.

Foundation Colors
Snow #FAFBFC
Frost #F5F7F8
Cloud #EEF1F3
Mist #E2E7EB
Stone #C8D1D9
Wood Tones
Birch #F5E6D3
Pine #E8D5B7
Oak #D4B896
Walnut #B8956E
Teak #8B6914
Accent Colors
Terracotta #C67B5C
Forest #5B7B6D
Mustard #D4A843
Fjord #7B9AAB
Berry #9B6B7D
Text & Neutrals
Slate #8A99A6
Charcoal #4A5568
Night #2D3748
Deep Night #1A202C
02

Typography

Nunito Sans brings warmth and readability for body text, while Playfair Display adds an elegant, refined touch for headings. Together they balance comfort with sophistication.

Display

64px / Playfair

Hygge

Heading 1

40px / Playfair

Cozy Living

Heading 2

32px / Semibold

Simple Comfort

Heading 3

22px / Semibold

Natural Materials

Body Large

18px / Light

The Danish concept of hygge embraces coziness, contentment, and well-being through simple pleasures.

Body

16px / Regular

Scandinavian design emphasizes minimalism, functionality, and the beauty of natural materials. Clean lines meet warm textures.

Small

14px / Regular

Secondary information and captions use a smaller, comfortable size.

Overline

12px / Semibold

Category Label
03

Spacing

Generous, breathing whitespace is central to Nordic design. Our spacing scale builds from a 4px base, creating rhythm and visual calm throughout the interface.

4px
space-1
8px
space-2
12px
space-3
16px
space-4
24px
space-5
32px
space-6
48px
space-7
64px
space-8
96px
space-9

Whitespace is not empty space. It provides visual breathing room that makes content feel calm and approachable, a key principle of Scandinavian design philosophy.

04

Buttons

Soft, rounded buttons with subtle shadows create an inviting, tactile feel. Warm accent colors draw attention without overwhelming the calm aesthetic.

Variants

Sizes

With Icons

05

Forms

Form elements feature soft borders and rounded corners. Warm focus states provide gentle feedback, making forms feel welcoming rather than clinical.

We will never share your email

Checkboxes

Radio Buttons

Toggle Switch

Dark mode
Notifications
06

Cards

Cards use soft shadows and rounded corners to create depth without harshness. Warm gradients and wood-inspired backgrounds add coziness to content containers.

Comfort First

Design that prioritizes how spaces and interfaces make people feel at ease.

Warm Light

Soft, ambient lighting creates the foundation of a cozy atmosphere in any space.

Natural Layers

Textures and materials from nature bring warmth and authenticity to design.

Feature Cards

01

Functional Beauty

Every element serves a purpose while maintaining aesthetic appeal. Form and function work in harmony.

02

Mindful Simplicity

Reduce complexity to essentials. What remains is thoughtful, intentional, and meaningful.

Embrace Hygge

Create moments of coziness and contentment through thoughtful design that nurtures well-being and connection.

07

Data Table

Tables present information clearly with subtle row highlights and comfortable spacing. Headers use soft backgrounds to delineate without harsh contrast.

Component Status Category Version
Button Ready Interactive 1.2.0
Card Ready Layout 1.1.0
Input Ready Form 1.0.0
Modal Beta Overlay 0.9.0
Toast In Progress Feedback 0.5.0
Tooltip Planned Overlay -
08

Badges

Small status indicators with soft backgrounds and rounded edges. Each color variant corresponds to a semantic meaning while maintaining visual harmony.

Color Variants

Default Terracotta Forest Mustard Fjord

Styles

Solid Soft Outline

With Indicators

Active Pending Warning Inactive
09

Design Principles

The guiding philosophy behind Nordic design. These principles ensure every decision contributes to an experience that feels warm, inviting, and thoughtfully crafted.

Hygge

Create a feeling of coziness, comfort, and contentment. Design should nurture well-being and evoke warmth, making users feel at home in digital spaces.

Lagom

The Swedish concept of "just enough." Not too much, not too little. Strike a balance that feels effortless and avoids both excess and scarcity in design elements.

Natural Connection

Draw inspiration from Nordic landscapes and materials. Use colors, textures, and forms that echo nature, bringing the outdoors in and fostering a sense of organic authenticity.

Functional Clarity

Every element should serve a clear purpose. Embrace minimalism not as an aesthetic choice, but as a commitment to removing barriers between users and their goals.

Remember: Nordic design is not about cold minimalism. It is about creating spaces that feel lived-in and loved, where simplicity serves comfort rather than austerity.