---
version: alpha
name: "Nordic"
description: "생산성 도구를 위한 톤다운된 파랑, 부드러운 회색, 조용한 자신감. Nordic은 스칸디나비아의 절제를 소프트웨어에 가져옵니다. 거의 흰 페이지, 행동에는 톤다운된 피오르 블루, 보조 색으로는 부드러운 바다 초록과 꿀빛, 편안한 크기의 Manrope. 아무것도 소리치지 않으므로 긴 기능 소개 페이지도, 빽빽한 설정 화면도 눈이 편합니다."
colors:
  primary: "#3A5BA0"
  on-primary: "#FFFFFF"
  secondary: "#5E9C8F"
  tertiary: "#C98A3E"
  neutral: "#5C636B"
  surface: "#FBFBFA"
  on-surface: "#1D2125"
typography:
  display-lg:
    fontFamily: "Manrope"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: "Manrope"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Manrope"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Manrope"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Manrope"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Nordic은 스칸디나비아의 절제를 소프트웨어에 가져옵니다. 거의 흰 페이지, 행동에는 톤다운된 피오르 블루, 보조 색으로는 부드러운 바다 초록과 꿀빛, 편안한 크기의 Manrope. 아무것도 소리치지 않으므로 긴 기능 소개 페이지도, 빽빽한 설정 화면도 눈이 편합니다.

## Colors

- **primary (#3A5BA0):** 톤다운된 피오르 블루. 주요 버튼, 링크, 선택한 항목에 씁니다.
- **on-primary (#FFFFFF)**
- **secondary (#5E9C8F):** 바다 초록. 성공, 온라인 상태, 두 번째 차트 계열에 씁니다.
- **tertiary (#C98A3E):** 꿀빛 오커. 하이라이트, 대기 중인 항목, 세 번째 계열에 씁니다.
- **neutral (#5C636B):** 서늘한 회색. 설명, 타임스탬프, 플레이스홀더 텍스트에 씁니다.
- **surface (#FBFBFA):** 은은한 온기가 도는 거의 흰색. 카드는 순백입니다.
- **on-surface (#1D2125)**

## Typography

전체를 Manrope로: 제목은 Bold 700으로 60px 디스플레이에서 20px까지 자간을 약간 좁게, 본문은 Regular 400 16px에 줄 높이 1.55. 단축키와 코드는 JetBrains Mono.

## Layout

최대 1200px 폭의 12컬럼, 거터 24px, 기본 단위 4px. 마케팅 페이지는 넓은 제품 스크린샷을 충분한 여백으로 감싸고, 앱 화면은 슬림한 사이드바와 68자 폭의 읽기 컬럼을 씁니다.

## Shapes

카드, 입력창, 버튼은 12px 모서리. 옅은 회색 1px 테두리, 카드, 팝오버, 스크린샷에는 부드럽고 낮은 그림자.

## Components

부드러운 파랑의 주요 버튼, 둥근 프레임 속 제품 스크린샷, 작은 라인 아이콘이 있는 기능 그리드, 3단 요금제 표, 조용한 후기 카드.

## Do's and Don'ts

- 스크린샷 주변에 넉넉한 여백을 두세요.
- 아이콘은 가늘고 단색으로 유지하세요.
- 톤다운된 팔레트 옆에 채도 높은 브랜드 색을 두지 마세요.
- 그림자를 겹쳐 쌓지 마세요. 부드러운 한 단계면 충분합니다.