# Aurora Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: aurora-design
- **카테고리**: visual-style
- **연도**: 2022
## 설명
오로라 현상에서 영감을 받은 화려하고 몽환적인 그라데이션 스타일입니다.
## 핵심 원칙
- 유동성
- 신비로움
- 생동감
## 주요 특징
- 다채로운 그라데이션
- 블러 효과
- 유동적인 형태
- 발광 효과
- 몽환적 분위기
## 컬러 시스템 가이드
오로라처럼 흐르는 다색 그라데이션. 보라·청록·핑크 계열의 유동적 팔레트
### 색상 역할
- aurora-1: 보라·파랑 계열 — 주 그라데이션 시작
- aurora-2: 청록·민트 계열 — 중간
- aurora-3: 핑크·자주 계열 — 끝점
- background: 짙은 남색·보라 또는 깊은 어두운 색 — 오로라가 빛나려면 어두운 배경 필요
- text: 밝은 흰색 또는 연한 청록
### 색상 제약 조건
- 밝은(흰색) 배경 사용 금지 — 오로라는 어두운 하늘 위에서 빛남
- 단색 사용 금지 — 반드시 다색 그라데이션
- 그라데이션은 반드시 mesh gradient 또는 blur blob 방식으로
### 다크모드 전략
이미 다크 기반 — 라이트 모드 전환 시 그라데이션 채도 낮추고 배경 밝히기
### 대비 요구사항
밝은 그라데이션 위 텍스트는 흰색, 어두운 배경이라 텍스트 대비는 자연 확보
## 타이포그래피 가이드
- **폰트 성격**: 세련되고 가벼운 산세리프. 오로라의 신비로운 분위기와 어울리는 현대적 폰트
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: 1.25~1.333
### 타이포그래피 제약
- 두꺼운 slab serif 금지 — 가볍고 얇은 느낌 유지
- heading에 gradient text 효과 활용 권장 (aurora 색상을 폰트에 적용)
- letter-spacing 약간 넓게 — 신비로운 느낌 강화
## 하면 안 되는 것 (안티패턴)
- flat 단색 배경 사용 금지
- 어두운 배경 없이 그라데이션만 사용 금지
- hard edge 요소 사용 금지 — 모든 것이 blur되고 흐릿하게
## 반드시 포함해야 하는 것
- mesh gradient 또는 blur blob 배경
- 반투명 glass 요소 (aurora와 glassmorphism 자연 결합)
- glow 효과 (box-shadow: 0 0 20px color)
## 모션 가이드
그라데이션 색상이 천천히 흐르는 animated gradient. 3~8초 주기. ease-in-out 또는 linear infinite.
## 사용 사례
- AI/테크 제품 랜딩
- 프리미엄 SaaS
- 크리에이티브 포트폴리오
- 음악·아트 플랫폼
## 추천 프로젝트 유형
- AI/테크 제품 랜딩
- 프리미엄 SaaS
- 크리에이티브 포트폴리오
- 음악·아트 플랫폼
## 장점
- 미래지향적이고 프리미엄한 느낌
- CSS 단순 조합으로 구현 가능
- 어두운 배경에서 특히 효과적
## 단점·한계
- 남발 시 비슷비슷한 AI 스타트업 사이트처럼 보임
- 밝은 배경에서는 효과 감소
- 콘텐츠 가독성 확보 어려움
## 실제 사용 제품·서비스
- OpenAI 웹사이트 배경
- Vercel 랜딩
- 많은 AI 스타트업 사이트
## 관련 스타일
- [glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)
- [gradient-design](https://ui.buildersgate.com/styles/gradient-design)
- [dark-mode](https://ui.buildersgate.com/styles/dark-mode)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #B794F6
- secondary: #A8EDEA
- accent: #FED6E3
- background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #b794f6 100%)
- surface: rgba(255, 255, 255, 0.2)
- text: #2D3748
- textSecondary: #4A5568
- border: rgba(255, 255, 255, 0.3)
### 헤더
- background: linear-gradient(135deg, rgba(168, 237, 234, 0.5) 0%, rgba(254, 214, 227, 0.5) 50%, rgba(183, 148, 246, 0.5) 100%)
- textColor: #2D3748
- accentColor: #B794F6
### 타이포그래피
- fontFamily: Comfortaa, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.02em
### 스페이싱
- unit: 8px
- scale: 1.1
### 그림자 (Shadows)
- sm: 0 4px 20px rgba(183, 148, 246, 0.2)
- md: 0 8px 40px rgba(183, 148, 246, 0.3)
- lg: 0 16px 60px rgba(183, 148, 246, 0.4)
- xl: 0 24px 80px rgba(183, 148, 246, 0.5)
### Border Radius
- none: 0
- sm: 12px
- md: 20px
- lg: 32px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: rgba(255, 255, 255, 0.3)
### 이펙트
- blur: 20px
- opacity: 0.8
- transition: all 0.6s ease-in-out
### 애니메이션
- duration: 600ms
- easing: ease-in-out
### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=glow / textTransform=none
- 카드: style=glass / hoverEffect=glow
- 인풋: style=filled / focusEffect=glow
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious
### 특수 효과
- glassmorphism: true
- gradientText: true
- animatedBackground: true
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Aurora Design이란 무엇인가요?
A: 오로라 현상에서 영감을 받은 화려하고 몽환적인 그라데이션 스타일입니다.
### Q: Aurora Design의 핵심 디자인 원칙은 무엇인가요?
A: Aurora Design의 핵심 원칙은 유동성, 신비로움, 생동감입니다.
### Q: Aurora Design은 어떤 프로젝트에 적합한가요?
A: Aurora Design은 AI/테크 제품 랜딩, 프리미엄 SaaS, 크리에이티브 포트폴리오, 음악·아트 플랫폼, AI/테크 제품 랜딩, 프리미엄 SaaS, 크리에이티브 포트폴리오, 음악·아트 플랫폼 등의 프로젝트에 적합합니다.
### Q: Aurora Design의 장단점은 무엇인가요?
A: 장점으로는 미래지향적이고 프리미엄한 느낌, CSS 단순 조합으로 구현 가능, 어두운 배경에서 특히 효과적이 있습니다. 단점으로는 남발 시 비슷비슷한 AI 스타트업 사이트처럼 보임, 밝은 배경에서는 효과 감소, 콘텐츠 가독성 확보 어려움이 있습니다.
### Q: Aurora Design에서 색상은 어떻게 사용하나요?
A: 오로라처럼 흐르는 다색 그라데이션. 보라·청록·핑크 계열의 유동적 팔레트 색상 역할은 aurora-1: 보라·파랑 계열 — 주 그라데이션 시작, aurora-2: 청록·민트 계열 — 중간, aurora-3: 핑크·자주 계열 — 끝점입니다. 주의사항: 밝은(흰색) 배경 사용 금지 — 오로라는 어두운 하늘 위에서 빛남, 단색 사용 금지 — 반드시 다색 그라데이션.
### Q: Aurora Design에 어울리는 폰트 스타일은 무엇인가요?
A: Aurora Design에는 세련되고 가벼운 산세리프. 오로라의 신비로운 분위기와 어울리는 현대적 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 두꺼운 slab serif 금지 — 가볍고 얇은 느낌 유지, heading에 gradient text 효과 활용 권장 (aurora 색상을 폰트에 적용).
### Q: Aurora Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Aurora Design에서 피해야 할 것: flat 단색 배경 사용 금지, 어두운 배경 없이 그라데이션만 사용 금지, hard edge 요소 사용 금지 — 모든 것이 blur되고 흐릿하게.
### Q: Aurora Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Aurora Design을 적용한 대표적인 제품·서비스로는 OpenAI 웹사이트 배경, Vercel 랜딩, 많은 AI 스타트업 사이트 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=aurora-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=aurora-design&merged=true
Aurora Design은 AI/테크 제품 랜딩, 프리미엄 SaaS, 크리에이티브 포트폴리오, 음악·아트 플랫폼, AI/테크 제품 랜딩, 프리미엄 SaaS, 크리에이티브 포트폴리오, 음악·아트 플랫폼 등의 프로젝트에 적합합니다.
Aurora Design의 장단점은 무엇인가요?
장점으로는 미래지향적이고 프리미엄한 느낌, CSS 단순 조합으로 구현 가능, 어두운 배경에서 특히 효과적이 있습니다. 단점으로는 남발 시 비슷비슷한 AI 스타트업 사이트처럼 보임, 밝은 배경에서는 효과 감소, 콘텐츠 가독성 확보 어려움이 있습니다.
Aurora Design에서 색상은 어떻게 사용하나요?
오로라처럼 흐르는 다색 그라데이션. 보라·청록·핑크 계열의 유동적 팔레트 색상 역할은 aurora-1: 보라·파랑 계열 — 주 그라데이션 시작, aurora-2: 청록·민트 계열 — 중간, aurora-3: 핑크·자주 계열 — 끝점입니다. 주의사항: 밝은(흰색) 배경 사용 금지 — 오로라는 어두운 하늘 위에서 빛남, 단색 사용 금지 — 반드시 다색 그라데이션.
Aurora Design에 어울리는 폰트 스타일은 무엇인가요?
Aurora Design에는 세련되고 가벼운 산세리프. 오로라의 신비로운 분위기와 어울리는 현대적 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 두꺼운 slab serif 금지 — 가볍고 얇은 느낌 유지, heading에 gradient text 효과 활용 권장 (aurora 색상을 폰트에 적용).
Aurora Design 디자인에서 하면 안 되는 것은 무엇인가요?
Aurora Design에서 피해야 할 것: flat 단색 배경 사용 금지, 어두운 배경 없이 그라데이션만 사용 금지, hard edge 요소 사용 금지 — 모든 것이 blur되고 흐릿하게.
Aurora Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Aurora Design을 적용한 대표적인 제품·서비스로는 OpenAI 웹사이트 배경, Vercel 랜딩, 많은 AI 스타트업 사이트 등이 있습니다.