# Aurora UI > Slow, blurred ribbons of green, teal and violet light drift behind a calm night-sky UI — the background is the brand. - Nickname: Northern lights - Also called: Aurora gradient, Aurora background - Category: Futuristic & Tech - Moods: Dreamy, Calm, Techy - Industries: AI Products, SaaS, Startup & Tech, Web3 & Crypto, Media & Entertainment - Style page: https://uilingo.dev/styles/aurora-ui/ Aurora UI paints the page background with soft, heavily blurred colour ribbons that look like the northern lights: long diagonal bands of mint green, cyan, violet and a touch of pink fading into a deep navy sky. Everything on top stays quiet and clean — near-opaque dark panels, thin borders, light geometric type — so the colour feels like ambient light, not decoration. The ribbons spill into the UI only as gradient headline text, soft glows on primary actions and glowing chart lines. ## Best for - AI product and model launch pages - Developer tools and API landing pages - Waitlists and hero-led marketing sites - Music, meditation and ambient apps ## Avoid for - Dense data tools where the background distracts - Brands that need warm, earthy or traditional feeling - Print-like editorial reading pages ## Do - Keep ribbons behind content at 40–70% opacity with 46–56px blur (28–34px on mobile) - Use 3–4 hues that sit next to each other (green → cyan → violet) - Keep panels 70–85% opaque so text never sits directly on the light - Animate ribbons over 32–40s with transform only ## Don't - Don’t use round “blob” spots — aurora light is long, diagonal and streaky - Don’t frost every card with heavy blur (that is glassmorphism) - Don’t add hard borders, grids or noise on top of the sky - Don’t animate faster than ~30s per loop ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Aurora UI" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Slow, blurred ribbons of green, teal and violet light drift behind a calm night-sky UI — the background is the brand. Design keywords: northern lights background, blurred colour ribbons, mint to violet gradient, night-sky navy, gradient headline text, soft glow buttons, slow drifting light, calm panels on top. ## Visual language A calm night-sky interface lit by the northern lights. The page background is deep navy (#050916) with long, diagonal, heavily blurred ribbons of mint green, cyan and violet (plus a hint of pink) that drift slowly like aurora curtains, with a faint starfield. Everything on top is quiet and clean: mostly opaque dark-navy panels, thin translucent borders, light geometric type and pill buttons. The aurora colours leak into the UI only as gradient headline text, soft glows on the primary action and glowing chart lines — ambient light, never decoration for its own sake. ## Signature details (must be visible) - Fixed background layer: 2 pseudo-elements filled with elongated radial ellipses (e.g. radial-gradient(40% 9% at 26% 44%, rgba(92,242,181,.85), transparent 72%)), blur 46px / 56px on web (28px / 34px on mobile), rotated −11° / +7°, drifting 32s / 40s ease-in-out alternate with transform only - Soft vertical 'curtain' banding on the first ribbon layer only, exactly: mask-image: repeating-linear-gradient(90deg, #000 0, rgba(0,0,0,.62) 22px, #000 48px, rgba(0,0,0,.8) 70px, #000 96px) — two uneven dips per 96px, subtle, never hard stripes - Starfield: 6–8 tiny 1–1.5px white radial dots (35–70% alpha) tiled at 520×420px over linear-gradient(180deg, #040814, #060C22 50%, #0A1330) - Type scale: hero .ui-display = weight 300 with the key phrase in 600 and tracking -0.045em; section h1/h2 = 600; KPI values = 300 at 2.2rem; body 16px Latin / 17px Thai - Gradient headline: hero .ui-display and article title filled with linear-gradient(100deg, text #EEF3FF 8%, --aurora-mint-hi #B8FFE2 34%, primary #5CF2B5 50%, chart-2 #62C9FF 68%, secondary #A493FF 92%) via background-clip:text - Panels: rgba(11,17,38,.78) surface, 1px rgba(168,190,255,.16) border, 20px radius, inset 0 1px 0 rgba(255,255,255,.06) top light, light 10px blur only - 'Aurora edge': 1px gradient border (padding-box/border-box, 120deg stops primary #5CF2B5 → chart-2 #62C9FF 40% → secondary #A493FF 75% → accent #FF86CF). Use it on: landing = CTA block and showcase/highlight panel; pricing = featured plan; mobile = featured card — at least twice per landing page even without pricing - Glow, not shadow: primary button 0 8px 30px rgba(92,242,181,.35); chart line drop-shadow(0 0 6px rgba(92,242,181,.75)); status dots 0 0 10px of their colour ## Design tokens — use these exact values Colours (dark mode): - background #050916 - surface rgba(11,17,38,0.78) - surface-2 rgba(14,22,48,0.55) - text #EEF3FF - text-muted #A7B3D6 - primary #5CF2B5 (text on it #03140F) - secondary #A493FF (text on it #0B0824) - accent #FF86CF - border rgba(168,190,255,0.16) - success #4BE3A0 · warning #FFC266 · danger #FF6B8B - chart series #5CF2B5, #62C9FF, #A493FF, #FF86CF, #FFC266 Radius: sm 10px, md 14px, lg 20px, xl 28px, pill 999px Border width: 1px Shadows: sm `0 2px 10px rgba(2,6,20,0.25)`, md `0 14px 40px rgba(2,6,20,0.35)`, lg `0 30px 80px rgba(2,6,20,0.45)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 420ms cubic-bezier(.16,1,.3,1) ## Typography (Latin + Thai) - Headings: Sora 300/600 with Thai fallback K2D 300/600 - Body: Manrope 400/500/600 with Thai fallback K2D 300/400/500/600 - Mono: JetBrains Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Sora:wght@300;600&family=Manrope:wght@400;500;600&family=JetBrains+Mono:wght@400&family=K2D:wght@300;400;500;600&display=swap - CSS stacks: heading `"Sora", "K2D", system-ui, sans-serif`; body `"Manrope", "K2D", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "K2D", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to K2D — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.9rem, 6.6vw, 5.4rem), heading weight 600, heading tracking -0.035em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: K2D is a loopless geometric Thai with the same wide, round-cornered techno stance as Sora and Manrope, so mixed lines keep one calm rhythm. ## Components - Decorative colour extras (allowed beyond the tokens, only as gradient stops and glows): --aurora-mint-hi #B8FFE2 (headline gradient highlight), --aurora-cyan-btn #62E0E6 (primary button gradient end); ribbon/edge stops always run primary → chart-2 → secondary → accent. Every other colour comes from the tokens. - Primary button: pill, linear-gradient(100deg, primary #5CF2B5, --aurora-cyan-btn #62E0E6) with onPrimary #03140F text, 0 0 0 1px rgba(92,242,181,.4) + 0 8px 30px rgba(92,242,181,.35) glow; hover = 0 10px 44px glow at .55 + translateY(-1px) - Secondary button: pill, rgba(255,255,255,.04) fill, 1px rgba(168,190,255,.28) border, white text; hover lifts border to .5 - Eyebrow: pill tag with rgba(92,242,181,.08) fill, mint border at 28%, a 7px glowing mint dot before the text - Cards: calm opaque navy panels; hover = 4px lift + faint mint ring and 60px mint glow; icons sit in 44px round radial-gradient badges (mint, cyan, violet rotating per card); the 6 feature cards sit in a 3 × 2 grid at ≥960px - Inputs: rgba(6,10,26,.6) fill, 14px radius; focus = mint border + 4px rgba(92,242,181,.12) ring + soft glow - Chips/segmented/tab: active state is a mint tint (rgba(92,242,181,.14)) with mint text and a 1px mint inset ring - Switch/progress: mint→cyan(→violet) gradient fills with a 12–14px glow - Charts: glowing mint primary line, violet secondary, solid faint gridlines, round-capped donut segments (donut ~170px, centred in its tile), heatmap cells mixing mint into navy with intensity-based glow - Mono labels: font-family "JetBrains Mono", "K2D", monospace. Any Thai status or label text switches to the body font (K2D) with 0 letter-spacing. Scope the -0.035em heading tracking to Latin with :lang(en) (Thai headings keep tracking 0) - Navigation: transparent bar over the sky with a top-to-bottom navy fade; the logo is a conic aurora gradient circle ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: minimal style. Sections in order: hero → logos → features → showcase → steps → testimonials → faq → cta. Feature section as grid. Lead with an immersive centred hero (min-height ~min(88vh, 820px)) where the aurora is at full strength and the headline glows. Below it the sky continues but sections sit on calm panels: a quiet logo row, a 3-column card grid, a product showcase, numbered steps with glowing ring numerals, testimonials, FAQ and an aurora-edged CTA. On data pages (dashboard, form, article) push the ribbons to the top 40% and dim them to ~55% so charts and text stay readable; a top-nav dashboard with forecast, live status, donut and heatmap fits the style best. ## Content Use realistic product copy (fictional brand) suited to: AI product and model launch pages. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Keep ribbons behind content at 40–70% opacity with 46–56px blur (28–34px on mobile) - Use 3–4 hues that sit next to each other (green → cyan → violet) - Keep panels 70–85% opaque so text never sits directly on the light - Animate ribbons over 32–40s with transform only ## Don't - Don’t use round “blob” spots — aurora light is long, diagonal and streaky - Don’t frost every card with heavy blur (that is glassmorphism) - Don’t add hard borders, grids or noise on top of the sky - Don’t animate faster than ~30s per loop - Round, blob-shaped colour spots — aurora light is long, diagonal and streaky - Heavy frosted see-through panels everywhere (that reads as Glassmorphism) - Grain, noise or hard grids on top of the sky (that pushes toward Gradient Mesh or HUD) - Fast or bouncy motion — ribbons drift over 32–40s - Strong, regular stripes from the curtain mask — keep the dips at 62–80% alpha - Body text placed directly on the brightest part of a ribbon ## Stack notes One self-contained HTML file with a