# Aurora Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: aurora-design
- **카테고리**: visual-style
- **연도**: 2022
## 설명
오로라 현상에서 영감을 받은 화려하고 몽환적인 그라데이션 스타일입니다.
## 핵심 원칙
- 유동성
- 신비로움
- 생동감
## 주요 특징
- 다채로운 그라데이션
- 블러 효과
- 유동적인 형태
- 발광 효과
- 몽환적 분위기
## 사용 사례
- 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
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=aurora-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=aurora-design&merged=true
Aurora Design
오로라 현상에서 영감을 받은 화려하고 몽환적인 그라데이션 스타일입니다.
주요 특징
- 다채로운 그라데이션
- 블러 효과
- 유동적인 형태
- 발광 효과
- 몽환적 분위기
장단점
장점
- +미래지향적이고 프리미엄한 느낌
- +CSS 단순 조합으로 구현 가능
- +어두운 배경에서 특히 효과적
단점 / 한계
- −남발 시 비슷비슷한 AI 스타트업 사이트처럼 보임
- −밝은 배경에서는 효과 감소
- −콘텐츠 가독성 확보 어려움
적합한 사용처
사용 사례
- AI/테크 제품 랜딩
- 프리미엄 SaaS
- 크리에이티브 포트폴리오
- 음악·아트 플랫폼
이런 프로젝트에 추천
AI/테크 제품 랜딩프리미엄 SaaS크리에이티브 포트폴리오음악·아트 플랫폼
실제 사용 예시
OpenAI 웹사이트 배경Vercel 랜딩많은 AI 스타트업 사이트
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Aurora Backgrounds
오로라 현상에서 영감을 받은 몽환적인 배경
Flowing Colors
유동적으로 흐르는 색상
Aurora Cards
오로라 효과가 있는 카드
Northern Lights
부드럽게 흐르는 색상이 마법 같은 분위기를 만듭니다.
Dreamy Sky
몽환적인 그라데이션으로 신비로운 느낌을 전달합니다.
Glowing Aurora Buttons
발광하는 오로라 효과의 버튼
Aurora Typography
오로라 효과가 적용된 텍스트
AURORA
Mystical & Beautiful