Twinkle AI Labs

디자인 시스템

Aurora Ledger

오로라 · 장부

Twinkle AI Labs의 모든 제품이 같은 목소리로 말하고, 같은 방식으로 움직이게 하는 디자인 시스템입니다.

색과 글자, 간격과 움직임까지 하나의 기준으로 연결합니다. 어떤 제품을 만나더라도 익숙하고 분명한 경험을 제공하는 것이 Aurora Ledger의 역할입니다.

Identity

빛과 숫자를 위한 디자인

Aurora Ledger는 2026년 8월, 첫 제품의 화면을 다듬는 과정에서 시작했습니다. 이름에는 Twinkle AI Labs가 만들고 싶은 화면의 두 가지 성격이 담겨 있습니다.

  • Aurora

    어둠 속에서 방향을 만드는 빛

    깊은 남보라와 밝은 보라가 만드는 빛은 브랜드의 표정입니다. 장식에 머무르지 않고, 사용자가 지금 봐야 할 정보와 다음에 할 행동을 자연스럽게 안내합니다.

  • Ledger

    복잡한 값을 정확하게 읽는 기록

    첫 제품은 투자 계산 결과를 보여주는 도구였습니다. 그 출발점은 지금도 남아 있습니다. 숫자는 잘리지 않고, 결과는 가장 먼저 보이며, 중요한 변화는 색뿐 아니라 말과 기호로도 전달합니다.

공식 명칭은 Aurora Ledger입니다. 제품 코드에서는 Twinkle* 접두사를 사용해 브랜드와 구현의 이름을 일관되게 연결합니다.

Foundation

색은 역할로 선택합니다

colors

화면에서는 색상값 대신 역할을 지정합니다. 같은 역할이 라이트와 다크 모드에서 알맞은 색으로 바뀌기 때문에 대비와 브랜드 인상이 함께 유지됩니다. 선명한 보라는 사용자의 다음 행동을 안내할 때 가장 먼저 사용합니다.

Light · Mist

바탕과 면

  • bg#F8F6FC
  • surface#FFFFFF
  • sunken#F5F4F8
  • lifted#FFFFFF
  • key#FFFFFF
  • divider#EAE4F0

글자

  • text#21182D
  • textSub#71687D
  • textFaint#A79EAF

브랜드

  • primary#7040D9
  • accent#7040D9 · 글자
  • primarySoft#EEE7FC
  • gradient→ #8550E4

뜻

  • danger#B42318되돌릴 수 없는 것
  • ▲ rise#D92D20오름
  • ▼ fall#2763C4내림

화장

  • glow · primary 20%
  • shadow · 남보라 먹
  • scrim · 52%
  • outlineLifted

Dark · Dusk

바탕과 면

  • bg#110D19
  • surface#1B1526
  • sunken#251D32
  • lifted#2C233A
  • key#20182C
  • divider#352A42

글자

  • text#FAF7FF
  • textSub#AEA3BA
  • textFaint#746A80

브랜드

  • primary#986CF4
  • accent#B79AFF · 글자
  • primarySoftaccent · 12%
  • gradient→ #8550E4

뜻

  • danger#FF9B91되돌릴 수 없는 것
  • ▲ rise#FF9B91오름
  • ▼ fall#8DB9FF내림

화장

  • glow · accent 14%
  • shadow · 검정 먹
  • scrim · 62%
  • outlineLifted · 없음
  • 바탕과 면 — 라이트 모드 Mist는 밝은 바탕에 남보라의 온기를 더합니다. 다크 모드 Dusk는 라이트 색상을 단순히 반전하지 않고, 밤에 맞는 독립적인 명도와 대비를 사용합니다.
  • 브랜드 — primary는 버튼처럼 채워진 면에, accent는 글자·아이콘·테두리에 사용합니다. 다크 모드에서는 각 용도에 필요한 대비가 달라 두 색을 분리합니다.
  • 뜻 — 상승과 위험은 비슷한 빨강을 사용해도 의미가 다르므로 별도의 토큰으로 관리합니다. 옅은 배경은 라이트 8%, 다크 12%를 기준으로 체감 대비를 맞춥니다.

Foundation

강약을 만드는 여섯 단계

alpha

불투명도는 정보의 우선순위와 표면의 깊이를 조절합니다. 임의의 값을 추가하지 않고 여섯 단계 안에서 선택해, 서로 다른 제품에서도 같은 수준의 강조가 같은 인상으로 보이게 합니다.

  • strong.88강조를 낮춘 본문
  • soft.70보조 정보
  • half.50내부 구분선
  • ring.35강조 테두리
  • tint.20은은한 배경과 핸들
  • wash.08가장 옅은 배경 · 다크 .12

Foundation

리듬을 만드는 8pt 격자

spacing

기본 간격은 8의 배수를 따릅니다. 2·4·6px은 정렬과 미세 조정처럼 꼭 필요한 경우에만 사용합니다.

  1. tight2
  2. s04
  3. s0h6
  4. s18
  5. s1h12
  6. s216
  7. s2h20
  8. s324
  9. s432
  10. s540
  11. s648

Foundation

크기와 형태의 기준

iconSize · elevation · shapes · controlSize · stroke

아이콘

  • xs12
  • sm16
  • md20
  • lg26

고도

  • raised4기본 카드
  • floating10호버와 플로팅 요소
  • drawer20드로어와 바텀 시트

모양

  • small11입력 필드
  • medium14내부 패널과 키
  • large18기본 카드
  • extraLarge24시트와 모달
  • drawer20키패드 드로어
  • pill999배지와 한 줄 버튼

컨트롤

  • rowHeight48목록 항목의 기본 높이
  • primaryButtonHeight48주요 버튼의 기본 높이
  • keypadKeyHeight52숫자 키의 높이
  • keypadGap8키 사이의 간격

선

  • hair1영역을 나누는 기본선
  • ring1.5포커스와 선택 상태

Interaction

빠르고 자연스러운 움직임

motion

모션은 속도보다 목적이 먼저입니다. 나타나고 이동하는 요소에는 부드러운 감속을, 사라지는 요소에는 짧고 명확한 가속을 적용합니다.

  • fast150ms
  • base250ms
  • slow350ms

카드에 포인터를 올려 진입과 퇴장 곡선의 차이를 확인해 보세요.

easecubic-bezier(.25, 1, .5, 1) · 나타나거나 이동하는 요소
exitcubic-bezier(.4, 0, 1, 1) · 빠르게 화면을 떠나는 요소

Foundation

숫자와 문장을 또렷하게

typography · Pretendard

Pretendard를 기준으로 숫자, 제목, 본문, 레이블에 필요한 15가지 역할을 정의합니다. 큰 글자는 핵심 결과와 메시지에, 작은 글자는 맥락과 상태를 설명하는 데 사용합니다. 정의되지 않은 크기와 굵기는 사용하지 않으며, 한글 낱말은 줄 중간에서 나누지 않습니다.

  • 오늘도 반짝이는 하루displayLarge40 · 700 · 1.25 · -0.03em · 대표 메시지
  • 12개의 새로운 기록displayMedium36 · 700 · 1.25 · -0.03em · 핵심 결과
  • 이번 주의 변화displaySmall32 · 700 · 1.25 · -0.03em · 요약 제목
  • 프로젝트를 시작해 볼까요?headlineLarge28 · 700 · 1.25 · -0.03em · 화면 제목
  • 최근 활동headlineMedium24 · 700 · 1.25 · -0.02em · 주요 섹션 제목
  • 2026년 8월 24일headlineSmall24 · 500 · 1.25 · -0.02em · 보조 헤드라인
  • 새로운 아이디어titleLarge20 · 700 · 1.25 · -0.02em · 카드 제목
  • 디자인 검토가 완료됐어요titleMedium16 · 600 · 1.35 · -0.01em · 항목 제목
  • 오늘 오후 3시titleSmall14 · 600 · 1.35 · -0.01em · 작은 제목
  • 필요한 정보는 쉽게 찾고, 중요한 일에 더 오래 집중할 수 있어요.bodyLarge16 · 400 · 1.65 · 강조 본문
  • 변경한 내용은 모든 기기에서 자동으로 동기화됩니다.bodyMedium14 · 400 · 1.65 · 기본 본문
  • 마지막 저장 2분 전bodySmall12 · 400 · 1.35 · 도움말과 설명
  • 계속하기labelLarge14 · 600 · 1.35 · -0.01em · 버튼과 탭
  • 진행 중 · 8개labelMedium12 · 500 · 1.35 · 상태와 메타 정보
  • NEWlabelSmall11 · 500 · 1.35 · 배지와 캡션

Principles

좋은 화면을 고르는 여섯 원칙

  • 강한 시각 효과는 가장 중요한 행동 하나에 집중합니다. 그라데이션은 한 화면에 하나만 사용합니다.
  • 상승과 하락은 한국 금융 서비스의 관습을 따르되, 색상과 함께 화살표와 문구를 제공해 의미를 분명히 합니다.
  • 위험 색상은 되돌릴 수 없는 행동에만 사용합니다. 수정하거나 취소할 수 있는 행동에 불필요한 불안을 만들지 않습니다.
  • 정보의 관계는 상자를 겹치는 대신 간격과 정렬로 표현합니다. 화면의 구조는 단순할수록 빠르게 읽힙니다.
  • 가장 큰 글자는 사용자가 찾는 답을 보여줍니다. 입력보다 결과가 먼저 읽히도록 정보의 순서를 설계합니다.
  • 금액과 핵심 수치는 생략하지 않습니다. 공간이 부족하면 정해진 글자 단계 안에서 크기를 조절해 전체 값을 보여줍니다.

History

결정과 배움을 함께 기록합니다

  1. 2026-08-09첫 번째 화면

    투자 계산기 목업을 다듬으며 보라색 테마에 Aurora Ledger라는 이름을 붙였습니다. 숫자를 정확하게 보여주는 제품이 시스템의 출발점이 되었습니다.

  2. 초기 실험중성색에 브랜드를 담다

    순수한 회색만 사용하면 화면은 깔끔하지만 Twinkle AI Labs만의 인상이 사라졌습니다. 모든 중성색에 남보라의 기운을 아주 조금 더해 브랜드의 공기를 되찾았습니다.

  3. 초기 실험의미가 있는 색을 복원하다

    모든 강조색을 보라로 통일했지만 금융 정보의 상승과 하락을 즉시 구분하기 어려웠습니다. 한국 시장의 익숙한 문법에 따라 상승은 빨강, 하락은 파랑으로 되돌렸습니다.

  4. 초기 실험장식보다 행동에 집중하다

    큰 숫자에 쓰던 그라데이션을 주요 버튼으로 옮겼습니다. 화려함은 읽을 정보를 꾸미는 대신 사용자가 다음 행동을 찾도록 돕습니다.

  5. 2026-08-18공통 디자인 언어로 확장

    색상과 대비 기준을 확정하고 첫 제품에 적용했습니다. Aurora Ledger는 단일 화면의 테마에서 모든 제품이 공유하는 시스템으로 확장되었습니다.

  6. 2026-08-22토큰 체계 완성

    색상 중심이던 기준에 불투명도, 간격, 크기, 고도, 형태, 움직임을 더했습니다. 화면을 만드는 대부분의 결정을 공통 언어로 표현할 수 있게 되었습니다.

  7. 2026-08-23원칙을 문서로 공개

    값을 나열하는 데서 그치지 않고 각 결정을 내린 이유와 사용 원칙을 기록했습니다. 제품이 늘어나도 같은 판단을 반복할 수 있는 기반을 만들었습니다.