표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Aurora Design
오로라 현상에서 영감을 받은 화려하고 몽환적인 그라데이션 스타일입니다.
- YEAR
- 2022
- MOOD
- 테크·미래적 · 화려한 · 다크
- PRIMARY#B794F6
- SECONDARY#A8EDEA
- ACCENT#FED6E3
- BG
- SURFACE
취급 표시
- 크게 둥근 모서리
- 가는 테두리
- 번지는 바탕
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 2단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 5단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 테크·미래적
- 화려한
- 다크
어디에 쓰나
실제로 쓰는 곳
- OpenAI 웹사이트 배경
- Vercel 랜딩
- 많은 AI 스타트업 사이트
사용 사례
- AI/테크 제품 랜딩
- 프리미엄 SaaS
- 크리에이티브 포트폴리오
- 음악·아트 플랫폼
이런 프로젝트에 맞습니다
- AI/테크 제품 랜딩
- 프리미엄 SaaS
- 크리에이티브 포트폴리오
- 음악·아트 플랫폼
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 유동성
- 신비로움
- 생동감
주요 특징
- 다채로운 그라데이션
- 블러 효과
- 유동적인 형태
- 발광 효과
- 몽환적 분위기
장점과 한계
장점
- 미래지향적이고 프리미엄한 느낌
- CSS 단순 조합으로 구현 가능
- 어두운 배경에서 특히 효과적
한계
- 남발 시 비슷비슷한 AI 스타트업 사이트처럼 보임
- 밝은 배경에서는 효과 감소
- 콘텐츠 가독성 확보 어려움
컬러 시스템
오로라처럼 흐르는 다색 그라데이션. 보라·청록·핑크 계열의 유동적 팔레트
색의 역할
- 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 약간 넓게 — 신비로운 느낌 강화
설계 제약
반드시 포함
- mesh gradient 또는 blur blob 배경
- 반투명 glass 요소 (aurora와 glassmorphism 자연 결합)
- glow 효과 (box-shadow: 0 0 20px color)
하지 말 것
- flat 단색 배경 사용 금지
- 어두운 배경 없이 그라데이션만 사용 금지
- hard edge 요소 사용 금지 — 모든 것이 blur되고 흐릿하게
모션 — 그라데이션 색상이 천천히 흐르는 animated gradient. 3~8초 주기. ease-in-out 또는 linear infinite.
자주 묻는 질문
Aurora Design이란 무엇인가요?
오로라 현상에서 영감을 받은 화려하고 몽환적인 그라데이션 스타일입니다.
Aurora Design의 핵심 디자인 원칙은 무엇인가요?
Aurora Design의 핵심 원칙은 유동성, 신비로움, 생동감입니다.
Aurora Design은 어떤 프로젝트에 적합한가요?
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 스타트업 사이트 등이 있습니다.