{ "color": { "primitive": { "purple": { "50": "#F9F4FF", "100": "#F2E8FF", "200": "#E5CEFF", "300": "#D6AEFF", "400": "#C588FF", "500": "#AA4AF4", "600": "#9D3EE4", "700": "#862FC6", "800": "#6F26A4", "900": "#582082", "950": "#421763" }, "gray": { "50": "#FAF9FC", "100": "#F3F0F7", "200": "#E7E1EE", "300": "#D5CCDF", "400": "#B2A7BF", "500": "#897B99", "600": "#6D5F7D", "700": "#584A68", "800": "#443651", "900": "#2D2435", "950": "#1C1722" }, "success": { "50": "#ECFCEF", "100": "#D8F6DD", "200": "#B3E9BD", "300": "#8AD89B", "400": "#5CC277", "500": "#15A04C", "600": "#009240", "700": "#007C33", "800": "#006629", "900": "#005121", "950": "#013D18" }, "warning": { "50": "#FFF5ED", "100": "#FFE8D6", "200": "#FFCEA7", "300": "#FCB67E", "400": "#F39E52", "500": "#E3831F", "600": "#C56A00", "700": "#A65500", "800": "#823F00", "900": "#673200", "950": "#4E2500" }, "danger": { "50": "#FFF3F7", "100": "#FFE3ED", "200": "#FFC6D9", "300": "#FFA4C4", "400": "#FF79A5", "500": "#FF5488", "600": "#DC3E71", "700": "#B92E5B", "800": "#922346", "900": "#651C35", "950": "#471324" }, "info": { "50": "#F1F8FF", "100": "#E0EFFF", "200": "#BDDDFF", "300": "#92C8FF", "400": "#5CAEFF", "500": "#0082EB", "600": "#007AE1", "700": "#0067C2", "800": "#0054A1", "900": "#00437F", "950": "#003261" }, "accent": { "sky": "#9DD1E0", "lime": "#B0DE33", "charcoal": "#434643", "indigo": "#3C2981", "pink": "#FA729A", "yellow": "#F5CF52" }, "profile": { "red": "#D7374C", "coral": "#FB7153", "yellow": "#F5D95D", "lime": "#C6DF6A", "mint": "#7FDAC6", "sky": "#58BFE8", "violet": "#6655D2", "silver": "#B3B3B3", "charcoal": "#2F2F2F", "gold": "#CDAB53" }, "brandGraphic": { "splupPurple": "#AA4AF4", "deepPurple": "#6655D2", "platterPink": "#FA97E2", "violet": "#7841C4", "hotPink": "#FF2CBF", "coral": "#FF5488", "peach": "#FF925D", "lime": "#F9F871", "sky": "#48B5F4", "cyan": "#27E5F2", "blue": "#398FE8", "mint": "#07E7B4", "aqua": "#39B9CC", "splashBase": "#F4BDD0", "splashLavender": "#CBB2F5", "splashPink": "#F09BED", "splashApricot": "#F3AE78", "splashCream": "#F2D58F", "satinLavender": "#EBDCFF", "satinPink": "#FBE0F2", "satinCream": "#FFF0CC" } }, "semantic": { "light": { "bg-default": "#FFFFFF", "bg-subtle": "#FAF9FC", "bg-brand-subtle": "#F9F4FF", "bg-inverse": "#2D2435", "layer-basement": "#F3F0F7", "layer-default": "#FFFFFF", "layer-floating": "#FFFFFF", "layer-modal": "#FFFFFF", "fill-brand": "#AA4AF4", "fill-brand-pressed": "#9D3EE4", "fill-brand-tonal": "#F2E8FF", "fill-subtle": "#F3F0F7", "fill-disabled": "#E7E1EE", "text-strong": "#1C1722", "text-default": "#443651", "text-subtle": "#6D5F7D", "text-disabled": "#B2A7BF", "text-brand": "#862FC6", "text-on-brand": "#FFFFFF", "text-inverse": "#FAF9FC", "border-default": "#E7E1EE", "border-strong": "#D5CCDF", "border-brand": "#AA4AF4", "border-brand-subtle": "#E5CEFF", "scrim": "rgba(0,0,0,.455)", "scrim-muted": "rgba(0,0,0,.173)", "text-placeholder": "#6D5F7D", "icon-default": "#443651", "icon-subtle": "#6D5F7D", "icon-disabled": "#B2A7BF", "border-control": "#897B99", "border-focus": "#862FC6", "selection-bg": "#F2E8FF", "selection-fg": "#582082", "selection-border": "#862FC6", "unselected-bg": "#FFFFFF", "unselected-fg": "#6D5F7D", "unselected-border": "#897B99", "action-primary-bg": "#9D3EE4", "action-primary-hover": "#862FC6", "action-primary-pressed": "#6F26A4", "action-primary-fg": "#FFFFFF", "action-secondary-bg": "#F2E8FF", "action-secondary-hover": "#E5CEFF", "action-secondary-pressed": "#D6AEFF", "action-secondary-fg": "#582082", "action-neutral-bg": "#F3F0F7", "action-neutral-hover": "#E7E1EE", "action-neutral-pressed": "#D5CCDF", "action-neutral-fg": "#443651", "action-ghost-bg": "#FFFFFF", "action-ghost-hover": "#F3F0F7", "action-ghost-pressed": "#E7E1EE", "action-ghost-fg": "#862FC6", "action-danger-bg": "#B92E5B", "action-danger-hover": "#922346", "action-danger-pressed": "#651C35", "action-danger-fg": "#FFFFFF", "action-disabled-bg": "#E7E1EE", "action-disabled-fg": "#897B99", "status-success-bg": "#ECFCEF", "status-success-fg": "#00662C", "status-warning-bg": "#FFF5ED", "status-warning-fg": "#894900", "status-danger-bg": "#FFF3F7", "status-danger-fg": "#922346", "status-info-bg": "#F1F8FF", "status-info-fg": "#00539A" }, "dark": { "bg-default": "#1C1722", "bg-subtle": "#2D2435", "bg-brand-subtle": "#AA4AF424", "bg-inverse": "#F3F0F7", "layer-basement": "#1C1722", "layer-default": "#2D2435", "layer-floating": "#443651", "layer-modal": "#443651", "fill-brand": "#C588FF", "fill-brand-pressed": "#D6AEFF", "fill-brand-tonal": "#582082", "fill-subtle": "#443651", "fill-disabled": "#584A68", "text-strong": "#FAF9FC", "text-default": "#E7E1EE", "text-subtle": "#B2A7BF", "text-disabled": "#6D5F7D", "text-brand": "#D6AEFF", "text-on-brand": "#421763", "text-inverse": "#2D2435", "border-default": "#443651", "border-strong": "#584A68", "border-brand": "#C588FF", "border-brand-subtle": "#AA4AF447", "scrim": "rgba(0,0,0,.455)", "scrim-muted": "rgba(0,0,0,.173)", "text-placeholder": "#B2A7BF", "icon-default": "#E7E1EE", "icon-subtle": "#B2A7BF", "icon-disabled": "#6D5F7D", "border-control": "#897B99", "border-focus": "#D6AEFF", "selection-bg": "#582082", "selection-fg": "#F2E8FF", "selection-border": "#D6AEFF", "unselected-bg": "#2D2435", "unselected-fg": "#B2A7BF", "unselected-border": "#897B99", "action-primary-bg": "#C588FF", "action-primary-hover": "#D6AEFF", "action-primary-pressed": "#E5CEFF", "action-primary-fg": "#421763", "action-secondary-bg": "#582082", "action-secondary-hover": "#6F26A4", "action-secondary-pressed": "#862FC6", "action-secondary-fg": "#F2E8FF", "action-neutral-bg": "#443651", "action-neutral-hover": "#584A68", "action-neutral-pressed": "#6D5F7D", "action-neutral-fg": "#FAF9FC", "action-ghost-bg": "#1C1722", "action-ghost-hover": "#2D2435", "action-ghost-pressed": "#443651", "action-ghost-fg": "#D6AEFF", "action-danger-bg": "#FFA4C4", "action-danger-hover": "#FFC6D9", "action-danger-pressed": "#FFE3ED", "action-danger-fg": "#471324", "action-disabled-bg": "#584A68", "action-disabled-fg": "#B2A7BF", "status-success-bg": "#003D18", "status-success-fg": "#A9EDBB", "status-warning-bg": "#4E2500", "status-warning-fg": "#FFD0A6", "status-danger-bg": "#471324", "status-danger-fg": "#FFC6D9", "status-info-bg": "#003160", "status-info-fg": "#B9DDFF" } }, "callout": { "light": { "neutral": { "bg": "#F5F1F8", "fg": "#5B5561", "contrast": 6.45 }, "pink": { "bg": "#FFEEF1", "fg": "#853D50", "contrast": 6.74 }, "peach": { "bg": "#FFEFE8", "fg": "#854324", "contrast": 6.64 }, "yellow": { "bg": "#FFF2D2", "fg": "#6F5400", "contrast": 6.41 }, "lime": { "bg": "#EDF9D5", "fg": "#4F6015", "contrast": 6.34 }, "green": { "bg": "#DFFCE5", "fg": "#22683B", "contrast": 6.17 }, "mint": { "bg": "#D7FCF3", "fg": "#006858", "contrast": 6.12 }, "sky": { "bg": "#E5F6FF", "fg": "#056180", "contrast": 6.26 }, "blue": { "bg": "#EEF3FF", "fg": "#405490", "contrast": 6.54 }, "lavender": { "bg": "#F4F0FF", "fg": "#5D4B89", "contrast": 6.62 } }, "dark": { "neutral": { "bg": "#302C32", "fg": "#D5CEDB", "contrast": 8.93 }, "pink": { "bg": "#41242B", "fg": "#FABECB", "contrast": 8.79 }, "peach": { "bg": "#41261A", "fg": "#F9C3AB", "contrast": 8.85 }, "yellow": { "bg": "#372C11", "fg": "#E4CF9D", "contrast": 8.96 }, "lime": { "bg": "#2A3117", "fg": "#C9D9A6", "contrast": 9.01 }, "green": { "bg": "#1B3422", "fg": "#AFDFBB", "contrast": 9.03 }, "mint": { "bg": "#0F352E", "fg": "#9FE1D1", "contrast": 9.03 }, "sky": { "bg": "#123240", "fg": "#A2DAF6", "contrast": 8.93 }, "blue": { "bg": "#242D45", "fg": "#BED0FF", "contrast": 8.89 }, "lavender": { "bg": "#302942", "fg": "#D4C8FA", "contrast": 8.83 } } } }, "spacing": { "scale": { "x0_5": 2, "x1": 4, "x1_5": 6, "x2": 8, "x2_5": 10, "x3": 12, "x3_5": 14, "x4": 16, "x4_5": 18, "x5": 20, "x6": 24, "x7": 28, "x8": 32, "x9": 36, "x10": 40, "x12": 48, "x13": 52, "x14": 56, "x16": 64 }, "semantic": { "global-gutter": 16, "between-chips": 8, "component-default": 12, "nav-to-title": 20, "screen-bottom": 56, "between-text": 6 } }, "screenMargin": 16, "radius": { "base": 16, "nested": 8, "full": 999, "cornerSmoothing": 0.6 }, "typography": { "fontFamily": "Pretendard", "letterSpacing": "-1%", "styles": { "display/md": { "size": 28, "weight": 700, "lineHeight": 1.3 }, "title/lg": { "size": 22, "weight": 700, "lineHeight": 1.35 }, "title/md": { "size": 19, "weight": 700, "lineHeight": 1.4 }, "title/sm": { "size": 17, "weight": 600, "lineHeight": 1.4 }, "body/lg": { "size": 17, "weight": 400, "lineHeight": 1.6 }, "body/md": { "size": 16, "weight": 400, "lineHeight": 1.55 }, "body/sm": { "size": 14, "weight": 400, "lineHeight": 1.5 }, "label/lg": { "size": 16, "weight": 600, "lineHeight": 1 }, "label/md": { "size": 14, "weight": 600, "lineHeight": 1 }, "label/sm": { "size": 13, "weight": 600, "lineHeight": 1 }, "caption/md": { "size": 12, "weight": 400, "lineHeight": 1.4 }, "caption/sm": { "size": 11, "weight": 500, "lineHeight": 1.3 } } }, "elevation": { "1": "0 1px 3px rgba(0,0,0,.06)", "2": "0 4px 12px rgba(0,0,0,.09)", "3": "0 12px 32px rgba(0,0,0,.14)" }, "gradient": { "brandGraphic": { "version": "2026-09-27", "usage": "브랜드 배경·장식용. 텍스트·상태·CTA 시맨틱 컬러를 대체하지 않음.", "palettes": [ { "id": "purple-pink", "number": "01", "name": "퍼플 · 핑크", "colors": [ "#AA4AF4", "#6655D2", "#FA97E2" ], "tokens": [ "color.primitive.brandGraphic.splupPurple", "color.primitive.brandGraphic.deepPurple", "color.primitive.brandGraphic.platterPink" ], "phase": 0.2 }, { "id": "deep-purple", "number": "02", "name": "딥 퍼플 · 바이올렛", "colors": [ "#6655D2", "#7841C4", "#AA4AF4" ], "tokens": [ "color.primitive.brandGraphic.deepPurple", "color.primitive.brandGraphic.violet", "color.primitive.brandGraphic.splupPurple" ], "phase": 1.2 }, { "id": "pink-coral", "number": "03", "name": "핑크 · 코랄", "colors": [ "#FA97E2", "#FF2CBF", "#FF5488" ], "tokens": [ "color.primitive.brandGraphic.platterPink", "color.primitive.brandGraphic.hotPink", "color.primitive.brandGraphic.coral" ], "phase": 2.1 }, { "id": "peach-yellow", "number": "04", "name": "피치 · 옐로", "colors": [ "#FF925D", "#F9F871", "#FA97E2" ], "tokens": [ "color.primitive.brandGraphic.peach", "color.primitive.brandGraphic.lime", "color.primitive.brandGraphic.platterPink" ], "phase": 3.2 }, { "id": "cyan-blue", "number": "05", "name": "시안 · 블루", "colors": [ "#48B5F4", "#27E5F2", "#398FE8" ], "tokens": [ "color.primitive.brandGraphic.sky", "color.primitive.brandGraphic.cyan", "color.primitive.brandGraphic.blue" ], "phase": 4.1 }, { "id": "mint-lime", "number": "06", "name": "민트 · 라임", "colors": [ "#07E7B4", "#F9F871", "#39B9CC" ], "tokens": [ "color.primitive.brandGraphic.mint", "color.primitive.brandGraphic.lime", "color.primitive.brandGraphic.aqua" ], "phase": 5.1 } ], "surface": { "viewBox": "0 0 320 320", "shell": "M160 8 C272 8 301 14 309 73 C314 111 314 209 309 247 C301 306 272 312 160 312 C48 312 19 306 11 247 C6 209 6 111 11 73 C19 14 48 8 160 8 Z", "blur": 22, "edgeBlur": 9, "edgeWidth": 22, "finishes": { "soft": { "rimOpacity": 0.16, "lightOpacity": 0, "grainOpacity": 0 }, "satin": { "rimOpacity": 0.65, "lightOpacity": 0.3, "grainOpacity": 0 }, "grain": { "rimOpacity": 0.2, "lightOpacity": 0, "grainOpacity": 0.15, "grainSeed": 12, "grainFrequency": 0.85 } } }, "splash": { "id": "ditto-splash", "name": "Ditto Original Splash", "key": "#F4BDD0", "colors": [ "#CBB2F5", "#F09BED", "#F3AE78", "#F2D58F" ], "blur": 120, "direction": "기존 앱 스플래시 색상을 기준으로 살구·크림의 채도를 높이고 라벤더·핑크의 강도를 맞춘 배합. 상단 라벤더, 좌측 핑크, 우측 살구, 하단 크림.", "source": "기존 스플래시 추출색을 바탕으로 채도 보정한 색상. 원본 디자인 토큰과는 다름.", "finish": { "type": "satin", "edge": { "type": "tinted satin bloom", "blur": 38, "width": 145, "opacity": 0.76, "colors": [ "#EBDCFF", "#FBE0F2", "#FFF0CC" ] }, "description": "하트 음영 없이 외곽에만 새틴 반사광 적용." } }, "symbol": { "source": "design/brand/color-system/appicon-source.svg", "tint": "#FFFFFF", "splashWidthRatio": 0.32, "splashCenterYRatio": 0.46 }, "status": "legacy-source; current specification: design/tokens/color-system.json" }, "widgetGraphic": { "indigo": { "name": "Violet Soda", "kind": "brand-mix", "colors": [ "#CC92F8", "#FCB8EB", "#70EEF6", "#8AF1F8" ], "key": "#AA4AF4", "stops": [ [ 0, "#CC92F8" ], [ 0.4, "#FCB8EB" ], [ 0.84, "#70EEF6" ], [ 1, "#8AF1F8" ] ], "glow": "#EEDBFD", "glowOpacity": 0.2, "sourceColors": [ "#AA4AF4", "#FA97E2", "#27E5F2" ], "sourceTokens": [ "splupPurple", "platterPink", "cyan" ], "titleColor": "#2D2435" }, "peach": { "name": "Ocean Mint", "kind": "brand-mix", "colors": [ "#A399E4", "#83CDF8", "#5BEFCE", "#79F2D6" ], "key": "#6655D2", "stops": [ [ 0, "#A399E4" ], [ 0.4, "#83CDF8" ], [ 0.84, "#5BEFCE" ], [ 1, "#79F2D6" ] ], "glow": "#E0DDF6", "glowOpacity": 0.2, "sourceColors": [ "#6655D2", "#48B5F4", "#07E7B4" ], "sourceTokens": [ "deepPurple", "sky", "mint" ], "titleColor": "#2D2435" }, "pink": { "name": "Peach Blossom", "kind": "brand-mix", "colors": [ "#FCC1EE", "#FF8BAE", "#FFB794", "#FFC4A8" ], "key": "#FA97E2", "stops": [ [ 0, "#FCC1EE" ], [ 0.4, "#FF8BAE" ], [ 0.84, "#FFB794" ], [ 1, "#FFC4A8" ] ], "glow": "#FEEAF9", "glowOpacity": 0.2, "sourceColors": [ "#FA97E2", "#FF5488", "#FF925D" ], "sourceTokens": [ "platterPink", "coral", "peach" ], "titleColor": "#2D2435" }, "violet": { "name": "Lime Bloom", "kind": "brand-mix", "colors": [ "#CC92F8", "#FBFA9E", "#5BEFCE", "#79F2D6" ], "key": "#AA4AF4", "stops": [ [ 0, "#CC92F8" ], [ 0.4, "#FBFA9E" ], [ 0.84, "#5BEFCE" ], [ 1, "#79F2D6" ] ], "glow": "#EEDBFD", "glowOpacity": 0.2, "sourceColors": [ "#AA4AF4", "#F9F871", "#07E7B4" ], "sourceTokens": [ "splupPurple", "lime", "mint" ], "titleColor": "#2D2435" }, "cyan": { "name": "Daydream", "kind": "brand-mix", "colors": [ "#91D3F8", "#FCB8EB", "#FFB794", "#FFC4A8" ], "key": "#48B5F4", "stops": [ [ 0, "#91D3F8" ], [ 0.4, "#FCB8EB" ], [ 0.84, "#FFB794" ], [ 1, "#FFC4A8" ] ], "glow": "#DAF0FD", "glowOpacity": 0.2, "sourceColors": [ "#48B5F4", "#FA97E2", "#FF925D" ], "sourceTokens": [ "sky", "platterPink", "peach" ], "titleColor": "#2D2435" }, "mint": { "name": "Mint Aurora", "kind": "brand-mix", "colors": [ "#6AF1D2", "#6CEDF6", "#C788F8", "#D19DF9" ], "key": "#07E7B4", "stops": [ [ 0, "#6AF1D2" ], [ 0.4, "#6CEDF6" ], [ 0.84, "#C788F8" ], [ 1, "#D19DF9" ] ], "glow": "#CDFAF0", "glowOpacity": 0.2, "sourceColors": [ "#07E7B4", "#27E5F2", "#AA4AF4" ], "sourceTokens": [ "mint", "cyan", "splupPurple" ], "titleColor": "#2D2435" }, "periwinkle": { "name": "Pink Sorbet", "kind": "brand-mix", "colors": [ "#FF80D9", "#FFB591", "#FBFAA1", "#FCFBB2" ], "key": "#FF2CBF", "stops": [ [ 0, "#FF80D9" ], [ 0.4, "#FFB591" ], [ 0.84, "#FBFAA1" ], [ 1, "#FCFBB2" ] ], "glow": "#FFD5F2", "glowOpacity": 0.2, "sourceColors": [ "#FF2CBF", "#FF925D", "#F9F871" ], "sourceTokens": [ "hotPink", "peach", "lime" ], "titleColor": "#2D2435" }, "apricot": { "name": "Sunny Blue", "kind": "brand-mix", "colors": [ "#88BCF1", "#FBFA9E", "#FFB794", "#FFC4A8" ], "key": "#398FE8", "stops": [ [ 0, "#88BCF1" ], [ 0.4, "#FBFA9E" ], [ 0.84, "#FFB794" ], [ 1, "#FFC4A8" ] ], "glow": "#D7E9FA", "glowOpacity": 0.2, "sourceColors": [ "#398FE8", "#F9F871", "#FF925D" ], "sourceTokens": [ "blue", "lime", "peach" ], "titleColor": "#2D2435" }, "rose": { "name": "Coral Garden", "kind": "brand-mix", "colors": [ "#AE8DDC", "#FF8BAE", "#5BEFCE", "#79F2D6" ], "key": "#7841C4", "stops": [ [ 0, "#AE8DDC" ], [ 0.4, "#FF8BAE" ], [ 0.84, "#5BEFCE" ], [ 1, "#79F2D6" ] ], "glow": "#E4D9F3", "glowOpacity": 0.2, "sourceColors": [ "#7841C4", "#FF5488", "#07E7B4" ], "sourceTokens": [ "violet", "coral", "mint" ], "titleColor": "#2D2435" }, "lagoon": { "name": "Candy Cloud", "kind": "brand-mix", "colors": [ "#7DEFF7", "#FCB8EB", "#FBFAA1", "#FCFBB2" ], "key": "#27E5F2", "stops": [ [ 0, "#7DEFF7" ], [ 0.4, "#FCB8EB" ], [ 0.84, "#FBFAA1" ], [ 1, "#FCFBB2" ] ], "glow": "#D4FAFC", "glowOpacity": 0.2, "sourceColors": [ "#27E5F2", "#FA97E2", "#F9F871" ], "sourceTokens": [ "cyan", "platterPink", "lime" ], "titleColor": "#2D2435" }, "lime": { "name": "Berry Sunset", "kind": "brand-mix", "colors": [ "#A399E4", "#FFB591", "#FF74D5", "#FF8DDC" ], "key": "#6655D2", "stops": [ [ 0, "#A399E4" ], [ 0.4, "#FFB591" ], [ 0.84, "#FF74D5" ], [ 1, "#FF8DDC" ] ], "glow": "#E0DDF6", "glowOpacity": 0.2, "sourceColors": [ "#6655D2", "#FF925D", "#FF2CBF" ], "sourceTokens": [ "deepPurple", "peach", "hotPink" ], "titleColor": "#2D2435" }, "midnight": { "name": "Purple Punch", "kind": "brand-mix", "colors": [ "#CC92F8", "#78B3EF", "#FF8EB0", "#FFA3BF" ], "key": "#AA4AF4", "stops": [ [ 0, "#CC92F8" ], [ 0.4, "#78B3EF" ], [ 0.84, "#FF8EB0" ], [ 1, "#FFA3BF" ] ], "glow": "#EEDBFD", "glowOpacity": 0.2, "sourceColors": [ "#AA4AF4", "#398FE8", "#FF5488" ], "sourceTokens": [ "splupPurple", "blue", "coral" ], "titleColor": "#2D2435" }, "silver": { "name": "Spring Fizz", "kind": "brand-mix", "colors": [ "#FCC1EE", "#56EFCC", "#FBFAA1", "#FCFBB2" ], "key": "#FA97E2", "stops": [ [ 0, "#FCC1EE" ], [ 0.4, "#56EFCC" ], [ 0.84, "#FBFAA1" ], [ 1, "#FCFBB2" ] ], "glow": "#FEEAF9", "glowOpacity": 0.2, "sourceColors": [ "#FA97E2", "#07E7B4", "#F9F871" ], "sourceTokens": [ "platterPink", "mint", "lime" ], "titleColor": "#2D2435" }, "amber": { "name": "Apricot Wave", "kind": "brand-mix", "colors": [ "#88D5E0", "#FFB591", "#A682D8", "#B698DF" ], "key": "#39B9CC", "stops": [ [ 0, "#88D5E0" ], [ 0.4, "#FFB591" ], [ 0.84, "#A682D8" ], [ 1, "#B698DF" ] ], "glow": "#D7F1F5", "glowOpacity": 0.2, "sourceColors": [ "#39B9CC", "#FF925D", "#7841C4" ], "sourceTokens": [ "aqua", "peach", "violet" ], "titleColor": "#2D2435" }, "berry": { "name": "Coral Reef", "kind": "brand-mix", "colors": [ "#FF98B8", "#6CEDF6", "#7CB5F0", "#94C3F3" ], "key": "#FF5488", "stops": [ [ 0, "#FF98B8" ], [ 0.4, "#6CEDF6" ], [ 0.84, "#7CB5F0" ], [ 1, "#94C3F3" ] ], "glow": "#FFDDE7", "glowOpacity": 0.2, "sourceColors": [ "#FF5488", "#27E5F2", "#398FE8" ], "sourceTokens": [ "coral", "cyan", "blue" ], "titleColor": "#2D2435" }, "melon-soda": { "name": "Citrus Lilac", "kind": "brand-mix", "colors": [ "#FBFBAA", "#C584F8", "#FFB794", "#FFC4A8" ], "key": "#F9F871", "stops": [ [ 0, "#FBFBAA" ], [ 0.4, "#C584F8" ], [ 0.84, "#FFB794" ], [ 1, "#FFC4A8" ] ], "glow": "#FEFEE3", "glowOpacity": 0.2, "sourceColors": [ "#F9F871", "#AA4AF4", "#FF925D" ], "sourceTokens": [ "lime", "splupPurple", "peach" ], "titleColor": "#2D2435" }, "peach-pool": { "name": "Pink Lagoon", "kind": "brand-mix", "colors": [ "#FF80D9", "#83CDF8", "#5BEFCE", "#79F2D6" ], "key": "#FF2CBF", "stops": [ [ 0, "#FF80D9" ], [ 0.4, "#83CDF8" ], [ 0.84, "#5BEFCE" ], [ 1, "#79F2D6" ] ], "glow": "#FFD5F2", "glowOpacity": 0.2, "sourceColors": [ "#FF2CBF", "#48B5F4", "#07E7B4" ], "sourceTokens": [ "hotPink", "sky", "mint" ], "titleColor": "#2D2435" }, "petal-moss": { "name": "Twilight Pop", "kind": "brand-mix", "colors": [ "#A399E4", "#FCB8EB", "#7CD1DD", "#94D9E3" ], "key": "#6655D2", "stops": [ [ 0, "#A399E4" ], [ 0.4, "#FCB8EB" ], [ 0.84, "#7CD1DD" ], [ 1, "#94D9E3" ] ], "glow": "#E0DDF6", "glowOpacity": 0.2, "sourceColors": [ "#6655D2", "#FA97E2", "#39B9CC" ], "sourceTokens": [ "deepPurple", "platterPink", "aqua" ], "titleColor": "#2D2435" }, "butter-denim": { "name": "Peach Splash", "kind": "brand-mix", "colors": [ "#FFBE9E", "#56EFCC", "#70EEF6", "#8AF1F8" ], "key": "#FF925D", "stops": [ [ 0, "#FFBE9E" ], [ 0.4, "#56EFCC" ], [ 0.84, "#70EEF6" ], [ 1, "#8AF1F8" ] ], "glow": "#FFE9DF", "glowOpacity": 0.2, "sourceColors": [ "#FF925D", "#07E7B4", "#27E5F2" ], "sourceTokens": [ "peach", "mint", "cyan" ], "titleColor": "#2D2435" }, "coral-lilac": { "name": "Electric Petal", "kind": "brand-mix", "colors": [ "#AE8DDC", "#FBFA9E", "#FF74D5", "#FF8DDC" ], "key": "#7841C4", "stops": [ [ 0, "#AE8DDC" ], [ 0.4, "#FBFA9E" ], [ 0.84, "#FF74D5" ], [ 1, "#FF8DDC" ] ], "glow": "#E4D9F3", "glowOpacity": 0.2, "sourceColors": [ "#7841C4", "#F9F871", "#FF2CBF" ], "sourceTokens": [ "violet", "lime", "hotPink" ], "titleColor": "#2D2435" }, "lilac-lagoon": { "name": "Blue Petal", "kind": "brand-mix", "colors": [ "#88BCF1", "#FCB8EB", "#5BEFCE", "#79F2D6" ], "key": "#398FE8", "stops": [ [ 0, "#88BCF1" ], [ 0.4, "#FCB8EB" ], [ 0.84, "#5BEFCE" ], [ 1, "#79F2D6" ] ], "glow": "#D7E9FA", "glowOpacity": 0.2, "sourceColors": [ "#398FE8", "#FA97E2", "#07E7B4" ], "sourceTokens": [ "blue", "platterPink", "mint" ], "titleColor": "#2D2435" }, "blush-cocoa": { "name": "Peach Orbit", "kind": "brand-mix", "colors": [ "#7DEFF7", "#FFB591", "#C788F8", "#D19DF9" ], "key": "#27E5F2", "stops": [ [ 0, "#7DEFF7" ], [ 0.4, "#FFB591" ], [ 0.84, "#C788F8" ], [ 1, "#D19DF9" ] ], "glow": "#D4FAFC", "glowOpacity": 0.2, "sourceColors": [ "#27E5F2", "#FF925D", "#AA4AF4" ], "sourceTokens": [ "cyan", "peach", "splupPurple" ], "titleColor": "#2D2435" }, "aqua-apricot": { "name": "Tropical Pop", "kind": "brand-mix", "colors": [ "#FF98B8", "#FBFA9E", "#7CD1DD", "#94D9E3" ], "key": "#FF5488", "stops": [ [ 0, "#FF98B8" ], [ 0.4, "#FBFA9E" ], [ 0.84, "#7CD1DD" ], [ 1, "#94D9E3" ] ], "glow": "#FFDDE7", "glowOpacity": 0.2, "sourceColors": [ "#FF5488", "#F9F871", "#39B9CC" ], "sourceTokens": [ "coral", "lime", "aqua" ], "titleColor": "#2D2435" }, "iris-cream": { "name": "Sky Ribbon", "kind": "brand-mix", "colors": [ "#91D3F8", "#A37ED7", "#FCBAEC", "#FCC7EF" ], "key": "#48B5F4", "stops": [ [ 0, "#91D3F8" ], [ 0.4, "#A37ED7" ], [ 0.84, "#FCBAEC" ], [ 1, "#FCC7EF" ] ], "glow": "#DAF0FD", "glowOpacity": 0.2, "sourceColors": [ "#48B5F4", "#7841C4", "#FA97E2" ], "sourceTokens": [ "sky", "violet", "platterPink" ], "titleColor": "#2D2435" }, "mint-periwinkle": { "name": "Mint Candy", "kind": "brand-mix", "colors": [ "#6AF1D2", "#FF70D3", "#FFB794", "#FFC4A8" ], "key": "#07E7B4", "stops": [ [ 0, "#6AF1D2" ], [ 0.4, "#FF70D3" ], [ 0.84, "#FFB794" ], [ 1, "#FFC4A8" ] ], "glow": "#CDFAF0", "glowOpacity": 0.2, "sourceColors": [ "#07E7B4", "#FF2CBF", "#FF925D" ], "sourceTokens": [ "mint", "hotPink", "peach" ], "titleColor": "#2D2435" } }, "event": { "purple": [ [ 0, "#EBECF9" ], [ 0.15, "#E8E2F7" ], [ 0.35, "#E5D7F5" ], [ 0.55, "#E4CFF2" ], [ 0.65, "#DECAF1" ], [ 0.73, "#D5C6F0" ], [ 0.77, "#CEC2EE" ], [ 0.82, "#C5BFEE" ], [ 0.9, "#B8BDEC" ], [ 1, "#BBC2ED" ] ], "yellow": [ [ 0, "#C4C2CA" ], [ 0.15, "#C4BDCB" ], [ 0.35, "#C0B0C6" ], [ 0.55, "#CAB097" ], [ 0.65, "#DFB87E" ], [ 0.73, "#C9BB71" ], [ 0.77, "#CDC586" ], [ 0.82, "#DED8C2" ], [ 0.9, "#EDE6F8" ], [ 1, "#FDF4FD" ] ], "red": [ [ 0, "#F5DCE6" ], [ 0.15, "#F3D4E6" ], [ 0.35, "#F1C9E4" ], [ 0.55, "#E99AAE" ], [ 0.65, "#E07583" ], [ 0.73, "#D65C60" ], [ 0.77, "#D35F6C" ], [ 0.82, "#D784B4" ], [ 0.9, "#E6C0F1" ], [ 1, "#F8DBFA" ] ], "black": [ [ 0, "#EAEFF4" ], [ 0.15, "#E5E8F1" ], [ 0.35, "#E0DFED" ], [ 0.55, "#D7D3E6" ], [ 0.65, "#BEBDD3" ], [ 0.73, "#A6A9BD" ], [ 0.77, "#A9AEC4" ], [ 0.82, "#BDC7DE" ], [ 0.9, "#D5DDEA" ], [ 1, "#F6F8FB" ] ], "green": [ [ 0, "#E7F9E7" ], [ 0.15, "#E3F6E7" ], [ 0.35, "#E0F3E4" ], [ 0.55, "#C5EAC3" ], [ 0.65, "#93E0A6" ], [ 0.73, "#74D890" ], [ 0.77, "#73D795" ], [ 0.82, "#92E0BD" ], [ 0.9, "#C6EFF0" ], [ 1, "#FBFFF7" ] ], "white": [ [ 0, "#BDC8D7" ], [ 0.15, "#BAC3D4" ], [ 0.35, "#B8BDD1" ], [ 0.55, "#B1B3CA" ], [ 0.65, "#A8ABC5" ], [ 0.73, "#9AA2BD" ], [ 0.77, "#9AA5C0" ], [ 0.82, "#AEB8CD" ], [ 0.9, "#D0D6E2" ], [ 1, "#F4F6F9" ] ], "blue": [ [ 0, "#DFF1FD" ], [ 0.15, "#DAEBFC" ], [ 0.35, "#D5E3FB" ], [ 0.55, "#D0D8F6" ], [ 0.65, "#C1CDF3" ], [ 0.73, "#ADC1ED" ], [ 0.77, "#A7C2EC" ], [ 0.82, "#B3CEF0" ], [ 0.9, "#D4E2F6" ], [ 1, "#F5F9FE" ] ], "orange": [ [ 0, "#FDF2E0" ], [ 0.15, "#FCEDD5" ], [ 0.35, "#FBE7C9" ], [ 0.55, "#F9D8A9" ], [ 0.65, "#F5BE83" ], [ 0.73, "#F09762" ], [ 0.77, "#F2AA71" ], [ 0.82, "#F6C28A" ], [ 0.9, "#F9D8B6" ], [ 1, "#FEF7F2" ] ] }, "brandFluid": { "version": "3.2.2", "source": "design/tokens/color-system.json", "direction": "Original soft three-color palette / subtle fluid motion", "corePalettes": [ "purple-pink", "deep-purple", "pink-coral", "peach-yellow", "cyan-blue", "mint-lime" ], "palettes": [ { "id": "purple-pink", "number": "01", "name": "퍼플 · 핑크", "colors": [ "#AA4AF4", "#6655D2", "#FA97E2" ], "tokens": [ "color.primitive.brandGraphic.splupPurple", "color.primitive.brandGraphic.deepPurple", "color.primitive.brandGraphic.platterPink" ], "phase": 0.2, "variant": "violet", "widget": { "stops": [ [ 0, "#FCCBF0" ], [ 0.38, "#B867F6" ], [ 0.72, "#6655D2" ], [ 1, "#5645AD" ] ], "foreground": "#FFFFFF" }, "surface": { "base": "#ebd5fc", "blurRatio": 0.1, "rimOpacity": 0.16, "rimBlurRatio": 0.028125, "rimWidthRatio": 0.06875, "source": "design/brand/color-system/gradient-buttons/purple-pink-soft.svg", "method": "overlapping full-surface radial fields", "overscan": 0.3, "figmaBlurRatio": 0.2, "falloff": [ [ 0, 1 ], [ 0.52, 0.38 ], [ 1, 0 ] ], "fields": [ { "center": [ 0.38, 0.18 ], "radius": [ 0.93, 0.9 ], "opacity": 0.94 }, { "center": [ 0.08, 0.72 ], "radius": [ 0.94, 0.92 ], "opacity": 0.9 }, { "center": [ 0.9, 0.76 ], "radius": [ 1.02, 0.98 ], "opacity": 0.9 } ] } }, { "id": "deep-purple", "number": "02", "name": "딥 퍼플 · 바이올렛", "colors": [ "#6655D2", "#7841C4", "#AA4AF4" ], "tokens": [ "color.primitive.brandGraphic.deepPurple", "color.primitive.brandGraphic.violet", "color.primitive.brandGraphic.splupPurple" ], "phase": 1.2, "variant": "indigo", "widget": { "stops": [ [ 0, "#D4A4FA" ], [ 0.38, "#7E70D9" ], [ 0.72, "#7841C4" ], [ 1, "#6336A2" ] ], "foreground": "#FFFFFF" }, "surface": { "base": "#dcd8f5", "blurRatio": 0.1, "rimOpacity": 0.16, "rimBlurRatio": 0.028125, "rimWidthRatio": 0.06875, "source": "design/brand/color-system/gradient-buttons/deep-purple-soft.svg", "method": "overlapping full-surface radial fields", "overscan": 0.3, "figmaBlurRatio": 0.2, "falloff": [ [ 0, 1 ], [ 0.52, 0.38 ], [ 1, 0 ] ], "fields": [ { "center": [ 0.38, 0.18 ], "radius": [ 0.93, 0.9 ], "opacity": 0.94 }, { "center": [ 0.08, 0.72 ], "radius": [ 0.94, 0.92 ], "opacity": 0.9 }, { "center": [ 0.9, 0.76 ], "radius": [ 1.02, 0.98 ], "opacity": 0.9 } ] } }, { "id": "pink-coral", "number": "03", "name": "핑크 · 코랄", "colors": [ "#FA97E2", "#FF2CBF", "#FF5488" ], "tokens": [ "color.primitive.brandGraphic.platterPink", "color.primitive.brandGraphic.hotPink", "color.primitive.brandGraphic.coral" ], "phase": 2.1, "variant": "pink", "widget": { "stops": [ [ 0, "#FFAAC4" ], [ 0.38, "#FBA8E7" ], [ 0.72, "#FF2CBF" ], [ 1, "#C8269E" ] ], "foreground": "#FFFFFF" }, "surface": { "base": "#fee7f8", "blurRatio": 0.1, "rimOpacity": 0.16, "rimBlurRatio": 0.028125, "rimWidthRatio": 0.06875, "source": "design/brand/color-system/gradient-buttons/pink-coral-soft.svg", "method": "overlapping full-surface radial fields", "overscan": 0.3, "figmaBlurRatio": 0.2, "falloff": [ [ 0, 1 ], [ 0.52, 0.38 ], [ 1, 0 ] ], "fields": [ { "center": [ 0.38, 0.18 ], "radius": [ 0.93, 0.9 ], "opacity": 0.94 }, { "center": [ 0.08, 0.72 ], "radius": [ 0.94, 0.92 ], "opacity": 0.9 }, { "center": [ 0.9, 0.76 ], "radius": [ 1.02, 0.98 ], "opacity": 0.9 } ] } }, { "id": "peach-yellow", "number": "04", "name": "피치 · 옐로", "colors": [ "#FF925D", "#F9F871", "#FA97E2" ], "tokens": [ "color.primitive.brandGraphic.peach", "color.primitive.brandGraphic.lime", "color.primitive.brandGraphic.platterPink" ], "phase": 3.2, "variant": "peach", "widget": { "stops": [ [ 0, "#FCCBF0" ], [ 0.38, "#FFA377" ], [ 0.72, "#F9F871" ], [ 1, "#C4BF64" ] ], "foreground": "#FFFFFF" }, "surface": { "base": "#ffe6da", "blurRatio": 0.1, "rimOpacity": 0.16, "rimBlurRatio": 0.028125, "rimWidthRatio": 0.06875, "source": "design/brand/color-system/gradient-buttons/peach-yellow-soft.svg", "method": "overlapping full-surface radial fields", "overscan": 0.3, "figmaBlurRatio": 0.2, "falloff": [ [ 0, 1 ], [ 0.52, 0.38 ], [ 1, 0 ] ], "fields": [ { "center": [ 0.38, 0.18 ], "radius": [ 0.93, 0.9 ], "opacity": 0.94 }, { "center": [ 0.08, 0.72 ], "radius": [ 0.94, 0.92 ], "opacity": 0.9 }, { "center": [ 0.9, 0.76 ], "radius": [ 1.02, 0.98 ], "opacity": 0.9 } ] } }, { "id": "cyan-blue", "number": "05", "name": "시안 · 블루", "colors": [ "#48B5F4", "#27E5F2", "#398FE8" ], "tokens": [ "color.primitive.brandGraphic.sky", "color.primitive.brandGraphic.cyan", "color.primitive.brandGraphic.blue" ], "phase": 4.1, "variant": "cyan", "widget": { "stops": [ [ 0, "#9CC7F4" ], [ 0.38, "#65C1F6" ], [ 0.72, "#27E5F2" ], [ 1, "#26B1C5" ] ], "foreground": "#FFFFFF" }, "surface": { "base": "#d5eefc", "blurRatio": 0.1, "rimOpacity": 0.16, "rimBlurRatio": 0.028125, "rimWidthRatio": 0.06875, "source": "design/brand/color-system/gradient-buttons/cyan-blue-soft.svg", "method": "overlapping full-surface radial fields", "overscan": 0.3, "figmaBlurRatio": 0.2, "falloff": [ [ 0, 1 ], [ 0.52, 0.38 ], [ 1, 0 ] ], "fields": [ { "center": [ 0.38, 0.18 ], "radius": [ 0.93, 0.9 ], "opacity": 0.94 }, { "center": [ 0.08, 0.72 ], "radius": [ 0.94, 0.92 ], "opacity": 0.9 }, { "center": [ 0.9, 0.76 ], "radius": [ 1.02, 0.98 ], "opacity": 0.9 } ] } }, { "id": "mint-lime", "number": "06", "name": "민트 · 라임", "colors": [ "#07E7B4", "#F9F871", "#39B9CC" ], "tokens": [ "color.primitive.brandGraphic.mint", "color.primitive.brandGraphic.lime", "color.primitive.brandGraphic.aqua" ], "phase": 5.1, "variant": "mint", "widget": { "stops": [ [ 0, "#9CDCE6" ], [ 0.38, "#2FEBC0" ], [ 0.72, "#F9F871" ], [ 1, "#C4BF64" ] ], "foreground": "#FFFFFF" }, "surface": { "base": "#c6f9ee", "blurRatio": 0.1, "rimOpacity": 0.16, "rimBlurRatio": 0.028125, "rimWidthRatio": 0.06875, "source": "design/brand/color-system/gradient-buttons/mint-lime-soft.svg", "method": "overlapping full-surface radial fields", "overscan": 0.3, "figmaBlurRatio": 0.2, "falloff": [ [ 0, 1 ], [ 0.52, 0.38 ], [ 1, 0 ] ], "fields": [ { "center": [ 0.38, 0.18 ], "radius": [ 0.93, 0.9 ], "opacity": 0.94 }, { "center": [ 0.08, 0.72 ], "radius": [ 0.94, 0.92 ], "opacity": 0.9 }, { "center": [ 0.9, 0.76 ], "radius": [ 1.02, 0.98 ], "opacity": 0.9 } ] } } ], "motion": { "durationSeconds": 18, "easing": "ease-in-out", "translationRatioMax": 0.035, "scaleRange": [ 0.98, 1.03 ], "containerMotion": false, "reducedMotion": "static", "keyframeSeconds": [ 0, 6, 12, 18 ] } } }, "component": { "navigationChrome": { "version": "1.1.0", "unit": "pt", "bar": { "minHeight": 56, "gutter": 16, "sideSlot": 64, "titleStyle": "titleSm", "titleSize": 17, "titleWeight": 600, "touchTarget": 44, "iconSize": 20, "logoHeight": 22 }, "sheet": { "cornerRadius": 24, "surface": "layerModal", "gutter": 16, "grabber": { "width": 40, "height": 5, "top": 10, "bottom": 12 }, "close": { "glyph": 16, "surface": 32, "touchTarget": 44 }, "footerBottom": 16, "safeArea": "additional system inset", "scrim": "scrim" }, "variants": { "navigation": [ "none", "leading", "trailing", "both" ], "sheet": [ "browse", "editor", "confirmation" ], "center": [ "title", "logo" ] }, "dismissal": { "browse": "close / backdrop / header drag", "editor": "cancel; confirm discard only when dirty; no grabber", "confirmation": "close / cancel / backdrop / header drag; destructive only on explicit CTA" }, "nativeStatus": "shared chrome and selected screens migrated; remaining screen-specific headers require migration", "arrangements": { "none": { "id": "N0", "buttonCount": 0, "leading": false, "trailing": false }, "leading": { "id": "N1-L", "buttonCount": 1, "leading": true, "trailing": false }, "trailing": { "id": "N1-R", "buttonCount": 1, "leading": false, "trailing": true }, "both": { "id": "N2", "buttonCount": 2, "leading": true, "trailing": true } }, "composition": { "classification": "button count, placement, then center content", "maxButtons": 2, "maxButtonsPerSide": 1, "emptySlot": "preserve width; no control or accessibility element", "decorationsCountAsButtons": false, "disabledButtonsCountAsButtons": true, "savePlacement": "header OR footer; never both", "extraActions": "overflow menu", "avoidPairs": [ "cancel+close", "back+close" ], "states": [ "default", "disabled", "loading" ] }, "presentationPolicy": { "shortContextualTask": "sheet", "multiFieldEditing": "fullScreenEditor", "canvas": "fullScreenCanvas", "multiPurposeHub": "page", "binaryConfirmation": "dialog", "explanationOnly": "inlineHelp", "fewImmediateActions": "inlineActionsOrMenu", "sharing": "systemShare" }, "figmaStatus": "foundations synced to Figma; canvas components pending font resolution" }, "dittoAttribution": { "name": "Ditto/Widget/Attribution", "recipeId": "ditto.widget.attributed", "version": "1.0.0", "status": { "exposurePolicy": "user-required", "visualVariants": "design-proposal", "fallbackPolicy": "proposed", "figma": "reference-read-only", "nativeApp": "not-applied" }, "reference": { "fileKey": "XG8Cm5nLScPoNc9NAXX1DD", "nodeId": "983:129072", "width": 262, "height": 158, "radius": 16, "photoHeight": 146, "footer": { "y": 130, "height": 28 }, "avatar": { "x": 17, "y": 135, "size": 18, "radius": 4 }, "copy": { "x": 41, "y": 136, "fontSize": 10, "lineHeight": 15 }, "logo": { "x": 225, "y": 10, "size": 24 } }, "required": [ "source-profile-image", "ditto-logo", "nickname-attribution" ], "copy": { "template": "{name}에게서 가져옴", "nicknameAudience": "current-viewer-only", "fallbackOrder": [ "viewerNickname", "publicDisplayName", "친구" ], "unknownAccount": "알 수 없는 사용자", "ellipsis": "nickname-only", "suffixAlwaysVisible": true }, "binding": { "sourceUserId": "immutable", "sourceWidgetId": "immutable", "nickname": "resolve per viewer, never persist another viewer's private nickname into shared widget", "avatar": "sourceUserId profile, never current user or last sharer", "provenance": "retain original source through re-ditto; never overwrite identity with latest sharer" }, "presentation": { "fontFamily": "Pretendard", "fontSize": 12, "lineHeight": 16, "footerMinHeight": 44, "footerNarrowHeight": 48, "narrowWidth": 160, "avatarSize": 20, "avatarRadius": 4, "gap": 6, "paddingX": 10, "logoSize": 24, "logoInset": 8, "sourceSurface": "#F8F8F8", "sourceText": "#585858", "minimumGridColumns": 3, "cornerRadius": "existing-grid-radius-rule", "innerShadow": "inset 1px 2px 7px rgba(255,255,255,.25), inset 0 0 18px rgba(255,255,255,.95)" }, "assets": { "photo": "design/site/assets/ditto-attribution/reference-photo.jpg", "avatar": "design/site/assets/ditto-attribution/source-avatar.jpg", "badge": "design/site/assets/ditto-attribution/ditto-badge.png" }, "variants": [ { "id": "photo-landscape", "name": "사진 · 가로형", "kind": "photo", "columns": 4, "rows": 3 }, { "id": "photo-square", "name": "사진 · 정사각형", "kind": "photo", "columns": 4, "rows": 4 }, { "id": "photo-portrait", "name": "사진 · 세로형", "kind": "photo", "columns": 3, "rows": 4 }, { "id": "memo", "name": "메모 · 가로형", "kind": "memo", "columns": 4, "rows": 3 }, { "id": "music", "name": "음악 · 가로 배너", "kind": "music", "columns": 6, "rows": 2 }, { "id": "date", "name": "약속 · 정사각형", "kind": "date", "columns": 4, "rows": 4 } ], "rules": { "footerInsideBounds": true, "doNotCoverContent": true, "logoIsBadgeNotAction": true, "neverHideAttribution": true, "neverReduceFontForFit": true, "avatarFailure": "neutral-placeholder-same-slot", "longName": "visual ellipsis; full text in source detail and accessible name", "unavailableSource": "do not expose restricted content; keep generic attribution slot", "smallUnsupported": "needs-layout-review; do not collapse to logo-only" } }, "dittoButton": { "name": "Ditto/Action/GradientJelly", "recipeId": "ditto.button.gradient-jelly", "version": "1.1.0", "adoptedAt": "2026-09-27", "status": "user-adopted-visual-and-motion", "specification": "docs/Ditto_버튼_채택규격_2026-09-27.md", "referenceImplementation": "design/site/splup-ds-v3/index.html#ditto-action", "sync": { "webReference": "verified", "figma": "asset-synced", "nativeApp": "pending" }, "figmaAsset": { "fileKey": "XG8Cm5nLScPoNc9NAXX1DD", "pageId": "671:2", "sectionId": "992:187", "componentSetId": "995:605", "sampleFrameId": "997:469", "url": "https://www.figma.com/design/XG8Cm5nLScPoNc9NAXX1DD/Ditto?node-id=995-605", "syncedAt": "2026-09-28", "variantCount": 24, "validation": "visual-and-structural-checked", "prototypeValidation": "connections-verified-playback-not-manually-tested", "teamLibraryPublication": "not-published" }, "scope": "Ditto action uses long labeled button only; small icon is a passive dittoed-widget indicator", "geometry": { "aspectRatio": [ 1, 1 ], "viewBox": [ 0, 0, 181, 181 ], "path": "M49 0 C15 0 0 15 0 49 L0 132 C0 166 15 181 49 181 L132 181 C166 181 181 166 181 132 L181 49 C181 15 166 0 132 0 Z", "referenceUnitsAreNotProductionSize": true, "stableHitArea": true, "minimumHitSize": 44, "productionSizes": "requires-screen-validation" }, "typography": { "families": [ "Pretendard", "Pretendard Variable" ], "fallbackAllowed": false }, "logo": { "source": "design/brand/color-system/appicon-source.svg", "tint": "#FFFFFF", "widthRatio": 0.32, "leftRatio": 0.34, "topRatio": 0.3475, "outsideMaterialLayers": true }, "gradient": { "type": "static-linear", "coordinateUnits": "viewBox", "sharedWithBrandGraphic": false, "defaultPalette": null, "defaultPaletteStatus": "not-selected", "rotation": false, "convergence": false, "animatedStops": false, "pointerDependentColor": false, "palettes": [ { "id": "purple", "name": "퍼플 · 바이올렛", "colors": [ "#AA4AF4", "#6655D2" ], "offsets": [ 0, 0.36, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 0, 0 ], "to": [ 181, 181 ] }, { "id": "lavender", "name": "딥 퍼플 · 이클립스", "colors": [ "#6655D2", "#2C2F3A" ], "offsets": [ 0, 0.36, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 10, 0 ], "to": [ 181, 181 ] }, { "id": "coral", "name": "핑크 · 코랄", "colors": [ "#FA97E2", "#FF2CBF", "#FF5488" ], "offsets": [ 0, 0.25, 0.9, 1 ], "colorIndices": [ 0, 0, 1, 2 ], "from": [ 0, 30 ], "to": [ 195, 151 ] }, { "id": "peach", "name": "피치 · 옐로", "colors": [ "#FF925D", "#F9F871" ], "offsets": [ 0, 0.28, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 0, 20 ], "to": [ 205, 170 ] }, { "id": "sky", "name": "시안 · 블루", "colors": [ "#48B5F4", "#27E5F2" ], "offsets": [ 0, 0.25, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 0, 20 ], "to": [ 205, 170 ] }, { "id": "mint", "name": "민트 · 라임", "colors": [ "#07E7B4", "#F9F871" ], "offsets": [ 0, 0.28, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 0, 20 ], "to": [ 205, 170 ] } ] }, "material": { "units": "viewBox; blur values are SVG stdDeviation, not direct Figma blur values", "surfaceWhiteCoatOpacity": 0.09, "rim": { "color": "#FFFFFF", "width": 11, "stdDeviation": 7, "restOpacity": 0.38, "pressedOpacity": 0.24 }, "neutralTone": { "color": "#000000", "restOpacity": 0, "pressedOpacity": 0.012 }, "restInner": { "restOpacity": 1, "pressedOpacity": 0.2, "top": { "dy": 0.8, "stdDeviation": 0.7, "color": "#FFFFFF", "alpha": 0.42 }, "bottom": { "dy": -0.8, "stdDeviation": 1.2, "color": "#000000", "alpha": 0.08 } }, "pressedInner": { "restOpacity": 0, "pressedOpacity": 1, "top": { "dy": 3.2, "stdDeviation": 3, "color": "#000000", "alpha": 0.08 }, "contact": { "dy": 1, "stdDeviation": 0.9, "color": "#000000", "alpha": 0.04 }, "bottom": { "dy": -0.8, "stdDeviation": 1, "color": "#FFFFFF", "alpha": 0.13 } }, "contactLightOpacity": 0 }, "motion": { "referenceTranslationUnit": "CSS px; validate native pt mapping", "transformOriginRatio": [ 0.5, 0.55 ], "press": { "durationMs": 110, "minVisibleMs": 110, "scaleX": 1.006, "scaleY": 0.97, "translateY": 0.8, "easing": [ 0.16, 1, 0.3, 1 ] }, "logoPress": { "uniformScale": 0.99, "translateY": 0.5 }, "release": { "durationMs": 360, "cancelDurationMs": 360, "easing": [ 0.22, 1, 0.36, 1 ], "overshoot": false, "oscillation": false }, "animatedProperties": [ "transform", "opacity" ], "actionWaitsForAnimation": false, "idleAnimation": false, "reducedMotion": { "spatialAnimation": false, "colorAnimation": false, "materialFeedback": "immediate", "osPreferenceTakesPriority": true }, "confirmationHoldMs": 3000, "actionWaitsForAnimationNote": "Wait for the uninterrupted 3000ms confirmation hold, never for decorative press/release animation.", "material": { "type": "soft color pressure", "source": "sasha_birukoff_-_fluid_illumination_JqSmjZ.mp4", "pressMs": 110, "deepenMs": 2890, "releaseMs": 360, "pressure": [ 0, 0.12, 0.58, 0 ], "depthInk": "adopted base hue at 58% RGB intensity", "easing": "smoothstep during hold; ease-out on release", "depthTranslationYAtMax": 1.74, "depthScaleAtMax": [ 1.0696, 0.9072 ], "edgeLightMaxOpacity": 0.406, "directionalFill": false, "idleMotion": false } }, "interaction": { "keyboard": [ "Space", "Enter" ], "cancelOn": [ "out-of-bounds", "pointercancel", "lostpointercapture", "blur", "Escape" ], "resetOn": [ "page-hidden", "pagehide", "reduced-motion-change" ], "webTouchMovementCancelPx": 12, "accessibleName": "Describe the actual Ditto action, not the palette", "visibleActionLabel": "Always required. Action is a long labeled button; icon-only is a passive widget badge.", "hold": { "durationMs": 3000, "progress": "internal elapsed time only; visible feedback is continuous color depth, no bar or rail", "commit": "once after uninterrupted hold; complete only after persistence succeeds", "cancelOn": [ "early-release", "out-of-bounds", "touch-movement-over-12px", "pointercancel", "lostpointercapture", "blur", "Escape", "page-hidden", "pagehide" ], "resetProgressOnCancel": true, "pressFeedbackMs": 110, "cancelFeedbackMs": 360, "reducedMotion": "same 3000ms; static pressed tint, no spatial/material animation; remaining seconds and status text", "keyboard": [ "Space hold", "Enter hold", "Escape cancel" ], "assistiveAlternative": "explicit confirmation dialog on screen-reader activation; no action on first activation", "material": { "type": "soft color pressure", "source": "sasha_birukoff_-_fluid_illumination_JqSmjZ.mp4", "pressMs": 110, "deepenMs": 2890, "releaseMs": 360, "pressure": [ 0, 0.12, 0.58, 0 ], "depthInk": "adopted base hue at 58% RGB intensity", "easing": "smoothstep during hold; ease-out on release", "depthTranslationYAtMax": 1.74, "depthScaleAtMax": [ 1.0696, 0.9072 ], "edgeLightMaxOpacity": 0.406, "directionalFill": false, "idleMotion": false } }, "activation": "long labeled button only; uninterrupted 3000ms hold or explicit assistive confirmation" }, "states": { "adoptedAndWebVerified": [ "default", "pressed", "release", "cancel", "reduced-motion" ], "requiresDesign": [ "loading", "disabled", "restricted", "success", "error", "high-contrast", "reduce-transparency" ], "unapprovedVariants": [ "compact", "full-width" ] }, "prohibited": [ "rotating-gradient", "moving-blobs", "pointer-color-convergence", "accent-color-pop", "purple-bright-end-stop", "wordmark-distortion", "automatic-global-cta-replacement" ], "currentInAppSpecification": "component.dittoAppButton / design/tokens/color-system.json" }, "profileHandle": { "version": "2026-10-11-v2", "source": "design/tokens/profile-handle.json", "status": "native + server + web integrated (profiles.handle_color)", "palettes": [ { "id": "lavender", "name": "라벤더", "persona": "하은", "representative": { "top": "#CAB7F2", "bottom": "#B092ED", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#C8B3F2", "text": "#171719", "shineOpacity": 0 } }, { "id": "slate", "name": "슬레이트", "persona": "준", "representative": { "top": "#A8B3BF", "bottom": "#79899B", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#A1ADB9", "text": "#171719", "shineOpacity": 0 } }, { "id": "lime", "name": "라임", "persona": "소라", "representative": { "top": "#C5D593", "bottom": "#A5BE57", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#C0D289", "text": "#171719", "shineOpacity": 0 } }, { "id": "teal", "name": "틸", "persona": "재민", "representative": { "top": "#8FB2BD", "bottom": "#5C8F9F", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#8DB0BC", "text": "#171719", "shineOpacity": 0 } }, { "id": "gold", "name": "골드", "persona": "나리", "representative": { "top": "#D5C194", "bottom": "#BF9F5B", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#D2BC8C", "text": "#171719", "shineOpacity": 0 } }, { "id": "coral", "name": "코랄", "persona": "도현", "representative": { "top": "#EDAE91", "bottom": "#E07B4C", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#E9A382", "text": "#171719", "shineOpacity": 0 } }, { "id": "pink", "name": "핑크", "persona": "지우", "representative": { "top": "#EEAFC7", "bottom": "#E37CA2", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#EBA3BE", "text": "#171719", "shineOpacity": 0 } }, { "id": "sage", "name": "세이지", "persona": "서윤", "representative": { "top": "#B3BDA6", "bottom": "#85946F", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#AAB49A", "text": "#171719", "shineOpacity": 0 } }, { "id": "mauve", "name": "모브", "persona": "리안", "representative": { "top": "#B5ADBA", "bottom": "#908498", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#B2A9B7", "text": "#171719", "shineOpacity": 0 } }, { "id": "sky", "name": "스카이", "persona": "예서", "representative": { "top": "#ADD5E5", "bottom": "#79BBD4", "text": "#171719", "shineOpacity": 0.18 }, "life": { "background": "#A1CFE1", "text": "#171719", "shineOpacity": 0 } } ], "geometry": { "height": 64, "radius": 16, "avatarSize": 48, "avatarRadius": 12, "borderWidth": 0 }, "shadow": { "color": "#000000", "opacity": 0.06, "blur": 8, "y": 3 }, "description": "한 사람 = 한 색. 서버 profiles.handle_color(프리셋 키 · #RRGGBB)가 정본이고 앱·친구 기기·ditto.at이 같은 값으로 그린다. 이름 잉크 #171719는 두 스톱 모두 4.5:1 이상, 보조 문구 85%.", "legacyMapping": { "purple-pink": "lavender", "deep-purple": "lavender", "purple": "lavender", "indigo": "lavender", "neutral-gray": "slate", "gray": "slate", "charcoal": "slate", "lime-green": "lime", "green": "lime", "mint-lime": "teal", "gold-yellow": "gold", "yellow": "gold", "peach-yellow": "coral", "coral-red": "coral", "red": "coral", "orange": "coral", "pink-coral": "pink", "cyan-blue": "sky", "blue": "sky" }, "customColor": "preserved", "avatar": { "backgroundToken": "Splup/Profile/Semantic/avatar/background", "background": "#F1F2F4", "darkBackground": "#F1F2F4", "fallbackIconNode": "573:16607", "fallbackTint": "#8B9099", "iconSize": 24 }, "actions": { "states": [ "self", "editing", "friend", "add", "unavailable" ], "touchSize": 44, "iconSize": 20, "gap": 4, "radius": 12, "primaryBackground": "#F7F7FA", "primaryText": "#454650", "placement": "trailing; identity truncates before actions", "requestBehavior": "add -> pending, never directly friend", "disabledBehavior": "noninteractive with reason displayed below", "largeText": "grow height and wrap actions below identity", "relationshipShape": "circle", "relationshipDiameter": 44, "disabledBackground": "#ECECF1", "disabledIcon": "#9A9CA5", "relationshipIcons": { "friend": "person-check", "add": "person-plus", "unavailable": "person-x" }, "iconColor": "#6655D2", "relationshipBackground": "#F0EDFF", "relationshipIcon": "#6655D2" } }, "profileAvatar": { "version": "2026-10-02-unified", "status": "design-system-and-figma-ready; native-app-integration-pending", "description": "핸들 팔레트의 대표 top/bottom 및 라이프 background 3색을 그대로 공유하는 라운드 사각형 새틴 아바타. 독립 보정색을 사용하지 않음.", "source": "component.profileHandle.palettes", "selection": "explicit-user-choice; no-random-assignment", "recommendedDefaultId": "purple-pink", "geometry": { "slotSize": 48, "shape": "rounded-square", "radius": 12, "radiusRatio": 0.25, "borderWidth": 0, "squareExportSize": 1024, "roundedExportSize": 512, "resize": "width-and-height-independent; gradient covers entire bounds" }, "material": { "type": "soft-satin", "noiseOpacity": 0, "strokeWidth": 0, "lightDirection": "upper-left", "whiteBloomOpacity": 0.13, "animation": "none", "blurInAsset": false, "figmaRendering": "editable-native-normalized-gradient-fills", "rendering": "five-normalized-radial-fields-identical-in-svg-and-figma", "fields": [ { "id": "foundation", "cx": 0.4, "cy": 0.24, "rx": 0.86, "ry": 0.86, "angle": 0, "opacity": 1, "stops": [ [ "light", 0, 1 ], [ "base", 0.53, 1 ], [ "shade", 1, 1 ] ] }, { "id": "color", "cx": 0.75, "cy": 0.785, "rx": 0.582, "ry": 0.484, "angle": -22, "opacity": 1, "stops": [ [ "accent", 0, 1 ], [ "accent", 0.48, 0.9 ], [ "accent", 1, 0 ] ] }, { "id": "depth", "cx": 0.148, "cy": 0.75, "rx": 0.445, "ry": 0.559, "angle": -32, "opacity": 0.64, "stops": [ [ "shade", 0, 1 ], [ "shade", 1, 0 ] ] }, { "id": "silk", "cx": 0.38, "cy": 0.1, "rx": 0.78, "ry": 0.46, "angle": -15, "opacity": 0.3, "stops": [ [ "light", 0, 1 ], [ "light", 1, 0 ] ] }, { "id": "reflection", "cx": 0.26, "cy": 0.16, "rx": 0.7, "ry": 0.7, "angle": 0, "opacity": 0.13, "stops": [ [ "white", 0, 1 ], [ "white", 0.65, 0 ] ] } ] }, "fallback": { "backgroundToken": "Splup/Profile/Semantic/avatar/background", "background": "#F1F2F4", "darkBackground": "#F1F2F4", "fallbackIconNode": "573:16607", "fallbackTint": "#8B9099", "iconSize": 24 }, "palettes": [ { "id": "purple-pink", "number": "01", "name": "퍼플 · 핑크", "handlePaletteId": "purple-pink", "sourceColors": [ "#AA4AF4", "#6655D2", "#FA97E2" ], "surface": { "base": "#B66BEC", "light": "#C792ED", "shade": "#9270D9", "accent": "#C792ED" }, "assets": { "svg": "design/brand/color-system/profile-avatars/purple-pink.svg", "png": "design/brand/color-system/profile-avatars/purple-pink.png", "roundedPng": "design/brand/color-system/profile-avatars/purple-pink-rounded.png" }, "figmaComponentId": "1125:1651", "surfaceAliases": { "base": "component.profileHandle.palettes/purple-pink/representative.top", "light": "component.profileHandle.palettes/purple-pink/life.background", "shade": "component.profileHandle.palettes/purple-pink/representative.bottom", "accent": "component.profileHandle.palettes/purple-pink/life.background" } }, { "id": "deep-purple", "number": "02", "name": "딥 퍼플 · 바이올렛", "handlePaletteId": "deep-purple", "sourceColors": [ "#6655D2", "#7841C4", "#AA4AF4" ], "surface": { "base": "#9580DE", "light": "#AE99E6", "shade": "#8D73CE", "accent": "#AE99E6" }, "assets": { "svg": "design/brand/color-system/profile-avatars/deep-purple.svg", "png": "design/brand/color-system/profile-avatars/deep-purple.png", "roundedPng": "design/brand/color-system/profile-avatars/deep-purple-rounded.png" }, "figmaComponentId": "1125:1652", "surfaceAliases": { "base": "component.profileHandle.palettes/deep-purple/representative.top", "light": "component.profileHandle.palettes/deep-purple/life.background", "shade": "component.profileHandle.palettes/deep-purple/representative.bottom", "accent": "component.profileHandle.palettes/deep-purple/life.background" } }, { "id": "pink-coral", "number": "03", "name": "핑크 · 코랄", "handlePaletteId": "pink-coral", "sourceColors": [ "#FA97E2", "#FF2CBF", "#FF5488" ], "surface": { "base": "#FA91D9", "light": "#F5A5D8", "shade": "#F064B3", "accent": "#F5A5D8" }, "assets": { "svg": "design/brand/color-system/profile-avatars/pink-coral.svg", "png": "design/brand/color-system/profile-avatars/pink-coral.png", "roundedPng": "design/brand/color-system/profile-avatars/pink-coral-rounded.png" }, "figmaComponentId": "1125:1653", "surfaceAliases": { "base": "component.profileHandle.palettes/pink-coral/representative.top", "light": "component.profileHandle.palettes/pink-coral/life.background", "shade": "component.profileHandle.palettes/pink-coral/representative.bottom", "accent": "component.profileHandle.palettes/pink-coral/life.background" } }, { "id": "peach-yellow", "number": "04", "name": "피치 · 옐로", "handlePaletteId": "peach-yellow", "sourceColors": [ "#FF925D", "#F9F871", "#FA97E2" ], "surface": { "base": "#FFA36F", "light": "#FFBC87", "shade": "#F68A50", "accent": "#FFBC87" }, "assets": { "svg": "design/brand/color-system/profile-avatars/peach-yellow.svg", "png": "design/brand/color-system/profile-avatars/peach-yellow.png", "roundedPng": "design/brand/color-system/profile-avatars/peach-yellow-rounded.png" }, "figmaComponentId": "1125:1654", "surfaceAliases": { "base": "component.profileHandle.palettes/peach-yellow/representative.top", "light": "component.profileHandle.palettes/peach-yellow/life.background", "shade": "component.profileHandle.palettes/peach-yellow/representative.bottom", "accent": "component.profileHandle.palettes/peach-yellow/life.background" } }, { "id": "cyan-blue", "number": "05", "name": "시안 · 블루", "handlePaletteId": "cyan-blue", "sourceColors": [ "#48B5F4", "#27E5F2", "#398FE8" ], "surface": { "base": "#62C3F1", "light": "#89CDEE", "shade": "#369FD9", "accent": "#89CDEE" }, "assets": { "svg": "design/brand/color-system/profile-avatars/cyan-blue.svg", "png": "design/brand/color-system/profile-avatars/cyan-blue.png", "roundedPng": "design/brand/color-system/profile-avatars/cyan-blue-rounded.png" }, "figmaComponentId": "1125:1655", "surfaceAliases": { "base": "component.profileHandle.palettes/cyan-blue/representative.top", "light": "component.profileHandle.palettes/cyan-blue/life.background", "shade": "component.profileHandle.palettes/cyan-blue/representative.bottom", "accent": "component.profileHandle.palettes/cyan-blue/life.background" } }, { "id": "mint-lime", "number": "06", "name": "민트 · 라임", "handlePaletteId": "mint-lime", "sourceColors": [ "#07E7B4", "#F9F871", "#39B9CC" ], "surface": { "base": "#38DBB1", "light": "#6BDDC2", "shade": "#09BA97", "accent": "#6BDDC2" }, "assets": { "svg": "design/brand/color-system/profile-avatars/mint-lime.svg", "png": "design/brand/color-system/profile-avatars/mint-lime.png", "roundedPng": "design/brand/color-system/profile-avatars/mint-lime-rounded.png" }, "figmaComponentId": "1125:1656", "surfaceAliases": { "base": "component.profileHandle.palettes/mint-lime/representative.top", "light": "component.profileHandle.palettes/mint-lime/life.background", "shade": "component.profileHandle.palettes/mint-lime/representative.bottom", "accent": "component.profileHandle.palettes/mint-lime/life.background" } }, { "id": "coral-red", "number": "07", "name": "코랄 · 레드", "handlePaletteId": "coral-red", "sourceColors": [ "#FF5488", "#FF925D", "#FA97E2" ], "surface": { "base": "#F77983", "light": "#F39CA8", "shade": "#E9576F", "accent": "#F39CA8" }, "assets": { "svg": "design/brand/color-system/profile-avatars/coral-red.svg", "png": "design/brand/color-system/profile-avatars/coral-red.png", "roundedPng": "design/brand/color-system/profile-avatars/coral-red-rounded.png" }, "figmaComponentId": "1125:1657", "surfaceAliases": { "base": "component.profileHandle.palettes/coral-red/representative.top", "light": "component.profileHandle.palettes/coral-red/life.background", "shade": "component.profileHandle.palettes/coral-red/representative.bottom", "accent": "component.profileHandle.palettes/coral-red/life.background" } }, { "id": "gold-yellow", "number": "08", "name": "골드 · 옐로", "handlePaletteId": "gold-yellow", "sourceColors": [ "#F9F871", "#FF925D", "#F4D76C" ], "surface": { "base": "#F4D76C", "light": "#EDDA94", "shade": "#DDC057", "accent": "#EDDA94" }, "assets": { "svg": "design/brand/color-system/profile-avatars/gold-yellow.svg", "png": "design/brand/color-system/profile-avatars/gold-yellow.png", "roundedPng": "design/brand/color-system/profile-avatars/gold-yellow-rounded.png" }, "figmaComponentId": "1125:1658", "surfaceAliases": { "base": "component.profileHandle.palettes/gold-yellow/representative.top", "light": "component.profileHandle.palettes/gold-yellow/life.background", "shade": "component.profileHandle.palettes/gold-yellow/representative.bottom", "accent": "component.profileHandle.palettes/gold-yellow/life.background" } }, { "id": "lime-green", "number": "09", "name": "라임 · 그린", "handlePaletteId": "lime-green", "sourceColors": [ "#F9F871", "#07E7B4", "#ACCE48" ], "surface": { "base": "#C8E96B", "light": "#D1E796", "shade": "#ACCE48", "accent": "#D1E796" }, "assets": { "svg": "design/brand/color-system/profile-avatars/lime-green.svg", "png": "design/brand/color-system/profile-avatars/lime-green.png", "roundedPng": "design/brand/color-system/profile-avatars/lime-green-rounded.png" }, "figmaComponentId": "1125:1659", "surfaceAliases": { "base": "component.profileHandle.palettes/lime-green/representative.top", "light": "component.profileHandle.palettes/lime-green/life.background", "shade": "component.profileHandle.palettes/lime-green/representative.bottom", "accent": "component.profileHandle.palettes/lime-green/life.background" } }, { "id": "neutral-gray", "number": "10", "name": "뉴트럴 · 그레이", "handlePaletteId": "neutral-gray", "sourceColors": [ "#929AA9", "#C2C4C8", "#BDC4D0" ], "surface": { "base": "#AEB3BF", "light": "#BDC4D0", "shade": "#929AA9", "accent": "#BDC4D0" }, "assets": { "svg": "design/brand/color-system/profile-avatars/neutral-gray.svg", "png": "design/brand/color-system/profile-avatars/neutral-gray.png", "roundedPng": "design/brand/color-system/profile-avatars/neutral-gray-rounded.png" }, "figmaComponentId": "1125:1660", "surfaceAliases": { "base": "component.profileHandle.palettes/neutral-gray/representative.top", "light": "component.profileHandle.palettes/neutral-gray/life.background", "shade": "component.profileHandle.palettes/neutral-gray/representative.bottom", "accent": "component.profileHandle.palettes/neutral-gray/life.background" } } ], "figma": { "fileKey": "XG8Cm5nLScPoNc9NAXX1DD", "pageId": "1:166595", "componentSetId": "1125:1661", "reviewFrameId": "1211:128856", "url": "https://www.figma.com/design/XG8Cm5nLScPoNc9NAXX1DD/?node-id=1211-128856", "variableCollections": [ "VariableCollectionId:1125:1569", "VariableCollectionId:1125:1570" ], "integration": "Splup/ProfileHandle Avatar instance-swap property; 20 matched handle examples; library publication not performed", "documentationFont": "Pretendard vector outlines (remote font unavailable); original handle text preserved", "sharedColorUpdatedAt": "2026-10-02", "galleryNodeId": "1126:115578" }, "surfaceRoleMap": { "base": "representative.top", "light": "life.background", "shade": "representative.bottom", "accent": "life.background" } }, "profileColorPicker": { "version": "2026-10-02-compact-42", "source": "component.profileHandle.palettes", "paletteIds": [ "purple-pink", "deep-purple", "pink-coral", "peach-yellow", "cyan-blue", "mint-lime", "coral-red", "gold-yellow", "lime-green", "neutral-gray" ], "referenceNodeId": "659:100163", "swatchRole": "profileHandle.life.background; same original color", "columns": 10, "touchWidth": 42, "touchHeight": 42, "swatchSize": 28, "columnGap": 8, "rowGap": 12, "selection": "single-draft-selection; apply-to-confirm; cancel-restores-applied", "marker": "outer-stroke", "changes": "handle-palette-only; avatar-selection-independent", "geometry": "10 circular color swatches inside white capsule; avatar remains rounded square 48 R12", "figma": { "fileKey": "XG8Cm5nLScPoNc9NAXX1DD", "pageId": "1:166595", "swatchComponentSet": "1199:2016", "pickerComponentSet": "1199:2057", "variants": [ { "id": "1199:2047", "selected": "purple-pink", "width": 506, "height": 42, "reactions": 0 }, { "id": "1199:2048", "selected": "deep-purple", "width": 506, "height": 42, "reactions": 0 }, { "id": "1199:2049", "selected": "pink-coral", "width": 506, "height": 42, "reactions": 0 }, { "id": "1199:2050", "selected": "peach-yellow", "width": 506, "height": 42, "reactions": 0 }, { "id": "1199:2051", "selected": "cyan-blue", "width": 506, "height": 42, "reactions": 0 }, { "id": "1199:2052", "selected": "mint-lime", "width": 506, "height": 42, "reactions": 0 }, { "id": "1199:2053", "selected": "coral-red", "width": 506, "height": 42, "reactions": 0 }, { "id": "1199:2054", "selected": "gold-yellow", "width": 506, "height": 42, "reactions": 0 }, { "id": "1199:2055", "selected": "lime-green", "width": 506, "height": 42, "reactions": 0 }, { "id": "1199:2056", "selected": "neutral-gray", "width": 506, "height": 42, "reactions": 0 } ], "reviewNodeId": "1205:2129", "prototype": "Native horizontal scrolling in compact Figma viewport; Position variants show scroll composition; selection/apply/cancel executable in web DS", "unifiedFrameId": "1211:128856", "carouselComponentSet": "1234:2230", "carouselReviewNodeId": "1236:2515", "carouselVariants": [ { "id": "1234:2227", "name": "Position=Start", "width": 328, "height": 42, "clips": true, "overflow": "HORIZONTAL", "content": { "width": 506, "x": 0 } }, { "id": "1234:2228", "name": "Position=Middle", "width": 328, "height": 42, "clips": true, "overflow": "HORIZONTAL", "content": { "width": 506, "x": -89 } }, { "id": "1234:2229", "name": "Position=End", "width": 328, "height": 42, "clips": true, "overflow": "HORIZONTAL", "content": { "width": 506, "x": -178 } } ], "carouselExamples": [ { "position": "Start", "palette": "purple-pink", "panel": "1236:2565", "picker": "1236:2583", "handles": [ "1236:2610", "1236:2641" ] }, { "position": "Middle", "palette": "mint-lime", "panel": "1236:2667", "picker": "1236:2684", "handles": [ "1236:2711", "1236:2742" ] }, { "position": "End", "palette": "neutral-gray", "panel": "1236:2768", "picker": "1236:2785", "handles": [ "1236:2812", "1236:2843" ] } ], "compactWidthVariableId": "VariableID:1234:2226" }, "layout": "horizontal-capsule", "containerPadding": 7, "containerRadius": 21, "background": "#FFFFFF", "shadow": { "opacity": 0.04, "y": 8, "blur": 24 }, "responsive": "horizontal swipe carousel; never shrink chips or wrap rows", "selectionStroke": "#867696", "selectionStrokeWidth": 1.5, "selectionStrokeGap": 3, "appearance": "Original profile palette with outer selection stroke", "previewColors": { "purple-pink": "#C792ED", "deep-purple": "#AE99E6", "pink-coral": "#F5A5D8", "peach-yellow": "#FFBC87", "cyan-blue": "#89CDEE", "mint-lime": "#6BDDC2", "coral-red": "#F39CA8", "gold-yellow": "#EDDA94", "lime-green": "#D1E796", "neutral-gray": "#BDC4D0" }, "compactWidth": 328, "carousel": { "viewport": 328, "contentWidth": 506, "chipPitch": 50, "positions": { "Start": 0, "Middle": 89, "End": 178 }, "selection": "scrolling preserves selection; only tapping a chip changes the draft", "keyboard": "native radio arrow keys; selected chip revealed" }, "containerHeight": 42, "containerPaddingY": 0 }, "profileSystem": { "version": "2026-10-02-final", "source": "component.profileHandle.palettes", "contents": [ "shared-profile-colors", "profile-handles", "color-picker-and-examples", "profile-actions", "reusable-components" ], "figma": { "fileKey": "XG8Cm5nLScPoNc9NAXX1DD", "pageId": "1:166595", "frameId": "1211:128856", "url": "https://www.figma.com/design/XG8Cm5nLScPoNc9NAXX1DD/?node-id=1211-128856" }, "palette": "10 original profile families shared by handles avatars and picker", "picker": "horizontal white capsule; selected outer stroke; single selection" }, "detailColorPicker": { "version": "2026-10-02", "source": "detail-colors.json", "scope": "detail content backgrounds and text; profile and music artwork palettes unchanged", "solidCount": 35, "backgroundGradientCount": 7, "geometry": { "barHeight": 42, "swatchSize": 28, "touchSize": 42, "selectionStroke": 1.5, "selectionGap": 3, "selectionColor": "#867696", "radius": 21, "compactWidth": 328 }, "defaults": { "background": "neutral-white", "text": "neutral-950" }, "rules": { "text": "solid-only", "background": "solid-or-gradient", "confirmation": "draft-apply-cancel", "reset": "active-field-only", "minimumContrast": 4.5, "gradientContrast": "minimum of 257 sRGB samples; never silently replace a selected color" }, "figma": { "fileKey": "XG8Cm5nLScPoNc9NAXX1DD", "pageId": "1:166595", "reviewFrameId": "1339:3609", "libraryFrameId": "1338:3546", "swatchSetId": "1338:3553", "pickerSetId": "1338:3678", "expandedPaletteSetId": "1338:3880", "textWidgetId": "1338:3881", "collections": { "primitives": "VariableCollectionId:1338:3494", "semantic": "VariableCollectionId:1338:3495" } } }, "musicPlayer": { "spec": "music-player.json", "sizes": { "compact": { "grid": "4x2", "w": 181, "h": 86.5 }, "standard": { "grid": "6x2", "w": 275.5, "h": 86.5 }, "expanded": { "grid": "6x4", "w": 275.5, "h": 181 } }, "motion": { "rotationMs": 8000, "equalizerMs": 720, "pressMs": 110, "resizeMs": 280, "easing": "cubic-bezier(.22,1,.36,1)", "tiltY": 0, "projection": 1, "previewDuration": 30 }, "disc": { "aspectRatio": 1, "outerDiameterMm": 120, "holeDiameterMm": 15, "holeRatio": 0.125, "hubRatio": 0.275, "projection": "front", "crop": "none", "source": "https://ecma-international.org/wp-content/uploads/ECMA-130_2nd_edition_june_1996.pdf" }, "version": "2026-10-03-ambient-layout", "background": { "mode": "album-derived-ambient", "colors": 3, "coverBlur": false, "radialFields": 2, "lowerScrimOpacity": 0.3, "minSecondaryContrast": 4.8 }, "spacing": { "squarePadding": 12, "portraitPadding": 16, "titleArtist": 2, "artistSource": 12, "sourceHeight": 22, "compactArtistSource": 6, "sourceIcon": 21, "sourceIconGap": 11, "playMark": 32 }, "sourceRow": { "position": "after-title-and-artist", "height": 22, "iconSize": 21, "gap": 11, "compact": "service-name-only, 10px", "playbackStatus": "beside-track-info" }, "external": { "artwork": "original rectangular artwork, no crop/blur/rotation", "surface": "open validated provider HTTPS link", "playbackControl": false, "providers": [ "Spotify", "Apple Music", "YouTube Music" ], "figmaVariants": "1436:6407" } }, "dittoAppButton": { "height": 60, "radius": 12, "icon": 27, "gap": 10, "label": 17, "padding": 20, "variants": [ "Label" ], "states": [ "Default", "Holding", "Pending", "Complete", "Error", "Disabled" ], "foreground": "#FFFFFF", "paletteSource": "component.dittoButton.gradient.palettes", "sharedWithFluid": false, "palettes": [ { "id": "purple", "name": "퍼플 · 바이올렛", "colors": [ "#AA4AF4", "#6655D2" ], "offsets": [ 0, 0.36, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 0, 0 ], "to": [ 181, 181 ], "variant": "violet", "figmaSource": "1581:124721" }, { "id": "lavender", "name": "딥 퍼플 · 이클립스", "colors": [ "#6655D2", "#2C2F3A" ], "offsets": [ 0, 0.36, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 10, 0 ], "to": [ 181, 181 ], "variant": "indigo", "figmaSource": "1581:124722" }, { "id": "coral", "name": "핑크 · 코랄", "colors": [ "#FA97E2", "#FF2CBF", "#FF5488" ], "offsets": [ 0, 0.25, 0.9, 1 ], "colorIndices": [ 0, 0, 1, 2 ], "from": [ 0, 30 ], "to": [ 195, 151 ], "variant": "pink", "figmaSource": "1581:124723" }, { "id": "peach", "name": "피치 · 옐로", "colors": [ "#FF925D", "#F9F871" ], "offsets": [ 0, 0.28, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 0, 20 ], "to": [ 205, 170 ], "variant": "peach", "figmaSource": "1581:124724" }, { "id": "sky", "name": "시안 · 블루", "colors": [ "#48B5F4", "#27E5F2" ], "offsets": [ 0, 0.25, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 0, 20 ], "to": [ 205, 170 ], "variant": "cyan", "figmaSource": "1581:124725" }, { "id": "mint", "name": "민트 · 라임", "colors": [ "#07E7B4", "#F9F871" ], "offsets": [ 0, 0.28, 1 ], "colorIndices": [ 0, 0, 1 ], "from": [ 0, 20 ], "to": [ 205, 170 ], "variant": "mint", "figmaSource": "1581:124726" } ], "whiteCoatOpacity": 0.09, "originalCTA": { "variant": "violet", "content": "Label", "fill": "#A25AD6", "rgb": { "r": 0.6355645656585693, "g": 0.3519641160964966, "b": 0.8375813961029053 }, "foreground": "#FFFFFF", "figmaSource": "1581:131370", "effects": [ { "type": "INNER_SHADOW", "visible": true, "radius": 32, "boundVariables": {}, "color": { "r": 0.8090571165084839, "g": 0.6293146014213562, "b": 0.9131184816360474, "a": 0.25 }, "offset": { "x": 0, "y": -12 }, "spread": 0, "blendMode": "NORMAL" }, { "type": "INNER_SHADOW", "visible": true, "radius": 4, "boundVariables": {}, "color": { "r": 1, "g": 1, "b": 1, "a": 0.4000000059604645 }, "offset": { "x": 0, "y": 4 }, "spread": 0, "blendMode": "NORMAL" } ] }, "stateTone": { "hover": 0.006, "pressed": 0.012 }, "role": "action", "layout": "full-width label button only", "width": { "reference": 370, "minimum": 280, "maximum": "container" }, "hold": { "durationMs": 3000, "progress": "internal elapsed time only; visible feedback is continuous color depth, no bar or rail", "commit": "once after uninterrupted hold; complete only after persistence succeeds", "cancelOn": [ "early-release", "out-of-bounds", "touch-movement-over-12px", "pointercancel", "lostpointercapture", "blur", "Escape", "page-hidden", "pagehide" ], "resetProgressOnCancel": true, "pressFeedbackMs": 110, "cancelFeedbackMs": 360, "reducedMotion": "same 3000ms; static pressed tint, no spatial/material animation; remaining seconds and status text", "keyboard": [ "Space hold", "Enter hold", "Escape cancel" ], "assistiveAlternative": "explicit confirmation dialog on screen-reader activation; no action on first activation", "material": { "type": "soft color pressure", "source": "sasha_birukoff_-_fluid_illumination_JqSmjZ.mp4", "pressMs": 110, "deepenMs": 2890, "releaseMs": 360, "pressure": [ 0, 0.12, 0.58, 0 ], "depthInk": "adopted base hue at 58% RGB intensity", "easing": "smoothstep during hold; ease-out on release", "depthTranslationYAtMax": 1.74, "depthScaleAtMax": [ 1.0696, 0.9072 ], "edgeLightMaxOpacity": 0.406, "directionalFill": false, "idleMotion": false } }, "badge": { "role": "non-interactive ownership indicator", "sizes": [ 24, 32 ], "label": "디토한 위젯", "placement": "widget top trailing, inset 8px", "action": null, "hover": false, "focus": false, "paletteCount": 6, "componentSet": "1247:2764" }, "figma": { "guide": "1594:7230", "visualStateSet": "1592:7054", "holdComponentSet": "1699:8399", "badgeComponentSet": "1247:2764", "prototypeStates": [ "Idle", "HoldingStart", "HoldingEnd", "Pending", "Complete" ], "prototypeCommit": "simulated success after 650ms; no widget is saved", "materialTransition": { "type": "SMART_ANIMATE", "easing": "EASE_IN_AND_OUT", "pressMs": 110, "deepenMs": 2890, "releaseMs": 360 } } }, "brandAppIcon": { "canvasSize": 240, "radius": 54, "cornerSmoothing": 1, "logo": { "width": 124, "height": 120.55555555555556, "widthRatio": 0.5166666666666667, "heightRatio": 0.5023148148148148, "alignment": "center", "preserveAspectRatio": true }, "softShell": { "rim": { "color": "#FFFFFF", "opacity": 0.68, "width": 26, "figmaBlur": 24, "svgStdDeviation": 12, "alignment": "CENTER" }, "topVeil": { "color": "#FFFFFF", "stops": [ [ 0, 0.34 ], [ 0.24, 0.12 ], [ 0.62, 0 ], [ 1, 0.01 ] ] }, "glassEdge": { "width": 1.2, "figmaBlur": 0.75, "svgStdDeviation": 0.375, "stops": [ [ 0, 0.8 ], [ 0.55, 0.18 ], [ 1, 0.4 ] ] } }, "figmaSet": "1592:7176", "figmaGuide": "1594:7404" }, "widgetGraphic": { "sourceNode": "1060:133434", "guidePalette": "1594:7495", "totalCount": 25, "componentSet": "1592:7115", "canvas": 288, "radius": 28, "padding": 20, "title": { "size": 24, "lineHeight": 30, "bottom": 20, "maxLines": 1, "color": "#2D2435" }, "artwork": { "x": 20, "y": 20, "width": 248, "height": 210, "fit": "contain", "objectSize": 204 }, "glow": { "x": 17.28, "y": 23.76, "width": 165.6, "height": 115.2, "blur": 33.12 }, "titleShade": { "color": "#1C1722", "opacity": 0, "stops": [ [ 0, 0 ], [ 0.62, 0 ], [ 0.8, 0 ], [ 0.93, 0 ], [ 1, 0 ] ] }, "assets": { "paparazzi-camera": "color-assets/widget-objects/paparazzi-camera.png", "vintage-camera": "color-assets/widget-objects/vintage-camera.png", "together-keyring": "color-assets/widget-objects/together-keyring.png", "ask-envelope": "color-assets/widget-objects/ask-envelope.png", "gif-frames": "color-assets/widget-objects/gif-frames.png" }, "examples": [ { "palette": "indigo", "title": "Paparazzi", "caption": "바이올렛 소다 · 카메라", "note": "카메라 외곽을 살리고 좌우 20px 여백을 유지해요." }, { "palette": "amber", "title": "Vintage", "caption": "애프리콧 웨이브 · 빈티지", "note": "카메라는 상단 중앙에, 제목은 8px 간격 아래에 놓아요." }, { "palette": "petal-moss", "title": "Together", "caption": "트와일라잇 팝 · 키링", "note": "키링 전체를 담고, 하단 제목 공간은 비워 둬요." }, { "palette": "apricot", "title": "Ask", "caption": "써니 블루 · 질문", "note": "질문 카드를 상단에 담고 제목은 아래에 고정해요." }, { "palette": "lilac-lagoon", "title": "GIF", "caption": "블루 페탈 · GIF", "note": "프레임 묶음의 기울기는 유지하고 이미지 전체를 담아요." } ], "guidePlacement": "1663:8765", "paletteNames": { "indigo": "Violet Soda", "peach": "Ocean Mint", "pink": "Peach Blossom", "violet": "Lime Bloom", "cyan": "Daydream", "mint": "Mint Aurora", "periwinkle": "Pink Sorbet", "apricot": "Sunny Blue", "rose": "Coral Garden", "lagoon": "Candy Cloud", "lime": "Berry Sunset", "midnight": "Purple Punch", "silver": "Spring Fizz", "amber": "Apricot Wave", "berry": "Coral Reef", "melon-soda": "Citrus Lilac", "peach-pool": "Pink Lagoon", "petal-moss": "Twilight Pop", "butter-denim": "Peach Splash", "coral-lilac": "Electric Petal", "lilac-lagoon": "Blue Petal", "blush-cocoa": "Peach Orbit", "aqua-apricot": "Tropical Pop", "iris-cream": "Sky Ribbon", "mint-periwinkle": "Mint Candy" }, "brandCombinationCount": 25, "colorSource": "color.primitive.brandGraphic", "referenceRole": "surface composition and artwork placement only", "colorMix": { "sourceColorCount": 3, "whiteMix": [ 0.4, 0.32, 0.34, 0.46 ], "stopSourceIndices": [ 0, 1, 2, 2 ], "titleInk": "#2D2435" } } } }