{
  "name": "blurssism",
  "version": 3,
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "라이트"
      },
      {
        "id": "dark",
        "name": "다크"
      }
    ],
    "tokens": [
      {
        "name": "paper",
        "value": {
          "light": "#faf6f0",
          "dark": "#16110d"
        },
        "usage": "페이지 바탕(우유 거품). 완전한 흰색·검정이 아닌 따뜻한 크림색으로, 화면의 90% 이상을 paper·ink 계열이 차지합니다."
      },
      {
        "name": "paper-raised",
        "value": {
          "light": "#ffffff",
          "dark": "#201913"
        },
        "usage": "불투명 카드, 입력창, 리스트 그룹, 메뉴 바탕."
      },
      {
        "name": "paper-sunken",
        "value": {
          "light": "#f1e9df",
          "dark": "#0f0b08"
        },
        "usage": "이미지 자리표시, 눌린 영역, 코드 블록, 비활성 버튼 바탕."
      },
      {
        "name": "ink",
        "value": {
          "light": "#21180f",
          "dark": "#f4ece2"
        },
        "usage": "본문·제목 글자(에스프레소). paper, paper-raised, paper-sunken, crema-fill-strong 위에서 사용 (최소 14:1). 2.0부터 버튼 채움색이 아니라 글자색으로만 씁니다."
      },
      {
        "name": "ink-muted",
        "value": {
          "light": "#5e5146",
          "dark": "#b8aa9b"
        },
        "usage": "보조 글자: 나이·지역, 질문 문구, 도움말. paper 계열 세 바탕 모두에서 6:1 이상."
      },
      {
        "name": "ink-subtle",
        "value": {
          "light": "#72655a",
          "dark": "#9b8d7f"
        },
        "usage": "자리표시 글자, 타임스탬프, 비활성 라벨. paper 계열 세 바탕 모두에서 4.5:1 이상."
      },
      {
        "name": "line",
        "value": {
          "light": "#e8ded2",
          "dark": "#372e26"
        },
        "usage": "구분선과 카드 외곽 헤어라인. 장식용이며 의미를 전달하는 테두리에는 쓰지 않습니다."
      },
      {
        "name": "line-strong",
        "value": {
          "light": "#8e8174",
          "dark": "#80736a"
        },
        "usage": "입력창·칩 같은 조작 요소의 테두리. paper·paper-raised에서 3:1 이상."
      },
      {
        "name": "accent",
        "value": {
          "light": "#000000",
          "dark": "#f2f2f2"
        },
        "usage": "강조색(기본은 블랙). primary 버튼 채움, 선택·활성·브랜드 순간에만, 화면 면적의 10% 이내로. 채움 위 글자는 on-accent. 팔레트(data-palette)에 따라 바뀝니다."
      },
      {
        "name": "accent-soft",
        "value": {
          "light": "#eee9e3",
          "dark": "#2a2520"
        },
        "usage": "선택된 칩, 강조 배지, 알림 배경(라떼 거품). 위 글자는 accent-ink 또는 ink."
      },
      {
        "name": "on-accent",
        "value": {
          "light": "#ffffff",
          "dark": "#21180f"
        },
        "usage": "accent 채움 위 글자와 아이콘 (라이트 7.9:1, 다크 8.8:1). 다크에서는 accent가 밝아지므로 어두운 글자로 바뀝니다."
      },
      {
        "name": "accent-ink",
        "value": {
          "light": "#653819",
          "dark": "#e2ab7a"
        },
        "usage": "accent-soft·paper 위 강조 글자, 링크, 활성 탭 라벨 (4.5:1 이상). 본문 글자(ink)와 구분되는 색이어야 합니다. 블랙 팔레트에서는 캐러멜빛이라 검정 채움(accent)과 짝을 이룹니다."
      },
      {
        "name": "positive",
        "value": {
          "light": "#3d6650",
          "dark": "#8fc0a2"
        },
        "usage": "성공·완료·연결됨 상태의 글자와 아이콘(이끼색). paper·positive-soft 위 5:1 이상. 항상 단어나 아이콘과 함께 씁니다."
      },
      {
        "name": "positive-soft",
        "value": {
          "light": "#e3ede6",
          "dark": "#1f2e25"
        },
        "usage": "성공 배지·안내 상자 바탕. 위 글자는 positive."
      },
      {
        "name": "warning",
        "value": {
          "light": "#8a5300",
          "dark": "#f0c46a"
        },
        "usage": "주의 상태 글자와 아이콘(호박색). paper 위 5.9:1, warning-soft 위 5.6:1 이상. 문구와 함께 씁니다."
      },
      {
        "name": "warning-soft",
        "value": {
          "light": "#fbf0dc",
          "dark": "#3a2c12"
        },
        "usage": "주의 안내 상자 바탕. 위 글자는 warning."
      },
      {
        "name": "deco",
        "value": {
          "light": "#d9c8b4",
          "dark": "#8c7663"
        },
        "usage": "장식 면(크레마): 이미지 자리표시 도형, 일러스트 블록, 커버. 글자를 올리지 않는 순수 장식 색이며 팔레트에 따라 바뀝니다."
      },
      {
        "name": "apricot",
        "value": "{deco}",
        "usage": "1.2 이하 호환용 별칭. 새 코드에서는 deco를 쓰세요."
      },
      {
        "name": "danger",
        "value": {
          "light": "#b42318",
          "dark": "#f2867a"
        },
        "usage": "오류 글자, 삭제·신고 같은 위험 동작. paper·danger-soft 위 5.6:1 이상. 색만으로 알리지 말고 항상 문구를 붙입니다."
      },
      {
        "name": "danger-soft",
        "value": {
          "light": "#fbe9e7",
          "dark": "#3b1b17"
        },
        "usage": "오류 안내 상자 바탕. 위 글자는 danger."
      },
      {
        "name": "info",
        "value": {
          "light": "#1d5a8c",
          "dark": "#8cc0ec"
        },
        "usage": "정보성 글자와 안내 링크. paper 위 6.8:1 이상. 파랑이라 danger·positive와 색각 차이 없이 구분됩니다."
      },
      {
        "name": "focus-ring",
        "value": {
          "light": "#1d5a8c",
          "dark": "#8cc0ec"
        },
        "usage": "키보드 포커스 링: 2px 실선, 2px 간격. paper·paper-raised 위 6.8:1 이상이며 크레마 면 위에서도 같은 색을 씁니다."
      },
      {
        "name": "crema-fill",
        "value": {
          "light": "rgba(250, 246, 240, 0.70)",
          "dark": "rgba(30, 23, 18, 0.82)"
        },
        "usage": "블러레마 얇은 크레마 면: 탭바, 내비게이션 바, 이미지 위 캡션, 떠 있는 버튼. 흰 유리가 아니라 우유 거품 색(paper)이 비치는 크레마입니다. 반드시 blur-md 이상의 backdrop-filter와 함께 씁니다. 글자는 짧은 라벨만, 색은 ink만 씁니다(뒤가 검정이나 흰색이어도 4.5:1 이상)."
      },
      {
        "name": "crema-fill-strong",
        "value": {
          "light": "rgba(250, 246, 240, 0.88)",
          "dark": "rgba(28, 21, 16, 0.90)"
        },
        "usage": "두꺼운 블러 크레마: 바텀시트, 다이얼로그, 토스트, 글이 긴 패널. 뒤가 검정이나 흰색이어도 ink와 crema-ink-muted 글자가 4.5:1 이상 유지되도록 불투명도를 높였습니다."
      },
      {
        "name": "crema-ink-muted",
        "value": {
          "light": "#342a21",
          "dark": "#e2d8cc"
        },
        "usage": "두꺼운 크레마 위의 보조 글자(다이얼로그·시트 설명). ink-muted는 반투명 면에서 대비가 모자라 이 색을 씁니다. 얇은 크레마 위에서는 보조 글자도 ink를 씁니다."
      },
      {
        "name": "crema-stroke",
        "value": {
          "light": "rgba(255, 255, 255, 0.55)",
          "dark": "rgba(255, 240, 225, 0.10)"
        },
        "usage": "크레마 면의 1px 테두리. 흰 반사광을 줄이고 가장자리만 살짝 밝힙니다. 조작 요소의 유일한 테두리로 쓰지 마세요."
      },
      {
        "name": "crema-tint-accent",
        "value": {
          "light": "rgba(0, 0, 0, 0.14)",
          "dark": "rgba(242, 242, 242, 0.18)"
        },
        "usage": "크레마 위의 활성 상태(선택된 탭 캡슐). 위 글자는 accent-ink."
      },
      {
        "name": "scrim",
        "value": {
          "light": "rgba(23, 21, 19, 0.40)",
          "dark": "rgba(0, 0, 0, 0.56)"
        },
        "usage": "시트·모달 뒤 화면을 눌러 주는 막. blur-sm과 함께 씁니다."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "sans": "\"Blurssism Sans\", -apple-system, BlinkMacSystemFont, \"Apple SD Gothic Neo\", \"Malgun Gothic\", system-ui, sans-serif",
      "serif": "\"Blurssism Serif\", \"Noto Serif KR\", AppleMyungjo, Batang, serif"
    },
    "groups": [
      {
        "name": "Display",
        "family": "serif",
        "styles": [
          {
            "name": "display",
            "fontSize": "40px",
            "lineHeight": "48px",
            "fontWeight": 700,
            "letterSpacing": "-0.02em",
            "sample": "새로운 시작",
            "usage": "랜딩 히어로, 빈 화면의 첫 문장, 완료 화면. 화면당 한 번."
          },
          {
            "name": "title-1",
            "fontSize": "30px",
            "lineHeight": "38px",
            "fontWeight": 700,
            "letterSpacing": "-0.015em",
            "sample": "오늘의 기록",
            "usage": "페이지 대제목, 큰 카드 제목."
          },
          {
            "name": "quote",
            "fontSize": "22px",
            "lineHeight": "32px",
            "fontWeight": 400,
            "sample": "좋은 도구는 쓰는 사람을 앞세웁니다.",
            "usage": "인용, 사용자가 쓴 글, 강조하고 싶은 한 문장. 사람의 목소리가 드러나는 자리라 명조를 씁니다."
          }
        ]
      },
      {
        "name": "Text",
        "family": "sans",
        "styles": [
          {
            "name": "title-2",
            "fontSize": "22px",
            "lineHeight": "30px",
            "fontWeight": 700,
            "letterSpacing": "-0.01em",
            "sample": "설정",
            "usage": "화면 제목, 시트 제목."
          },
          {
            "name": "title-3",
            "fontSize": "18px",
            "lineHeight": "26px",
            "fontWeight": 600,
            "sample": "관심사",
            "usage": "섹션 제목, 리스트 항목 제목."
          },
          {
            "name": "body",
            "fontSize": "16px",
            "lineHeight": "26px",
            "fontWeight": 400,
            "sample": "변경 사항은 자동으로 저장돼요.",
            "usage": "본문, 설명, 메시지. 한글 가독성을 위해 행간 1.6. 웹 본문 한 줄은 최대 40자(약 640px) 안팎."
          },
          {
            "name": "body-strong",
            "fontSize": "16px",
            "lineHeight": "26px",
            "fontWeight": 600,
            "sample": "알림 3개",
            "usage": "본문 안의 강조, 리스트 제목."
          },
          {
            "name": "body-sm",
            "fontSize": "14px",
            "lineHeight": "22px",
            "fontWeight": 400,
            "sample": "마지막 수정 · 3분 전",
            "usage": "보조 설명, 도움말, 메타 정보."
          },
          {
            "name": "label",
            "fontSize": "15px",
            "lineHeight": "20px",
            "fontWeight": 600,
            "sample": "저장하기",
            "usage": "버튼, 칩, 탭 라벨."
          },
          {
            "name": "caption",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 500,
            "letterSpacing": "0.01em",
            "sample": "오후 9:41",
            "usage": "타임스탬프, 배지, 프롬프트 질문 머리말."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "아이콘과 글자 사이, 배지 안쪽 세로 여백."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "칩 사이 간격, 말풍선 묶음 간격."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "칩 안쪽 좌우 여백, 리스트 항목 사이."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "모바일 화면 좌우 거터, 입력창 안쪽 여백, 리스트 항목 안쪽 여백."
      },
      {
        "name": "space-5",
        "value": "20px",
        "usage": "카드 안쪽 여백, 버튼 좌우 여백."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "카드 사이 간격, 시트 안쪽 여백."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "섹션 사이 간격."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "큰 섹션 구분, 온보딩 상하 여백."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "웹 섹션 사이 간격(데스크톱), 히어로 상하 여백."
      },
      {
        "name": "space-24",
        "value": "96px",
        "usage": "데스크톱 랜딩의 큰 섹션 구분."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-sm",
        "value": "10px",
        "usage": "작은 배지, 툴팁, 체크박스."
      },
      {
        "name": "radius-md",
        "value": "16px",
        "usage": "입력창, 작은 카드, 썸네일, 메뉴."
      },
      {
        "name": "radius-lg",
        "value": "24px",
        "usage": "카드, 크레마 패널, 모달."
      },
      {
        "name": "radius-xl",
        "value": "32px",
        "usage": "바텀시트 위쪽 모서리, 히어로 카드."
      },
      {
        "name": "radius-full",
        "value": "999px",
        "usage": "캡슐: 모든 버튼, 칩, 탭바, 스위치, 원형 아이콘 버튼. 크레마 요소의 기본 형태."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-card",
        "value": {
          "light": "0 1px 2px rgba(28, 25, 23, 0.06), 0 4px 16px rgba(28, 25, 23, 0.05)",
          "dark": "0 1px 2px rgba(0, 0, 0, 0.4)"
        },
        "usage": "불투명 카드. 거의 평면에 가깝게 아주 옅게."
      },
      {
        "name": "shadow-crema",
        "value": {
          "light": "inset 0 1px 0 var(--crema-edge), 0 10px 30px rgba(33, 24, 15, 0.10)",
          "dark": "inset 0 1px 0 var(--crema-edge), 0 10px 30px rgba(0, 0, 0, 0.42)"
        },
        "usage": "떠 있는 크레마 면: 위쪽 안쪽의 크레마 가장자리(crema-edge)와 넓고 옅은 그림자."
      },
      {
        "name": "shadow-sheet",
        "value": {
          "light": "inset 0 1px 0 var(--crema-edge), 0 -8px 40px rgba(33, 24, 15, 0.12)",
          "dark": "inset 0 1px 0 var(--crema-edge), 0 -8px 40px rgba(0, 0, 0, 0.5)"
        },
        "usage": "아래에서 올라오는 바텀시트."
      },
      {
        "name": "shadow-crema-rich",
        "value": {
          "light": "0 4px 12px rgba(33, 24, 15, 0.10), 0 32px 80px rgba(33, 24, 15, 0.20)",
          "dark": "0 4px 12px rgba(0, 0, 0, 0.30), 0 32px 80px rgba(0, 0, 0, 0.50)"
        },
        "usage": "데스크톱 모드(data-crema=\"rich\")에서 얇은 크레마에 더하는 두 겹 그림자."
      },
      {
        "name": "shadow-crema-rich-hover",
        "value": {
          "light": "0 8px 20px rgba(33, 24, 15, 0.14), 0 40px 90px rgba(33, 24, 15, 0.24)",
          "dark": "0 8px 20px rgba(0, 0, 0, 0.36), 0 40px 90px rgba(0, 0, 0, 0.56)"
        },
        "usage": "데스크톱 모드에서 크레마 버튼에 마우스를 올렸을 때."
      },
      {
        "name": "shadow-sheet-rich",
        "value": {
          "light": "0 4px 12px rgba(33, 24, 15, 0.12), 0 40px 100px rgba(33, 24, 15, 0.22)",
          "dark": "0 4px 12px rgba(0, 0, 0, 0.34), 0 40px 100px rgba(0, 0, 0, 0.56)"
        },
        "usage": "데스크톱 모드에서 두꺼운 크레마에 더하는 두 겹 그림자."
      }
    ]
  },
  "blur": {
    "note": "backdrop-filter: blur(var(--blur-…)) saturate(var(--crema-saturate))로 조합합니다.",
    "tokens": [
      {
        "name": "blur-sm",
        "value": "8px",
        "usage": "scrim 뒤 화면, 작은 떠 있는 버튼."
      },
      {
        "name": "blur-md",
        "value": "24px",
        "usage": "얇은 크레마 기본: 탭바, 사진 위 정보 띠. 뒤 색이 젖빛으로 번져 보이는 정도."
      },
      {
        "name": "blur-lg",
        "value": "40px",
        "usage": "두꺼운 블러: 바텀시트, 헤더. 뒤 내용이 형태 없이 색만 남는 정도."
      }
    ]
  },
  "backdrop": {
    "tokens": [
      {
        "name": "crema-saturate",
        "value": "125%",
        "usage": "뒤 색의 채도를 조금만 올립니다. 리퀴드 글래스처럼 쨍하게 올리지 않고, 우유를 섞은 듯 차분하게 둡니다."
      }
    ]
  },
  "meta": {
    "source": "scratch",
    "author": "caffeinecat",
    "concept": "글래스모피즘과 블러 효과의 조합 · 블러레마 · 카페인 팔레트",
    "inspiredBy": [
      "Apple Liquid Glass (반투명 굴절 재질, 캡슐 형태, 하이라이트 테두리)",
      "Samsung One UI (두꺼운 블러 패널, 큰 모서리, 한 손 조작 영역)",
      "Hinge 브랜드 가이드 (흑백 90% 이상, 자연색 강조, 명조 + 산세리프)",
      "토스 TDS (화면당 하나의 행동, 큰 라운드, 평면)"
    ],
    "version": "3.0.0"
  },
  "layout": {
    "note": "반응형 규정: 5단계 브레이크포인트(min-width)와 단계별 그리드. 자세한 규칙은 README의 반응형 절.",
    "tokens": [
      {
        "name": "bp-sm",
        "value": "600px",
        "usage": "sm 시작: 큰 폰 가로·폴더블·작은 태블릿. 2열 카드, 시트 → 가운데 다이얼로그 전 단계."
      },
      {
        "name": "bp-md",
        "value": "768px",
        "usage": "md 시작: 태블릿. 8열 그리드, Dialog가 가운데로, 여백 space-6."
      },
      {
        "name": "bp-lg",
        "value": "1120px",
        "usage": "lg 시작: 노트북·데스크톱. 12열 그리드, TabBar 대신 NavBar 링크."
      },
      {
        "name": "bp-xl",
        "value": "1440px",
        "usage": "xl 시작: 넓은 모니터. 콘텐츠는 content-max에서 멈추고 여백만 늘어납니다."
      },
      {
        "name": "bp-tablet",
        "value": "768px",
        "usage": "1.2 호환용, bp-md와 같습니다."
      },
      {
        "name": "bp-desktop",
        "value": "1120px",
        "usage": "1.2 호환용, bp-lg와 같습니다."
      },
      {
        "name": "content-max",
        "value": "1120px",
        "usage": "웹 페이지 콘텐츠 최대 폭. 가운데 정렬."
      },
      {
        "name": "prose-max",
        "value": "640px",
        "usage": "긴 글 본문 최대 폭 (한글 한 줄 40자 안팎)."
      },
      {
        "name": "touch-min",
        "value": "44px",
        "usage": "모든 터치 대상의 최소 크기. 버튼은 40px(md)일 때도 상하 여백으로 44px 영역을 확보합니다."
      },
      {
        "name": "navbar-h",
        "value": "56px",
        "usage": "상단 내비게이션 바 높이."
      }
    ]
  },
  "palettes": {
    "default": "black",
    "note": "<html data-palette=\"matcha\"> 처럼 고릅니다. 강조색 묶음과 장식색만 바뀌고, 바탕·글자·상태색은 그대로입니다. 카페인 7종과 웹에서 자주 쓰는 색 7종이 있습니다.",
    "list": [
      {
        "id": "black",
        "name": "블랙",
        "group": "caffeine",
        "description": "기본. 블랙커피의 검정 채움과 그 위의 캐러멜빛 글자 강조.",
        "values": {
          "light": {
            "accent": "#000000",
            "accent-soft": "#eee9e3",
            "on-accent": "#ffffff",
            "accent-ink": "#653819",
            "deco": "#d9c8b4",
            "crema-tint-accent": "rgba(0, 0, 0, 0.14)"
          },
          "dark": {
            "accent": "#f2f2f2",
            "accent-soft": "#2a2520",
            "on-accent": "#21180f",
            "accent-ink": "#e2ab7a",
            "deco": "#8c7663",
            "crema-tint-accent": "rgba(242, 242, 242, 0.18)"
          }
        }
      },
      {
        "id": "espresso",
        "name": "에스프레소",
        "group": "caffeine",
        "description": "볶은 원두의 갈색과 크레마. 1.6.0까지의 기본.",
        "values": {
          "light": {
            "accent": "#7a4524",
            "accent-soft": "#f6e7d8",
            "on-accent": "#ffffff",
            "accent-ink": "#653819",
            "deco": "#e6c29b",
            "crema-tint-accent": "rgba(122, 69, 36, 0.14)"
          },
          "dark": {
            "accent": "#e2ab7a",
            "accent-soft": "#3b281a",
            "on-accent": "#21180f",
            "accent-ink": "#ecbf96",
            "deco": "#a8784f",
            "crema-tint-accent": "rgba(226, 171, 122, 0.18)"
          }
        }
      },
      {
        "id": "matcha",
        "name": "말차",
        "group": "caffeine",
        "description": "녹차의 차분한 초록.",
        "values": {
          "light": {
            "accent": "#3e6b35",
            "accent-soft": "#e4efdc",
            "on-accent": "#ffffff",
            "accent-ink": "#335a2c",
            "deco": "#c6dbb0",
            "crema-tint-accent": "rgba(62, 107, 53, 0.14)"
          },
          "dark": {
            "accent": "#a3d48f",
            "accent-soft": "#22311d",
            "on-accent": "#21180f",
            "accent-ink": "#b5dea4",
            "deco": "#6c8c5b",
            "crema-tint-accent": "rgba(163, 212, 143, 0.18)"
          }
        }
      },
      {
        "id": "chai",
        "name": "차이",
        "group": "caffeine",
        "description": "향신료 밀크티의 주황.",
        "values": {
          "light": {
            "accent": "#9a4512",
            "accent-soft": "#fbe6d4",
            "on-accent": "#ffffff",
            "accent-ink": "#843a0e",
            "deco": "#f0bf8c",
            "crema-tint-accent": "rgba(154, 69, 18, 0.14)"
          },
          "dark": {
            "accent": "#f2a66a",
            "accent-soft": "#3d2614",
            "on-accent": "#21180f",
            "accent-ink": "#f6bb8b",
            "deco": "#b5773f",
            "crema-tint-accent": "rgba(242, 166, 106, 0.18)"
          }
        }
      },
      {
        "id": "coldbrew",
        "name": "콜드브루",
        "group": "caffeine",
        "description": "차갑게 우린 커피의 깊은 남색.",
        "values": {
          "light": {
            "accent": "#2b4c74",
            "accent-soft": "#e1e9f3",
            "on-accent": "#ffffff",
            "accent-ink": "#233f61",
            "deco": "#b8cce3",
            "crema-tint-accent": "rgba(43, 76, 116, 0.14)"
          },
          "dark": {
            "accent": "#9cc1ea",
            "accent-soft": "#1c2737",
            "on-accent": "#21180f",
            "accent-ink": "#b2cff0",
            "deco": "#5a7799",
            "crema-tint-accent": "rgba(156, 193, 234, 0.18)"
          }
        }
      },
      {
        "id": "mocha",
        "name": "모카",
        "group": "caffeine",
        "description": "초콜릿과 장미빛 코코아.",
        "values": {
          "light": {
            "accent": "#7c3a46",
            "accent-soft": "#f5e2e3",
            "on-accent": "#ffffff",
            "accent-ink": "#6a303b",
            "deco": "#e5bdb6",
            "crema-tint-accent": "rgba(124, 58, 70, 0.14)"
          },
          "dark": {
            "accent": "#e8a5b0",
            "accent-soft": "#3a2126",
            "on-accent": "#21180f",
            "accent-ink": "#efbac2",
            "deco": "#a36b6a",
            "crema-tint-accent": "rgba(232, 165, 176, 0.18)"
          }
        }
      },
      {
        "id": "classic",
        "name": "클래식",
        "group": "caffeine",
        "description": "1.2까지의 자두색.",
        "values": {
          "light": {
            "accent": "#7a3b69",
            "accent-soft": "#f4e6ef",
            "on-accent": "#ffffff",
            "accent-ink": "#6a2f5b",
            "deco": "#f3c4a4",
            "crema-tint-accent": "rgba(122, 59, 105, 0.14)"
          },
          "dark": {
            "accent": "#e0a6cf",
            "accent-soft": "#3a2434",
            "on-accent": "#1c1917",
            "accent-ink": "#e8b6d9",
            "deco": "#a8735a",
            "crema-tint-accent": "rgba(224, 166, 207, 0.18)"
          }
        }
      },
      {
        "id": "blue",
        "name": "블루",
        "group": "web",
        "description": "링크와 버튼에서 가장 익숙한 파랑.",
        "values": {
          "light": {
            "accent": "#1d5bb8",
            "accent-soft": "#e3ecf9",
            "on-accent": "#ffffff",
            "accent-ink": "#184c9a",
            "deco": "#b9cff0",
            "crema-tint-accent": "rgba(29, 91, 184, 0.14)"
          },
          "dark": {
            "accent": "#8eb9f5",
            "accent-soft": "#1b2738",
            "on-accent": "#21180f",
            "accent-ink": "#a9cbf8",
            "deco": "#4f74a6",
            "crema-tint-accent": "rgba(142, 185, 245, 0.18)"
          }
        }
      },
      {
        "id": "indigo",
        "name": "인디고",
        "group": "web",
        "description": "SaaS와 개발 도구에서 흔한 남보라.",
        "values": {
          "light": {
            "accent": "#4a3fb5",
            "accent-soft": "#e8e6f8",
            "on-accent": "#ffffff",
            "accent-ink": "#3d3399",
            "deco": "#c7c2ef",
            "crema-tint-accent": "rgba(74, 63, 181, 0.14)"
          },
          "dark": {
            "accent": "#aaa6f4",
            "accent-soft": "#24213d",
            "on-accent": "#21180f",
            "accent-ink": "#bfbcf7",
            "deco": "#6a64ad",
            "crema-tint-accent": "rgba(170, 166, 244, 0.18)"
          }
        }
      },
      {
        "id": "violet",
        "name": "바이올렛",
        "group": "web",
        "description": "창작 도구와 커뮤니티의 보라.",
        "values": {
          "light": {
            "accent": "#7038a8",
            "accent-soft": "#f0e5f8",
            "on-accent": "#ffffff",
            "accent-ink": "#5f2e90",
            "deco": "#dcc4ef",
            "crema-tint-accent": "rgba(112, 56, 168, 0.14)"
          },
          "dark": {
            "accent": "#cfa6f2",
            "accent-soft": "#2f2140",
            "on-accent": "#21180f",
            "accent-ink": "#dbbcf5",
            "deco": "#8c67ad",
            "crema-tint-accent": "rgba(207, 166, 242, 0.18)"
          }
        }
      },
      {
        "id": "teal",
        "name": "틸",
        "group": "web",
        "description": "헬스케어와 핀테크의 청록.",
        "values": {
          "light": {
            "accent": "#0e6b66",
            "accent-soft": "#dcefec",
            "on-accent": "#ffffff",
            "accent-ink": "#0b5a56",
            "deco": "#a9d9d2",
            "crema-tint-accent": "rgba(14, 107, 102, 0.14)"
          },
          "dark": {
            "accent": "#78d0c4",
            "accent-soft": "#16302d",
            "on-accent": "#21180f",
            "accent-ink": "#95dccf",
            "deco": "#3f8a80",
            "crema-tint-accent": "rgba(120, 208, 196, 0.18)"
          }
        }
      },
      {
        "id": "emerald",
        "name": "에메랄드",
        "group": "web",
        "description": "결제와 성장 서비스의 선명한 초록.",
        "values": {
          "light": {
            "accent": "#13704a",
            "accent-soft": "#dcf0e4",
            "on-accent": "#ffffff",
            "accent-ink": "#0f5e3e",
            "deco": "#a7dcbc",
            "crema-tint-accent": "rgba(19, 112, 74, 0.14)"
          },
          "dark": {
            "accent": "#7fd6a5",
            "accent-soft": "#163222",
            "on-accent": "#21180f",
            "accent-ink": "#9ce0b8",
            "deco": "#3f8f63",
            "crema-tint-accent": "rgba(127, 214, 165, 0.18)"
          }
        }
      },
      {
        "id": "pink",
        "name": "핑크",
        "group": "web",
        "description": "커머스와 뷰티의 분홍.",
        "values": {
          "light": {
            "accent": "#b0306a",
            "accent-soft": "#f9e3ec",
            "on-accent": "#ffffff",
            "accent-ink": "#962659",
            "deco": "#f0bcd2",
            "crema-tint-accent": "rgba(176, 48, 106, 0.14)"
          },
          "dark": {
            "accent": "#f49ac0",
            "accent-soft": "#3b1f2b",
            "on-accent": "#21180f",
            "accent-ink": "#f7b3d0",
            "deco": "#ad5f80",
            "crema-tint-accent": "rgba(244, 154, 192, 0.18)"
          }
        }
      },
      {
        "id": "graphite",
        "name": "그래파이트",
        "group": "web",
        "description": "색 없이 먹색 하나로 쓰는 단색.",
        "values": {
          "light": {
            "accent": "#3b3632",
            "accent-soft": "#ebe6e0",
            "on-accent": "#ffffff",
            "accent-ink": "#2e2a26",
            "deco": "#cfc6bc",
            "crema-tint-accent": "rgba(59, 54, 50, 0.14)"
          },
          "dark": {
            "accent": "#e2dbd2",
            "accent-soft": "#2a241f",
            "on-accent": "#21180f",
            "accent-ink": "#ece6de",
            "deco": "#7d7268",
            "crema-tint-accent": "rgba(226, 219, 210, 0.18)"
          }
        }
      }
    ],
    "groups": [
      {
        "id": "caffeine",
        "name": "카페인",
        "nameEn": "Caffeine"
      },
      {
        "id": "web",
        "name": "웹 기본",
        "nameEn": "Web essentials"
      }
    ]
  },
  "backgrounds": {
    "default": "cream",
    "note": "<html data-background=\"white\"> 처럼 고릅니다. 바탕 묶음(paper·paper-raised·paper-sunken·line)만 바뀌고 글자·강조·상태색은 그대로입니다. 아무 색이나 쓰려면 applyBackgroundColor(\"#hex\").",
    "list": [
      {
        "id": "cream",
        "name": "크림",
        "description": "기본. 우유 거품 같은 따뜻한 크림색.",
        "values": {
          "light": {
            "paper": "#faf6f0",
            "paper-raised": "#ffffff",
            "paper-sunken": "#f1e9df",
            "line": "#e8ded2"
          },
          "dark": {
            "paper": "#16110d",
            "paper-raised": "#201913",
            "paper-sunken": "#0f0b08",
            "line": "#372e26"
          }
        }
      },
      {
        "id": "white",
        "name": "화이트",
        "description": "색 없는 흰 바탕. 카드는 테두리로 구분합니다.",
        "values": {
          "light": {
            "paper": "#ffffff",
            "paper-raised": "#ffffff",
            "paper-sunken": "#f4f4f4",
            "line": "#e6e6e6"
          },
          "dark": {
            "paper": "#121212",
            "paper-raised": "#1c1c1c",
            "paper-sunken": "#0a0a0a",
            "line": "#2e2e2e"
          }
        }
      },
      {
        "id": "gray",
        "name": "그레이",
        "description": "옅은 회색 바탕 위에 흰 카드.",
        "values": {
          "light": {
            "paper": "#f2f2f2",
            "paper-raised": "#ffffff",
            "paper-sunken": "#e8e8e8",
            "line": "#dddddd"
          },
          "dark": {
            "paper": "#1a1a1a",
            "paper-raised": "#242424",
            "paper-sunken": "#111111",
            "line": "#363636"
          }
        }
      }
    ]
  },
  "material": {
    "note": "블러레마(Blurema): blurssism의 크레마 재질. 블러 위에 우유 거품 색, 크레마 띠, 거품 결을 겹칩니다. 문서에서는 이 재질로 만든 면을 크레마라고 부릅니다. 순서: crema-band → crema-grain → crema-fill. 1.6부터 크레마 띠는 위에만 고이지 않고 면 전체에 옅게 남습니다.",
    "tokens": [
      {
        "name": "crema-edge",
        "value": {
          "light": "rgba(192, 150, 113, 0.42)",
          "dark": "rgba(174, 125, 83, 0.36)"
        },
        "usage": "크레마 가장자리: 면 위쪽 1px 안쪽 선. 띠와 같은 색을 조금 더 진하게 쓴 \"띠의 첫 줄\"이라 테두리·띠와 한 몸으로 이어집니다. color-mix를 지원하는 브라우저에서는 팔레트를 따라 바뀝니다."
      },
      {
        "name": "crema-tint-mix",
        "value": {
          "light": "65%",
          "dark": "90%"
        },
        "usage": "크레마 색(crema-tint)에서 deco의 비율. 나머지는 accent입니다. 다크에서는 deco를 더 많이 섞어 띠가 너무 밝아지지 않게 합니다."
      },
      {
        "name": "crema-fill-tint",
        "value": {
          "light": "12%",
          "dark": "10%"
        },
        "usage": "크레마 채움에 섞는 팔레트 장식색(deco)의 비율(1.6.2). 팔레트·브랜드색을 바꾸면 블러레마 색이 조금 따라갑니다. 0%면 1.6.1과 같습니다."
      },
      {
        "name": "crema-grain-tint",
        "value": {
          "light": "0%",
          "dark": "40%"
        },
        "usage": "거품 결에 입히는 팔레트 장식색(deco)의 세기(1.6.3). 결 위에 color 블렌드로 얹어 밝기는 그대로 두고 색조만 바꿉니다. 라이트는 결이 배경을 따라가므로 0%입니다."
      },
      {
        "name": "crema-band-top",
        "value": {
          "light": "30%",
          "dark": "24%"
        },
        "usage": "크레마 띠 맨 위 가장자리의 세기."
      },
      {
        "name": "crema-band-lip",
        "value": {
          "light": "18%",
          "dark": "13%"
        },
        "usage": "위에서 10px 지점의 세기."
      },
      {
        "name": "crema-band-mid",
        "value": {
          "light": "10%",
          "dark": "8%"
        },
        "usage": "40% 높이의 세기."
      },
      {
        "name": "crema-band-low",
        "value": {
          "light": "6%",
          "dark": "5%"
        },
        "usage": "맨 아래의 세기. 0이 아니라서 크레마 색이 면 전체에 남습니다."
      },
      {
        "name": "crema-light-strength",
        "value": {
          "light": "36%",
          "dark": "10%"
        },
        "usage": "데스크톱 모드 포인터 빛의 세기. 다크에서는 밝은 글자의 대비를 지키려고 약하게 둡니다."
      },
      {
        "name": "crema-rich-fill",
        "value": {
          "light": "88%",
          "dark": "100%"
        },
        "usage": "데스크톱 모드에서 얇은 크레마 채움을 남기는 비율. 다크는 대비 때문에 줄이지 않습니다."
      },
      {
        "name": "crema-band",
        "value": {
          "light": "linear-gradient(180deg, rgba(192, 150, 113, 0.3), rgba(192, 150, 113, 0.286) 1px, rgba(192, 150, 113, 0.259) 3px, rgba(192, 150, 113, 0.227) 6px, rgba(192, 150, 113, 0.197) 10px, rgba(192, 150, 113, 0.18) 16px, rgba(192, 150, 113, 0.156) 24px, rgba(192, 150, 113, 0.132) 40px, rgba(192, 150, 113, 0.1) 40%, rgba(192, 150, 113, 0.06))",
          "dark": "linear-gradient(180deg, rgba(174, 125, 83, 0.24), rgba(174, 125, 83, 0.227) 1px, rgba(174, 125, 83, 0.203) 3px, rgba(174, 125, 83, 0.173) 6px, rgba(174, 125, 83, 0.145) 10px, rgba(174, 125, 83, 0.13) 16px, rgba(174, 125, 83, 0.115) 24px, rgba(174, 125, 83, 0.1) 40px, rgba(174, 125, 83, 0.08) 40%, rgba(174, 125, 83, 0.05))"
        },
        "usage": "크레마 띠: 위 가장자리에서 16px까지 ease-out 곡선으로 옅어지고 아래까지 옅게 남습니다(계단 없음). 팔레트의 deco와 accent를 섞은 색(crema-tint)이고, 세기는 crema-band-top·lip·mid·low가 정합니다."
      },
      {
        "name": "crema-grain",
        "value": {
          "light": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .31 0 0 0 0 .22 0 0 0 .26 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
          "dark": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .9 0 0 0 0 .84 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"
        },
        "usage": "거품 결: 고운 정지 노이즈. 크레마를 투명한 액체가 아니라 젖빛 거품처럼 보이게 합니다. 2.0부터 결을 옅게 둬서(라이트 .26, 다크 .16) 면이 매트한 판이 아니라 흐린 유리로 읽힙니다. 정지 이미지지만 blend-mode와 함께 칠해지므로 크레마 개수 예산 안에서만 씁니다."
      },
      {
        "name": "crema-light",
        "value": {
          "light": "rgba(192, 150, 113, 0.36)",
          "dark": "rgba(174, 125, 83, 0.10)"
        },
        "usage": "데스크톱 모드(data-crema=\"rich\") 전용: 포인터 주변에 크게 번지는 캐러멜빛. 크레마 색(--crema-tint)을 따라갑니다."
      }
    ]
  }
}