Design System · v1.0

Style
Guide.

야채디자인 홈페이지를 구성하는 파운데이션과 컴포넌트 시스템입니다. 색상, 서체, 여백, 모션 원칙과 실제 사용된 컴포넌트들을 확인할 수 있어요.

Foundation 01

Colors

Background --bg · #0a0a08
Surface --mid · #141412
Foreground --fg · #eeebe2
Accent --accent · #c8f04e
Muted --muted · #4a4a42
Subtle fg @ 55% opacity
Foundation 02

Typography

Bebas NeueDisplay · EN
Yachae
Hero · Section Title · Stats
PaperlogyDisplay · KR
야채디자인.
Hero · Title · Body KR
DM MonoMono · Label
Figma / Template / Product Design
Nav · Label · Tag · Button
Paperlogy LightBody · 300
현장을 잘 아는 디자이너가 함께합니다. 강의, 템플릿, 프로덕트 파트너십까지.
Description · Body
Foundation 03

Spacing

4px
.25rem · 아이콘 간격, 미세 조정
8px
.5rem · 태그, 배지 내부 패딩
16px
1rem · 기본 간격
24px
1.5rem · 컴포넌트 내부 패딩
40px
2.5rem · 섹션 내부 간격
80px
5rem · 섹션 간 여백
3vw
반응형 · 페이지 좌우 여백
Foundation 04

Motion

Fade Up opacity 0→1 + translateY 30px→0
duration: 0.8s · ease
Reveal X clip-path inset 100%→0%
duration: 0.9s · cubic(.77,0,.175,1)
Scale In scale 0.8→1 + opacity
duration: 0.3s · ease · Modal
Slide Up translateY 110%→0
duration: 1s · cubic(.77,0,.175,1) · Hero
Component 01

Buttons

Primary

Ghost

Component 02

Navigation

Sticky Nav — 스크롤 80% 이후 등장

Component 03

Cards

Service Card

01
Figma Class
실무자를 위한 피그마 레슨입니다.
02
Templates
실무에서 검증된 디자인 템플릿.
03
Product
프로덕트 디자인 외주 및 협업.

Portfolio Card

01
기술 뉴스 통합 플랫폼
Web · Mobile · PWA
02
이벤트 장소 마켓플레이스
Web · Mobile · PWA
Component 04

Modals

Contact

편한 방법으로 연락주세요.
빠른 답변은 카카오톡을 이용해주세요.

카카오톡 상담하기오픈채팅 · 빠른 응답 →
or
이메일로 연락하기yachae.design@gmail.com →
Component 05

Badges

Coming Soon — Default / Hover

Coming Soon Coming Soon · Hover
Component 06

Stats Bar

100+ 실무레슨
4회 기업출강
10+ 외주 프로젝트
5yr+ 실무 경력
Component 07

Marquee

Figma Class✦ UI Design✦ Templates✦ Product Design✦ Yachae Studio✦ Figma Class✦ UI Design✦ Templates✦ Product Design✦ Yachae Studio✦