선드라이토마토 v2.0 · 2026-10

흰 바탕 위에 회색 단계로 짜고, 토마토는 누르는 곳에만 쓰는 디자인 시스템.

흰 바탕페이지 · 카드 · 상단바는 흰색. 카드는 그림자 대신 옅은 회색 선으로 나눈다.
토마토는 버튼 · 선택에만채움 버튼, 선택된 칩, 진행 표시. 장식 · 배경 · 아이콘에는 쓰지 않는다.
의미 색은 정보에만일정 종류 · 이동 수단 · 상태처럼 색이 뜻을 나르는 곳에만.

팔레트

토큰 이름은 웹 /brand.css와 앱 Brand(Flutter)가 같다.

포인트

토마토
#F04438
채움 버튼 · FAB · 선택
딥 토마토
#D12F24
눌림 · 링크 · 작은 강조 글자
토마토 틴트
#FFEEEC
선택된 칩 바탕 · 위험 배지

회색 단계

grey50
#F9FAFB
옅은 면
grey100
#F2F4F6
보조 버튼 · 칩 · 입력
grey200
#E5E8EB
카드 선 · 비활성
grey300
#D1D6DB
윤곽선
grey400
#B0B8C1
비활성 글자
grey500
#8B95A1
힌트 · 라벨
grey600
#6B7684
보조 글자
grey700
#4E5968
아이콘
grey800
#333D4B
보조 버튼 글자
grey900
#191F28
본문 · 제목

의미 색

항공 · 자동차
#3182F6
파랑 — 하늘
숙소
#8B5CF6
보라 — 휴식
식당
#FF7A45
주황 — 식사
관광 · 도보 · 성공
#12B886
초록 — 바깥
대중교통 · 경고
#FF9F1A
노랑주황
위험
#F04438
토마토와 같은 값

웹 글자용 짙은 짝 — 성공 #0B7A57 on #E6F8F1 · 경고 #A35C00 on #FFF4E5

타이포그래피

시스템 고딕(800 · 700 · 400) + 모노(라벨 · 수치). 제목은 grey900, 설명은 grey600.

Display서울 3일, 맛있게
Heading이 계획이 실제로 말이 되나요
Body장소를 추가하면 이동 시간과 체류 시간을 합해 하루가 실제로 가능한지 알려줍니다.
Data14:30 · 이동 12분 · 체류 1시간

컨트롤

버튼은 둥근 사각(12px), 칩은 알약. 토마토가 칠해지는 건 주 버튼과 선택 상태뿐.

버튼
칩 · 선택
탭
1일차2일차3일차
입력 · FAB
FAB · 토마토 · 16px

토마토트레블 컴포넌트

앱 1.3(2026-10) 화면 그대로.

여행 카드
도쿄 맛집 투어 D-12
2026-07-05 ~ 07-08 · 3박 4일14곳
일정 카드 · 종류 색 타일
1
롯데호텔 서울
숙소 · 체크아웃 11:00
2
청와대소금구이
14:00 · 체류 1시간
3
경복궁
예상 15:20 도착 · 체류 1시간 30분
하루 요약 배지 · 현실성
이동 1시간 20분 · 체류 3시간 · 5곳 이동 3시간 · 6곳 · 빠듯해요 이동 5시간 30분 · 8곳 · 무리한 하루
이동 수단 칩
12분 5분 8분

수단 아이콘은 의미 색, 고른 칩만 토마토 틴트.

지도 · 흰 테두리 경로 + 방향 배지 + 순번
1 2 3 4
도보 대중교통 자동차 순번 원 = 일정 종류 색

모양

카드 · FAB · 16px
버튼 · 입력 · 12px
종류 타일 · 14px
칩 · 배지 · 알약
바텀시트 · 위 24px

v1 → v2

  • 바탕 크림(#FCF7F1) → 흰색. 글자 · 선은 갈색 계열 → 회색 단계(grey50~900).
  • 포인트 말린 토마토(#B7362A) → 선명한 토마토(#F04438), 버튼 · 선택에만.
  • 바질 · 선 골드(보조 · 3차 색) 폐지 — 일정 종류 · 이동 수단의 의미 색으로 대체. 예전 토큰 이름(--basil, --sun)은 의미 색 별칭으로 남겼다.
  • 버튼 알약 → 둥근 사각 12px. 보조 버튼은 테두리 대신 회색 바탕.
선드라이토마토 디자인 시스템 v2.0 Flutter Brand + web CSS 변수 단일 소스