# Aurora Design

> 오로라 현상에서 영감을 받은 화려하고 몽환적인 그라데이션 스타일입니다.

- 층: 스타일 (시각적 스타일)
- ID: aurora-design
- 연도: 2022
- 무드 태그: 테크·미래적, 화려한, 다크
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/aurora-design

## 정의

오로라 현상에서 영감을 받은 화려하고 몽환적인 그라데이션 스타일입니다.

## 주요 특징

- 다채로운 그라데이션
- 블러 효과
- 유동적인 형태
- 발광 효과
- 몽환적 분위기

## 핵심 원칙

- 유동성
- 신비로움
- 생동감

## 컬러 시스템

오로라처럼 흐르는 다색 그라데이션. 보라·청록·핑크 계열의 유동적 팔레트

### 색상 역할

- 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.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: 0 (여백 −2 ↔ +2 빽빽)
- 온도감: -1 (차가움 −2 ↔ +2 따뜻함)
- 시대감: +2 (레트로 −2 ↔ +2 미래적)
- 격식: 0 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- AI/테크 제품 랜딩
- 프리미엄 SaaS
- 크리에이티브 포트폴리오
- 음악·아트 플랫폼

## 추천 프로젝트 유형

- AI/테크 제품 랜딩
- 프리미엄 SaaS
- 크리에이티브 포트폴리오
- 음악·아트 플랫폼

## 장단점

### 장점

- 미래지향적이고 프리미엄한 느낌
- CSS 단순 조합으로 구현 가능
- 어두운 배경에서 특히 효과적

### 단점·한계

- 남발 시 비슷비슷한 AI 스타트업 사이트처럼 보임
- 밝은 배경에서는 효과 감소
- 콘텐츠 가독성 확보 어려움

## 실제 사용 제품·서비스

- OpenAI 웹사이트 배경
- Vercel 랜딩
- 많은 AI 스타트업 사이트

## 자주 묻는 질문

### Q1. Aurora Design이란 무엇인가요?

오로라 현상에서 영감을 받은 화려하고 몽환적인 그라데이션 스타일입니다.

### Q2. Aurora Design의 핵심 디자인 원칙은 무엇인가요?

Aurora Design의 핵심 원칙은 유동성, 신비로움, 생동감입니다.

### Q3. Aurora Design은 어떤 프로젝트에 적합한가요?

Aurora Design은 AI/테크 제품 랜딩, 프리미엄 SaaS, 크리에이티브 포트폴리오, 음악·아트 플랫폼, AI/테크 제품 랜딩, 프리미엄 SaaS, 크리에이티브 포트폴리오, 음악·아트 플랫폼 등의 프로젝트에 적합합니다.

### Q4. Aurora Design의 장단점은 무엇인가요?

장점으로는 미래지향적이고 프리미엄한 느낌, CSS 단순 조합으로 구현 가능, 어두운 배경에서 특히 효과적이 있습니다. 단점으로는 남발 시 비슷비슷한 AI 스타트업 사이트처럼 보임, 밝은 배경에서는 효과 감소, 콘텐츠 가독성 확보 어려움이 있습니다.

### Q5. Aurora Design에서 색상은 어떻게 사용하나요?

오로라처럼 흐르는 다색 그라데이션. 보라·청록·핑크 계열의 유동적 팔레트 색상 역할은 aurora-1: 보라·파랑 계열 — 주 그라데이션 시작, aurora-2: 청록·민트 계열 — 중간, aurora-3: 핑크·자주 계열 — 끝점입니다. 주의사항: 밝은(흰색) 배경 사용 금지 — 오로라는 어두운 하늘 위에서 빛남, 단색 사용 금지 — 반드시 다색 그라데이션.

### Q6. Aurora Design에 어울리는 폰트 스타일은 무엇인가요?

Aurora Design에는 세련되고 가벼운 산세리프. 오로라의 신비로운 분위기와 어울리는 현대적 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 두꺼운 slab serif 금지 — 가볍고 얇은 느낌 유지, heading에 gradient text 효과 활용 권장 (aurora 색상을 폰트에 적용).

### Q7. Aurora Design 디자인에서 하면 안 되는 것은 무엇인가요?

Aurora Design에서 피해야 할 것: flat 단색 배경 사용 금지, 어두운 배경 없이 그라데이션만 사용 금지, hard edge 요소 사용 금지 — 모든 것이 blur되고 흐릿하게.

### Q8. Aurora Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Aurora Design을 적용한 대표적인 제품·서비스로는 OpenAI 웹사이트 배경, Vercel 랜딩, 많은 AI 스타트업 사이트 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- 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)

### 타이포그래피

- fontFamily: Comfortaa, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.02em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1.1
- borderRadius: sm 12px / md 20px / lg 32px / full 9999px
- shadow sm: 0 4px 20px rgba(183, 148, 246, 0.2)
- shadow md: 0 8px 40px rgba(183, 148, 246, 0.3)
- shadow lg: 0 16px 60px rgba(183, 148, 246, 0.4)
- border: 1px solid rgba(255, 255, 255, 0.3)

### 컴포넌트 형태

- button: pill / hover glow / text none
- card: glass / hover glow
- input: filled / focus glow
- badge: pill / subtle
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section spacious
- animation: 600ms ease-in-out
- specialEffects: glassmorphism, gradientText, animatedBackground

## 관련 링크

### 관련 스타일

- [Glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)
- [Gradient Design](https://ui.buildersgate.com/styles/gradient-design)
- [Dark Mode Design](https://ui.buildersgate.com/styles/dark-mode)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/aurora-design)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/aurora-design)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/aurora-design)

### 비교

- [Aurora Design vs Claymorphism](https://ui.buildersgate.com/compare/aurora-design-vs-claymorphism)
- [Aurora Design vs Dark Mode Design](https://ui.buildersgate.com/compare/aurora-design-vs-dark-mode)
- [Aurora Design vs Glassmorphism](https://ui.buildersgate.com/compare/aurora-design-vs-glassmorphism)
- [Aurora Design vs Gradient Design](https://ui.buildersgate.com/compare/aurora-design-vs-gradient-design)
- [Aurora Design vs Maximalism](https://ui.buildersgate.com/compare/aurora-design-vs-maximalism)
- [Aurora Design vs Organic & Natural](https://ui.buildersgate.com/compare/aurora-design-vs-organic-natural)

### 쓰임새별 추천

- [제품 랜딩 페이지](https://ui.buildersgate.com/for/landing-page)
- [포트폴리오](https://ui.buildersgate.com/for/portfolio)

---

HTML 버전: https://ui.buildersgate.com/styles/aurora-design

이 문서는 https://ui.buildersgate.com/styles/aurora-design.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.