Fantastical

빨강 14일 아이콘 + 자연어 이벤트 추가 + 위크/먼스 뷰의 Apple Design Award 캘린더

서양생산성소비자따뜻한modern-minimal고딕comfortableroundsubtle라이트다크공식한글 지원출시 2011개정 2024

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Fantastical (Flexibits)
한 줄 정체성: macOS·iOS 프리미엄 캘린더 — 자연어 이벤트 추가, 2020 Apple Design Award
공식 디자인 철학: Apple HIG 충실, 자연어 파싱 + 정교한 뷰 전환
시그니처 요소 1개: 빨강 14일 캘린더 페이지 모양 아이콘 + Fantastical Red(#E0143C) + 자연어 입력("내일 오후 3시 디자인 리뷰 30분") + Day/Week/Month/Year 뷰 토글. Calendar.app의 빨강과 유사하지만 더 짙은 와인 톤

Tone & Mood

톤 & 무드

핵심 키워드 3개: 자연어, 캘린더, 정교
무드 설명: 라이트 그레이(#F5F5F7) 베이스 + 흰 콘텐츠 카드. 빨강은 오늘 날짜·강조에만, 캘린더별 다른 색(파랑/그린/오렌지) 표시. 모서리 5~8px Round.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable
모서리 성향: Round (5~10px)
평면성: Subtle

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Fantastical Red */
  --color-primary-50:  #FCE3E8;
  --color-primary-100: #F7BAC5;
  --color-primary-200: #F08A9D;
  --color-primary-300: #E85B76;
  --color-primary-400: #E33055;
  --color-primary-500: #E0143C;   /* Fantastical Red */
  --color-primary-600: #B70F30;
  --color-primary-700: #8A0B24;
  --color-primary-800: #5E0718;
  --color-primary-900: #34030D;

  /* Calendar colors (Apple Calendar 표준 + 확장) */
  --cal-red:    #FF3B30;
  --cal-orange: #FF9500;
  --cal-yellow: #FFCC00;
  --cal-green:  #34C759;
  --cal-mint:   #00C7BE;
  --cal-blue:   #3A82F7;
  --cal-indigo: #5856D6;
  --cal-purple: #AF52DE;
  --cal-pink:   #FF2D55;
  --cal-brown:  #A2845E;

  /* Neutral (Apple system gray) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F5F5F7;
  --color-neutral-100:  #F2F2F7;
  --color-neutral-200:  #E5E5EA;
  --color-neutral-300:  #D1D1D6;
  --color-neutral-500:  #AEAEB2;
  --color-neutral-700:  #8E8E93;
  --color-neutral-800:  #48484A;
  --color-neutral-900:  #1D1D1F;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #D1F0DC;
  --color-success-fg: #34C759;
  --color-warning-bg: #FFF1C5;
  --color-warning-fg: #FF9500;
  --color-error-bg:   #FCE3E8;
  --color-error-fg:   #E0143C;
  --color-info-bg:    #E0EDFE;
  --color-info-fg:    #3A82F7;

  /* Surface */
  --bg-base:     #F5F5F7;
  --bg-subtle:   #F2F2F7;
  --bg-elevated: #FFFFFF;
  --bg-sidebar:  #F0F0F2;
  --bg-overlay:  rgba(29,29,31,0.40);

  /* Text */
  --text-primary:    #1D1D1F;
  --text-secondary:  #48484A;
  --text-tertiary:   #8E8E93;
  --text-on-primary: #FFFFFF;
  --text-link:       #3A82F7;
  --text-disabled:   #C7C7CC;

  /* Border */
  --border-default: #E5E5EA;
  --border-subtle:  #F2F2F7;
  --border-strong:  #C7C7CC;
  --border-focus:   #E0143C;
}

[data-theme="dark"] {
  --bg-base:     #1C1C1E;
  --bg-subtle:   #2C2C2E;
  --bg-elevated: #2C2C2E;
  --bg-sidebar:  #1C1C1E;
  --text-primary:    #FFFFFF;
  --text-secondary:  #EBEBF5;
  --border-default:  #3A3A3C;
}

Typography

타이포그래피

폰트 페어링:
- 영문: SF Pro Text/Display (Apple 시스템)
- 한글: Apple SD Gothic Neo / Pretendard
- 시간: SF Pro / SF Mono (옵션)
위계:
- Display: 32px / 700 / 1.2 (월 헤더)
- H1: 24px / 700 / 1.25
- H2: 18px / 700 / 1.3
- H3: 15px / 700 / 1.35
- Body Large: 15px / 400 / 1.45
- Body: 13px / 500 / 1.4
- Body Small: 12px / 500 / 1.4
- Day number: 14px / 600 / 1
- Day number (today): 16px / 700 / 1
- Time label: 11px / 700 / 1 (오전 9:00 같은)
- Caption: 11px / 500 / 1.3

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 6px; --space-md: 10px; --space-lg: 14px; --space-xl: 20px; --space-2xl: 32px; --space-3xl: 48px; ``

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 5px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 12px 28px rgba(0,0,0,0.12);

Iconography

스타일: SF Symbols (Apple 시스템)
Stroke 굵기: 1.5~2px
모서리 처리: Round
추천 라이브러리: SF Symbols

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 13px/1 -apple-system, 'SF Pro Text', sans-serif; border-radius: 5px; padding: 7px 14px; border: 0; cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-today { background: var(--color-primary-500); color: #fff; padding: 5px 12px; font: 600 12px/1 inherit; border-radius: 5px; }
.view-toggle { display: inline-flex; background: var(--bg-subtle); border-radius: 5px; padding: 2px; }
.view-toggle .opt { padding: 5px 12px; font: 600 12px/1 inherit; color: var(--text-secondary); cursor: pointer; border-radius: 4px; }
.view-toggle .opt.active { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-sm); }

Input (Natural-language)

.input { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 5px; padding: 8px 12px; font: 400 14px/1.4 inherit; color: var(--text-primary); }
.input:focus { border-color: var(--color-primary-500); outline: 2px solid rgba(224,20,60,0.18); }
.nl-input { background: var(--bg-subtle); border-radius: 8px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; font: 500 14px/1.4 inherit; color: var(--text-tertiary); cursor: text; }
.nl-input::before { content: '+'; color: var(--color-primary-500); font: 700 18px/1 inherit; }
.nl-input .parsed { color: var(--color-primary-500); font-weight: 600; }

Card (Event / Day cell)

.event { background: var(--cal-blue); color: #fff; border-radius: 5px; padding: 4px 8px; font: 600 11px/1.3 inherit; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.event .time { font: 700 10px/1 inherit; opacity: 0.85; }
.event.calendar-red    { background: var(--cal-red); }
.event.calendar-orange { background: var(--cal-orange); }
.event.calendar-green  { background: var(--cal-green); }
.event.calendar-purple { background: var(--cal-purple); }
.event.tentative       { background: repeating-linear-gradient(45deg, var(--cal-blue), var(--cal-blue) 4px, rgba(58,130,247,0.7) 4px, rgba(58,130,247,0.7) 8px); }
.day-cell { padding: 6px; border-radius: 5px; font: 600 13px/1 inherit; text-align: center; min-height: 50px; }
.day-cell.today { background: var(--color-primary-500); color: #fff; font-weight: 700; }
.day-cell.weekend { color: var(--text-tertiary); }
.day-cell .dot-row { display: flex; gap: 2px; justify-content: center; margin-top: 4px; }
.day-cell .dot { width: 4px; height: 4px; border-radius: 9999px; }

Badge / Tag

.cal-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 9999px; font: 600 11px/1.4 inherit; background: var(--bg-subtle); color: var(--text-secondary); cursor: pointer; }
.cal-pill .swatch { width: 8px; height: 8px; border-radius: 2px; }
.tag-conf { background: var(--color-info-bg); color: var(--color-info-fg); border-radius: 3px; padding: 1px 6px; font: 600 11px/1.3 inherit; }
.heatmap-day { font: 700 11px/1 inherit; padding: 2px 6px; border-radius: 9999px; }
.heatmap-day.today { background: var(--color-primary-500); color: #fff; }

Navigation (Sidebar — Calendars list)

.sidebar { background: var(--bg-sidebar); width: 250px; padding: 14px 0; }
.sidebar .group { padding: 10px 16px 4px; font: 700 11px/1.4 inherit; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.sidebar .cal-row { display: flex; align-items: center; gap: 10px; padding: 6px 18px; font: 500 13px/1 inherit; color: var(--text-primary); cursor: pointer; }
.sidebar .cal-row input[type=checkbox] { appearance: none; width: 14px; height: 14px; border-radius: 3px; cursor: pointer; }
.sidebar .cal-row input[type=checkbox]:checked { box-shadow: inset 0 0 0 7px currentColor; }
.sidebar .cal-row.red    input  { color: var(--cal-red); border: 1px solid var(--cal-red); }
.sidebar .cal-row.blue   input  { color: var(--cal-blue); border: 1px solid var(--cal-blue); }
.sidebar .cal-row.green  input  { color: var(--cal-green); border: 1px solid var(--cal-green); }
.sidebar .cal-row.purple input  { color: var(--cal-purple); border: 1px solid var(--cal-purple); }

Motion

--duration-fast: 120ms;
--duration-base: 240ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

Anti-patterns

1. Day/Week/Month/Year 뷰 토글 제거 금지 — 다중 뷰가 정체성 2. 빨강을 #FF3B30 등 밝은 톤으로 변경 금지 — Fantastical Red(#E0143C) 짙은 와인 톤 3. 자연어 입력 필드 없이 폼 위주 이벤트 추가 강제 금지 — "내일 오후 3시" 같은 입력이 시그니처 4. 캘린더별 컬러 단일화 금지 — 사용자 캘린더마다 색 구분 5. 본문 폰트 SF Pro 외 사용 금지 — Apple HIG 충실

Sources

출처

https://flexibits.com/fantastical