Inspiration first, drift never.

Aurora Grid

Modular tiles with luminous dividers and high-clarity SaaS rhythm.

Vanilla HTMLTailwindShadcn UIAiry densitystable

ID: aurora-grid

Version: v0.1.1

Updated: 2026-01-02

Get JSON

Constraints

density:airystacks:html,tailwind,shadcntags:saas,dashboard,modern

Token summary

6 palette tokens · 6 spacing steps · airy density

Stability cue

stable contract · enforce tokens & guardrails

Token boundaries (hard limits)

Density in {airy}Palette tokens = 6Accent usage <= 1 primary per section

Pair with a structure

Choose the execution surface.

Structures define the required slots. Pair this visual language with a structure when calling `POST /api/emit` to get deterministic output targets.

Structure

Dashboard

App shell with sidebar navigation, filter toolbar, alert banner, stats tiers, data tables, charts, and right-rail insights.

Structure

SaaS

Marketing page with hero, trust strip, metrics, feature grid, integrations, pricing, case study, FAQ, and CTA.

Structure

Editorial

Publication layout with masthead, nav, featured story, highlights, trending, resources, archive, and newsletter signup.

Structure

Portfolio

Personal or studio portfolio with hero, work gallery, services, testimonials, and contact call-to-action.

Structure

Support

Helpdesk workspace with ticket inbox, ticket detail, customer context, and response tools.

Token sandbox

Component Preview

See how buttons, cards, and forms look with this language's tokens applied.

Component Previewelectricairy density
signature2b748eeb

Buttons

Tokens applied

Card

electricActive

Dashboard Overview

A sample card showing typography, badges, and layout rhythm.

Form Elements

Badges

AccentHighlightOutline

Alert

Quiet Lattice Notice

New

Tokens applied to emphasize clear, low-noise messaging.

Input Group

Palette

#F8F5EE
#101723
#2D9CDB
#FF6B35
#E0F2FE
#FCE7D6

Guardrail cues

  • Density: airy
  • Buttons: primary · secondary · ghost · highlight
  • Layout: button row, card, form fields

Language brief

Intent

Aurora Grid is a bright, tile-based system built for AI dashboards and SaaS platforms. It balances sharp geometry with soft light gradients so agents can compose surfaces that feel futuristic without being cold.

Tokens

  • Background: #F8F5EE
  • Ink: #101723
  • Accent: #2D9CDB
  • Highlight: #FF6B35
  • Glow: #E0F2FE
  • Warmth: #FCE7D6
  • Radius: 20px
  • Shadow: 0 18px 40px rgba(16, 23, 35, 0.15)

Layout cues

  • Use a 12-column grid with 24px gutters.
  • Cards float with soft glow overlays (8% opacity).
  • Buttons are pill-shaped, 40px height, heavy label tracking.

Tailwind sample

<div className="rounded-3xl border border-slate-200 bg-white/80 p-6 shadow-[0_18px_40px_rgba(16,23,35,0.15)]">
  <div className="flex items-center justify-between">
    <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Aurora</p>
    <span className="rounded-full bg-slate-900 px-3 py-1 text-xs text-white">Live</span>
  </div>
  <h3 className="mt-4 text-2xl font-semibold text-slate-900">Agent grid summary</h3>
  <p className="mt-2 text-sm text-slate-600">
    Modular tile layout with bright delimiters and ample breathing room.
  </p>
</div>

Aurora

Live

Agent grid summary

Modular tile layout with bright delimiters and ample breathing room.

AccentDensity: airy

Vanilla HTML sample

<section class="card">
  <header class="card__header">
    <span class="eyebrow">Aurora</span>
    <span class="badge">Live</span>
  </header>
  <h3>Agent grid summary</h3>
  <p>Modular tile layout with bright delimiters and ample breathing room.</p>
</section>
Aurora Live

Agent grid summary

Modular tile layout with bright delimiters and ample breathing room.