Back to design systems
Aura---Smart-AI-Assistant-DESIGN (1).md

Aura - Smart AI Assistant

Aura Smart Login Section is designed for authenticating users through a focused access flow. Key features include reusable structure, responsive behavior, and production-ready presentation. It is suitable for authentication screens in web products.

HTML Preview

Aura---Smart-AI-Assistant (1).html

DESIGN.md

Prompt context source

FrontmatterValue
version"alpha"
name"Aura - Smart AI Assistant"
description"Aura Smart Login Section is designed for authenticating users through a focused access flow. Key features include reusable structure, responsive behavior, and production-ready presentation. It is suitable for authentication screens in web products."
colorstoken group
primary"#9CA3AF"
secondary"#3A281E"
tertiary"#6B7280"
neutral"#FFFFFF"
background"#FFFFFF"
surface"#9CA3AF"
text-primary"#3A281E"
text-secondary"#6B7280"
border"#FFFFFF"
accent"#9CA3AF"
typographytoken group
display-lgtoken group
body-mdtoken group
label-mdtoken group
roundedtoken group
md"0px"
full"9999px"
spacingtoken group
base"6px"
sm"1px"
md"2px"
lg"6px"
xl"8px"
gap"4px"
card-padding"8px"
section-padding"24px"
componentstoken group
button-primarytoken group
button-linktoken group
cardtoken group

Overview

  • Composition cues:
    • Layout: Grid
    • Content Width: Full Bleed
    • Framing: Glassy
    • Grid: Strong

Colors

The color system uses dark mode with #9CA3AF as the main accent and #FFFFFF as the neutral foundation.
  • Primary (#9CA3AF): Main accent and emphasis color.
  • Secondary (#3A281E): Supporting accent for secondary emphasis.
  • Tertiary (#6B7280): Reserved accent for supporting contrast moments.
  • Neutral (#FFFFFF): Neutral foundation for backgrounds, surfaces, and supporting chrome.
  • Usage: Background: #FFFFFF; Surface: #9CA3AF; Text Primary: #3A281E; Text Secondary: #6B7280; Border: #FFFFFF; Accent: #9CA3AF
  • Gradients: bg-gradient-to-b from-[#2a2524] to-brand-dark, bg-gradient-to-b from-white to-[#f9f8f8], bg-gradient-to-r from-[#f97316] to-[#fb923c], bg-gradient-to-b from-[#f97316] to-[#ea580c]

Typography

Typography relies on Geist across display, body, and utility text.
  • Display (display-lg): Geist, 88px, weight 300, line-height 88px, letter-spacing -0.05em.
  • Body (body-md): Geist, 14px, weight 300, line-height 20px.
  • Labels (label-md): Geist, 14px, weight 400, line-height 20px.

Layout

Layout follows a grid composition with reusable spacing tokens. Preserve the grid, full bleed structural frame before changing ornament or component styling. Use 6px as the base rhythm and let larger gaps step up from that cadence instead of introducing unrelated spacing values.
Treat the page as a grid / full bleed composition, and keep that framing stable when adding or remixing sections.
  • Layout type: Grid
  • Content width: Full Bleed
  • Base unit: 6px
  • Scale: 1px, 2px, 6px, 8px, 10px, 12px, 14px, 16px
  • Section padding: 24px, 64px, 192px
  • Card padding: 8px, 13px, 14px, 16px
  • Gaps: 4px, 8px, 12px, 16px

Elevation & Depth

Depth is communicated through glass, border contrast, and reusable shadow or blur treatments. Keep those recipes consistent across hero panels, cards, and controls so the page reads as one material system.
Surfaces should read as glass first, with borders, shadows, and blur only reinforcing that material choice.
  • Surface style: Glass
  • Borders: 1px #FFFFFF; 1px #000000; 1px #F3F4F6; 1px #E5E7EB
  • Shadows: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 3px -1px, rgba(25, 28, 33, 0.02) 0px 1px 0px 0px, rgba(25, 28, 33, 0.08) 0px 0px 0px 1px; rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 2px 3px -1px, rgba(25, 28, 33, 0.02) 0px 1px 0px 0px, rgba(25, 28, 33, 0.08) 0px 0px 0px 1px; rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 3px -1px, rgba(25, 28, 33, 0.02) 0px 1px 0px 0px, rgba(25, 28, 33, 0.08) 0px 0px 0px 1px
  • Blur: 4px, 40px, 12px

Techniques

  • Gradient border shell: Use a thin gradient border shell around the main card. Wrap the surface in an outer shell with 1px padding and a 32px radius. Drive the shell with linear-gradient(to right bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)) so the edge reads like premium depth instead of a flat stroke. Keep the actual stroke understated so the gradient shell remains the hero edge treatment. Inset the real content surface inside the wrapper with a slightly smaller radius so the gradient only appears as a hairline frame.

Shapes

Shapes rely on a tight radius system anchored by 8px and scaled across cards, buttons, and supporting surfaces. Icon geometry should stay compatible with that soft-to-controlled silhouette.
Use the radius family intentionally: larger surfaces can open up, but controls and badges should stay within the same rounded DNA instead of inventing sharper or pill-only exceptions.
  • Corner radii: 8px, 12px, 24px, 9999px
  • Icon treatment: Linear
  • Icon sets: Solar

Components

Anchor interactions to the detected button styles. Reuse the existing card surface recipe for content blocks.

Buttons

  • Primary: text #FFFFFF, radius 9999px, padding 10px, border 0px solid rgb(229, 231, 235).
  • Links: text #6B7280, radius 0px, padding 0px, border 0px solid rgb(229, 231, 235).

Cards and Surfaces

  • Card surface: border 1px solid rgba(255, 255, 255, 0.8), radius 2px 16px 16px, padding 16px, shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 3px -1px, rgba(25, 28, 33, 0.02) 0px 1px 0px 0px, rgba(25, 28, 33, 0.08) 0px 0px 0px 1px.

Iconography

  • Treatment: Linear.
  • Sets: Solar.

Do's and Don'ts

Use these constraints to keep future generations aligned with the current system instead of drifting into adjacent styles.

Do

  • Do use the primary palette as the main accent for emphasis and action states.
  • Do keep spacing aligned to the detected 6px rhythm.
  • Do reuse the Glass surface treatment consistently across cards and controls.
  • Do keep corner radii within the detected 8px, 12px, 24px, 9999px family.

Don't

  • Don't introduce extra accent colors outside the core palette roles unless the page needs a new semantic state.
  • Don't mix unrelated shadow or blur recipes that break the current depth system.
  • Don't exceed the detected expressive motion intensity without a deliberate reason.

Motion

Motion feels expressive but remains focused on interface, text, and layout transitions. Timing clusters around 800ms and 150ms. Easing favors ease and 1). Hover behavior focuses on color and text changes.
Motion Level: expressive
Durations: 800ms, 150ms, 1000ms, 300ms, 10000ms, 500ms
Easings: ease, 1), cubic-bezier(0.4, 0, 0.2, cubic-bezier(0.16
Hover Patterns: color, text, shadow

WebGL

Reconstruct the graphics as a centered hero field using webgl, custom shaders. The effect should read as technical, meditative, and atmospheric: dot-matrix particle field with soft orange and sparse spacing. Build it from dot particles + soft depth fade so the effect reads clearly. Animate it as slow breathing pulse. Interaction can react to the pointer, but only as a subtle drift. Preserve reduced motion + dom fallback.
Id: webgl
Label: WebGL
Stack: WebGL
Insights:
  • Scene:
    • Value: Centered hero field
  • Effect:
    • Value: Dot-matrix particle field
  • Primitives:
    • Value: Dot particles + soft depth fade
  • Motion:
    • Value: Slow breathing pulse
  • Interaction:
    • Value: Pointer-reactive drift
  • Render:
    • Value: WebGL, custom shaders
Techniques: Dot matrix, Breathing pulse, Pointer parallax, Shader gradients, Noise fields
Code Evidence:
  • HTML reference:
    • Language: html
    • Snippet: 
      <!-- WebGL Background Canvas -->
<canvas id="hero-canvas" class="absolute inset-0 w-full h-full pointer-events-none opacity-80 mix-blend-multiply"></canvas>

<!-- CSS Diagonal Light Beams Overlay -->
  • JS reference:
    • Language: js
    • Snippet: 
      document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('hero-canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

    if (!gl) {
        console.warn('WebGL not supported');
        return;
    }
  • Renderer setup:
    • Language: js
    • Snippet: 
      document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('hero-canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

    if (!gl) {
        console.warn('WebGL not supported');
        return;