返回风格库
视觉风格minimal

北欧极简风

Scandinavian Minimalism

源自北欧的温暖极简设计,强调自然材质、舒适留白、木质色调和Hygge生活美学,营造宁静温馨的视觉体验。

北欧极简风视觉预览
主色#3d3d3d
次色#f5f0eb
强调色 1#5a7a6b
强调色 2#7ba0b8
强调色 3#c9a88c
强调色 4#607683

AI 实现规则

You are designing in Scandinavian Minimalism style.
- Use warm neutral tones: birch white #f5f0eb, charcoal #3d3d3d, wool gray #d4cdc5
- Accent with natural colors: pine green #5a7a6b, fjord blue #7ba0b8
- Font weights: extralight and light only
- Generous whitespace and breathing room
- Subtle borders and transitions
- No bright colors, no heavy shadows
- Lowercase text for a calm, approachable feel

## Animation & Interaction Rules

- Warm Texture: 动效应传达天然材质触感,优先亮度/色温微调,避免弹跳与缩放。
- Morning Fog: 过渡建议使用 duration-700 + ease-in-out,像晨雾散去般缓慢显现。
- Silent Elevation: hover 提示优先边框和底色细微变化,阴影保持极轻或省略。
- No Impact: active 状态仅做轻微明暗反馈,不做明显形变。

组件预览与实现

font-sans font-medium rounded-lg transition-all duration-200 bg-[#5a7a6b] text-white hover:opacity-90 hover:shadow-sm active:scale-[0.98]
button

按钮

北欧极简风按钮,含蓄优雅

<button className="
  px-10 py-3.5
  bg-[#3d3d3d] text-[#f5f0eb]
  font-light text-sm tracking-wide
  rounded-sm
  hover:bg-[#5a7a6b]
  hover:brightness-95
  active:bg-[#4a6358]
  transition-all duration-700 ease-in-out
">
  explore
</button>
card

卡片

北欧极简风卡片,自然简约

<div className="
  group p-10
  bg-white/60
  rounded-sm
  border border-[#d4cdc5]/30
  hover:border-[#d4cdc5]/80
  hover:bg-[#fcfaf8]
  transition-all duration-700 ease-in-out
">
  <h3 className="text-xl font-light text-[#3d3d3d] mb-4 tracking-wide group-hover:text-[#5a7a6b] transition-colors duration-700">
    Hygge Moment
  </h3>
  <p className="text-sm font-light text-[#a89279] leading-relaxed group-hover:text-[#8a7660] transition-colors duration-700">
    Embracing the quiet comfort of simple things with balanced light, texture, and breath.
  </p>
</div>
input

输入框

北欧极简风输入框,底部边框

<input
  type="text"
  placeholder="Your name"
  className="
    w-full px-4 py-2.5
    bg-transparent
    border border-[#d4cdc5]
    text-[#3d3d3d]
    placeholder-[#d4cdc5]
    focus:outline-none focus:border-[#5a7a6b]
    transition-colors
  "
/>

交互展示

适用范围与设计理念

应用场景

portfolioblogdocs

视觉关键词

北欧斯堪的纳维亚Hygge木质自然温暖留白舒适minimalclean

北欧极简风(Scandinavian Minimalism)源自丹麦、瑞典、挪威、芬兰等北欧国家的设计传统。

核心理念:

- 少即是多:每个元素都有存在的理由

- 自然连接:使用木材、亚麻等自然材质的色调

- Hygge 精神:营造温馨、舒适、幸福的氛围

- 功能之美:实用性与美感的完美平衡

- 光的崇拜:大量留白模拟北欧的自然光线

设计原则:

- 视觉一致性:所有组件必须遵循统一的视觉语言,从色彩到字体到间距保持谐调

- 层次分明:通过颜色深浅、字号大小、留白空间建立清晰的信息层级

- 交互反馈:每个可交互元素都必须有明确的 hover、active、focus 状态反馈

- 响应式适配:设计必须在移动端、平板、桌面端上保持一致的体验

- 无障碍性:确保色彩对比度符合 WCAG 2.1 AA 标准,所有交互元素可键盘访问

应该这样做

  • 使用温暖的灰白色背景 bg-[#f5f0eb]
  • 选择自然木质色系 text-[#a89279]
  • 大量留白创造呼吸感 py-28 px-6
  • 使用细腻的字重 font-extralight font-light
  • 极简的边框和分隔 border-[#d4cdc5]/40
  • 平滑缓慢的过渡动画 transition-colors duration-500
  • 交互以亮度和色温微调为主,模拟羊毛和木材的温润触感
  • 悬停提示优先使用边框或背景的细微变化,避免强阴影和明显位移
  • 次级文本在 hover 时缓慢提亮,强化排版呼吸感

避免这样做

  • 禁止使用高饱和度的鲜艳色彩
  • 禁止使用粗重的边框和阴影
  • 禁止密集排列元素,保持充分留白
  • 禁止使用装饰性字体或过大字号
  • 禁止弹跳、回弹或快速 scale 动效
  • 禁止使用强烈按压反馈(active 仅允许细微明暗变化)

全局 CSS

/* Scandinavian Minimalism */
:root {
  --scandinavian-bg: #f5f0eb;
  --scandinavian-text: #3d3d3d;
  --scandinavian-muted: #a89279;
  --scandinavian-accent: #5a7a6b;
  --scandinavian-border: #d4cdc5;
}
@keyframes scandinavian-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scandinavian-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.scandinavian-card {
  position: relative;
  overflow: hidden;
}

.scandinavian-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(61, 61, 61, 0.05), transparent);
  pointer-events: none;
}

.scandinavian-card:hover::before {
  opacity: 1;
}

.scandinavian-gradient {
  background: linear-gradient(135deg, #3d3d3d, #5a7a6b);
}

.scandinavian-gradient-text {
  background: linear-gradient(135deg, #3d3d3d, #5a7a6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.scandinavian-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(61, 61, 61, 0.08);
}

.scandinavian-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.scandinavian-animate-in {
  animation: scandinavian-fade-in 0.5s ease-out both;
}

布局、色板与 Tokens

主色#3d3d3d
次色#f5f0eb
强调色 1#5a7a6b
强调色 2#7ba0b8
强调色 3#c9a88c
强调色 4#607683
{
  "border": {
    "width": "border",
    "color": "border-[#d4cdc5]/40",
    "radius": "rounded-sm",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-sm",
    "md": "shadow-md",
    "lg": "shadow-lg",
    "none": "shadow-none",
    "hover": "hover:shadow-md",
    "focus": "focus:ring-2 focus:ring-[#5a7a6b]/30",
    "colored": {
      "green": "shadow-[0_4px_14px_rgba(90,122,107,0.15)]",
      "blue": "shadow-[0_4px_14px_rgba(123,160,184,0.15)]"
    }
  },
  "interaction": {
    "transition": "transition-colors duration-500",
    "active": "active:scale-[0.98]"
  },
  "typography": {
    "heading": "font-light tracking-wide",
    "body": "font-light",
    "mono": "font-mono font-light",
    "sizes": {
      "hero": "text-3xl md:text-5xl lg:text-7xl",
      "h1": "text-2xl md:text-4xl",
      "h2": "text-xl md:text-3xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-20 md:py-28 lg:py-36",
    "container": "px-6 md:px-12 lg:px-20",
    "card": "p-6 md:p-8",
    "gap": {
      "sm": "gap-4",
      "md": "gap-8",
      "lg": "gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#f5f0eb]",
      "secondary": "bg-white/60",
      "accent": [
        "bg-[#5a7a6b]/10",
        "bg-[#7ba0b8]/10",
        "bg-[#c9a88c]/10"
      ]
    },
    "text": {
      "primary": "text-[#3d3d3d]",
      "secondary": "text-[#a89279]",
      "muted": "text-[#d4cdc5]"
    },
    "button": {
      "primary": "bg-[#3d3d3d] text-[#f5f0eb]",
      "secondary": "bg-transparent border border-[#d4cdc5] text-[#3d3d3d]",
      "danger": "bg-[#c17767] text-white"
    }
  },
  "forbidden": {
    "classes": [
      "bg-black",
      "bg-gray-900",
      "bg-slate-900",
      "font-black",
      "font-extrabold",
      "font-bold",
      "border-4",
      "border-[3px]",
      "border-[4px]",
      "shadow-[4px_4px",
      "shadow-[8px_8px",
      "rounded-none",
      "rounded-3xl",
      "rounded-full",
      "text-5xl",
      "text-6xl",
      "text-7xl",
      "text-8xl"
    ],
    "patterns": [
      "^bg-(?:black|gray-9|slate-9)",
      "^font-(?:black|extrabold|bold)$",
      "^border-(?:[3-9]|\\d{2})",
      "^shadow-\\[\\d+px_\\d+px_0"
    ],
    "reasons": {
      "bg-black": "Scandinavian style uses warm neutral backgrounds, not pure black",
      "font-black": "Only light and extralight font weights allowed for calm aesthetic",
      "border-4": "Borders must be subtle and thin",
      "rounded-none": "Use rounded-sm for gentle softness"
    }
  },
  "required": {
    "button": [
      "transition-colors",
      "duration-300"
    ],
    "card": [
      "rounded-sm",
      "transition-colors"
    ],
    "input": [
      "bg-transparent",
      "focus:outline-none"
    ]
  }
}

示例提示词

SaaS 着陆页

生成 北欧极简风风格的 SaaS 产品着陆页

Create a SaaS landing page using Scandinavian Minimalism style with hero section, feature grid, testimonials, pricing table, and footer.

作品集展示

生成 北欧极简风风格的作品集页面

Create a portfolio showcase page using Scandinavian Minimalism style with project grid, about section, contact form, and consistent visual language.