Eurofix Design System
Figma (eurofix_make) export_node_as_image + get_node_info 실측 기반 — 2026-04-01
Color Tokens
Surface
bg-dark
#090909
bg-card-dark
#2d2d2d
bg-light
#ffffff
tab-bg
#2c2a2a
tab-active
#464646
service-card
#878787
Brand / Primary
primary-btn
#f7931e · CTA 버튼
primary
#d87e15 · 링크/로그인
progress
#fe8d0d · 진행 바
accent-light
#f6ab54 · 타이틀 강조
accent-dark
#d47609 · 회원가입
emergency
#ef4444 · 긴급 버튼
Text
text-on-dark
#ffffff
text-dark
#3b3b3b · 차량명
text-primary
#334155 · 입력 라벨
text-secondary
#7c7c7c
text-tertiary
#94a3b8 · placeholder
Pagination Dots
dot-active
#f7931e · 8px
dot-inactive
#d9d9d9 · 5px
dot-secondary
#6c6c6c
Background Patterns
Splash / bg-dark
Login / bg-blueprint-dark
Home / bg-blueprint-light
Typography
Primary: A2Z (커스텀 Korean font, weight 250→700, 7단계) — fallback: Noto Sans KR
Secondary: Noto Sans KR — 버튼·CTA·회원가입
Utility: Manrope Bold — SECURE/FAST 배지 레터링
Secondary: Noto Sans KR — 버튼·CTA·회원가입
Utility: Manrope Bold — SECURE/FAST 배지 레터링
Ef
스플래시 타이틀
Boongboong-E
정비 / 픽업 예약
G-CLASS SUV AMG G 63 SUV 2025
엔진오일 교체시기
65일 후 점검필요
SECURE · FAST
해당 그래프는 일자 기준으로 표기되는 참고자료로, 운행거리 등 실제 운용 환경에 따라 점검여부 확인이 필요합니다.
Components
Button / CTA
320×55px
Button / Secondary
320×55px
Button / Emergency
80×95px · top-left
Input Field
200×36px · radius 5px
이메일
비밀번호
Form / Login Card
white card + dark bg
Social Login
50×50px circular
Vehicle Carousel Card
234×234px circle
Service Status Card
320px wide
Bottom Tab Bar
376×62px
Logo Block (Splash)
orange block
Trust Badges
SECURE · FAST
Decorative Elements
vertical line
2px #d87e15
2px #d87e15
divider short
96px 1px #f7931e
96px 1px #f7931e
swipe indicator
128×6px rgba(6c6c6c,0.5)
128×6px rgba(6c6c6c,0.5)
Page Header
328×184px
정비/픽업 예약
유로픽스의 프리미엄 케어 서비스를 만나보세요!
원하시는 서비스를 선택하여 주세요.
원하시는 서비스를 선택하여 주세요.
Service Category Card
160×120dp (2×2 grid)
고장 진단
전용 스캐너 기반 정밀 판독
정기 점검
소모품 교환 및 기본 안전 점검
소모품 점검
마모도 체크 및 최적가 교체
자동차 검사
대행부터 리포트까지 원스톱
Accident Repair Card
328×120dp · full-width
사고 수리
보험 수리 및 사고 대차 케어
Back Button
80×64dp · top-left
돌아가기
Bottom Tab Bar (Light)
376×62px · white bg
홈
예약목록
프로필
Back Action Button
328×64dp · bottom
돌아가기
Welcome Header Card
298×230dp
Hello,
We're EuroFix
We're EuroFix
당신을 위한 프리미엄 차량 케어
유로픽스입니다.
유로픽스입니다.
Sign-up Link Row
회원가입 / 로그인 전환
계정이 없으신가요?
회원가입
이미 계정이 있다면
로그인
Booking Service Header
서비스명 + 설명
자동차 검사
정비를 원하는 차량의 픽업부터 점검, 수리와
리포트까지 유로픽스에서 제공하는 원스톱 차량
정비 서비스를 확인해보세요.
리포트까지 유로픽스에서 제공하는 원스톱 차량
정비 서비스를 확인해보세요.
Confirm Button
200dp wide
결정
Pickup Location Modal
328×264dp
Screen Patterns (Figma 실측)
Splash Screenbg-dark + logo block (Frame 24)
Login Screen (Dark)bg-blueprint-dark + white card (Frame 33)
Home Screenbg-blueprint-light (Frame 17)
Service Selection Screenbg-dark + white tabbar (Frame 39)
Login Welcome Screenbg-light + welcome card (Frame 29)
Sign-up Screenbg-dark + 회원가입 폼 (Frame 34)
Pickup Modal Screen서비스 헤더 + 지도 모달 (Frame 42)
Spacing & Radius
Spacing
Border Radius
0 / square
버튼
버튼
5px / md
input
input
8px / lg
12px / xl
카드
카드
full
dot, badge
dot, badge
Flutter Token Mapping
// lib/core/theme/app_colors.dart (Figma 실측)
static const bgDark = Color(0xFF090909); // Splash 배경
static const bgLight = Color(0xFFFFFFFF); // Home 배경
static const tabBg = Color(0xFF2C2A2A); // 탭바 배경
static const tabActive = Color(0xFF464646); // 탭바 활성 섹션
static const serviceCard = Color(0xFF878787); // 서비스 카드
static const primaryBtn = Color(0xFFF7931E); // CTA 버튼 (정비/픽업)
static const primary = Color(0xFFD87E15); // 링크, 로그인 버튼
static const progressFill = Color(0xFFFE8D0D); // 엔진오일 진행 바
static const emergency = Color(0xFFEF4444); // 긴급 버튼
static const dotActive = Color(0xFFF7931E); // 페이지네이션 활성
static const dotInactive = Color(0xFFD9D9D9); // 페이지네이션 비활성
static const textDark = Color(0xFF3B3B3B); // 홈 차량명 텍스트
static const textPrimary = Color(0xFF334155); // 입력 라벨
static const textSecondary= Color(0xFF7C7C7C);
static const textTertiary = Color(0xFF94A3B8); // placeholder
static const inputBg = Color(0x59D9D9D9); // 35% opacity
static const bgDark = Color(0xFF090909); // Splash 배경
static const bgLight = Color(0xFFFFFFFF); // Home 배경
static const tabBg = Color(0xFF2C2A2A); // 탭바 배경
static const tabActive = Color(0xFF464646); // 탭바 활성 섹션
static const serviceCard = Color(0xFF878787); // 서비스 카드
static const primaryBtn = Color(0xFFF7931E); // CTA 버튼 (정비/픽업)
static const primary = Color(0xFFD87E15); // 링크, 로그인 버튼
static const progressFill = Color(0xFFFE8D0D); // 엔진오일 진행 바
static const emergency = Color(0xFFEF4444); // 긴급 버튼
static const dotActive = Color(0xFFF7931E); // 페이지네이션 활성
static const dotInactive = Color(0xFFD9D9D9); // 페이지네이션 비활성
static const textDark = Color(0xFF3B3B3B); // 홈 차량명 텍스트
static const textPrimary = Color(0xFF334155); // 입력 라벨
static const textSecondary= Color(0xFF7C7C7C);
static const textTertiary = Color(0xFF94A3B8); // placeholder
static const inputBg = Color(0x59D9D9D9); // 35% opacity