스타일 가이드
색상 (Colors)
우리의 색상 팔레트는 콘텐츠가 돋보이도록 중립적인 스케일을 기반으로 합니다. 의미론적 색상은 특정 상호작용이나 상태를 위해 제한적으로 사용해야 합니다.
타이포그래피 (Typography)
최적의 성능과 네이티브 느낌을 위해 시스템 폰트 스택을 사용합니다. 명확한 크기와 굵기 차이를 통해 위계를 확립합니다.
아이콘 (Iconography)
이 홈페이지는 Lucide React 라이브러리를 사용합니다. 아이콘은 간결하고 명확해야 하며, 텍스트와 함께 사용될 때 시각적 균형을 맞춰야 합니다.
브랜드 아이콘 (Brand Icon)
전용 로고 마크를 브랜드 아이콘으로 사용합니다. 상큼함과 활력을 상징하며, Energetic Orange 컬러의 핵심 요소를 담고 있습니다.
Official Brand Mark
사용 예시 (Usage)
크기 (Sizes)
색상 및 스타일 (Color & Style)
테마 미리보기 (Preview)
Energetic Orange 컬러와 Sharp (0px) 모서리 스타일이 적용된 전체적인 모습입니다.
BUILDING
WITH ENERGY
확고한 디자인 원칙 위에 세워진 일관성 있는 웹 경험을 추구합니다.
Project Zero
Visual Language
우리의 브랜드 아이덴티티는 명확한 직선과 활기찬 컬러를 통해 디지털 환경에서의 존재감을 드러냅니다.
새로운 소식을 받으세요.
매달 업데이트되는 디자인 가이드라인을 전해드립니다.
컴포넌트
입력 필드 (Input)
폼 입력 필드 또는 입력 필드처럼 보이는 컴포넌트를 표시합니다.
기본 (Default)
라벨 및 도움말 텍스트 포함 (With Label & Helper Text)
이메일은 공유되지 않습니다.
오류 상태 (With Error)
유효하지 않은 이메일 주소입니다.
비활성화 (Disabled)
| 속성 (Prop) | 타입 (Type) | 기본값 (Default) | 설명 (Description) |
|---|---|---|---|
| label | string | - | 입력 필드의 라벨입니다. |
| helperText | string | - | 입력 필드 아래에 표시되는 도움말 텍스트입니다. |
| error | string | - | 입력 필드 아래에 표시되는 오류 메시지입니다. 입력 필드의 테두리 색상을 변경합니다. |
카드 (Card)
헤더, 콘텐츠, 푸터를 포함한 카드를 표시합니다.
예시 (Example)
알림
읽지 않은 메시지가 3개 있습니다.
팀원이 메인 브랜치에 3개의 커밋을 푸시했습니다.
구조 (Structure)
- Card: 메인 컨테이너입니다.
- CardHeader: 제목과 설명을 위한 컨테이너입니다.
- CardTitle: 카드의 제목입니다.
- CardDescription: 설명 또는 메타 텍스트입니다.
- CardContent: 메인 콘텐츠 영역입니다.
- CardFooter: 푸터 영역으로, 주로 액션 버튼이 위치합니다.
패턴
히어로 섹션 (Hero Section)
주로 페이지 상단에 위치하며, 메인 헤딩, 간략한 설명, 주요 행동 유도(CTA) 버튼을 포함하는 중요한 섹션입니다.
자신감 있게 디자인하세요.
디자인 시스템을 활용하여 일관성 있고 아름다운 사용자 경험을 구축하세요.
기능 그리드 (Feature Grid)
여러 기능이나 항목을 그리드 형태로 나열하여 표시하는 레이아웃 패턴입니다.
디자인 시스템
일관된 브랜드 경험을 위한 컴포넌트와 패턴을 제공합니다.
컴포넌트 라이브러리
재사용 가능한 UI 요소로 빠르게 인터페이스를 구축할 수 있습니다.
브랜드 아이덴티티
전용 로고 마크와 Energetic Orange 스타일로 독자적인 시각 언어를 구현합니다.