{"visualLanguage":{"id":"aurora-grid","name":"Aurora Grid","version":"v0.1.1","stability":"stable","summary":"Modular tiles with luminous dividers and high-clarity SaaS rhythm.","mood":"electric","density":"airy","tags":["saas","dashboard","modern","luminous","data-rich"],"stacks":["html","tailwind","shadcn"],"palette":["#F8F5EE","#101723","#2D9CDB","#FF6B35","#E0F2FE","#FCE7D6"],"constraints":["density:airy","stacks:html,tailwind,shadcn","tags:saas,dashboard,modern"],"tokenSummary":"6 palette tokens · 6 spacing steps · airy density","allowedTargets":["shadcn","tailwind","html","json","mui"],"versionHash":"b86bb4b484af1772032e638f165ab7554c7402f97786a9bdd35015f1242f0489","updatedAt":"2026-01-02","tokenSet":{"palette":{"paper":"#F8F5EE","ink":"#101723","accent":"#2D9CDB","highlight":"#FF6B35"},"colorRoles":{"light":{"background":"#F8F5EE","surface":"#F8F5EE","surfaceAlt":"#FF6B35","surfaceRaised":"#FF6B35","overlay":"#FF6B35","border":"#FF6B35","borderSubtle":"#FF6B35","borderStrong":"#101723","text":"#101723","textMuted":"#FF6B35","textDisabled":"#FF6B35","link":"#2D9CDB","accent":"#2D9CDB","accentText":"#F8F5EE"},"dark":{"background":"#101723","surface":"#101723","surfaceAlt":"#FF6B35","surfaceRaised":"#FF6B35","overlay":"#FF6B35","border":"#FF6B35","borderSubtle":"#FF6B35","borderStrong":"#F8F5EE","text":"#F8F5EE","textMuted":"#FF6B35","textDisabled":"#FF6B35","link":"#2D9CDB","accent":"#2D9CDB","accentText":"#101723"}},"colorMode":"light","colorStates":{"light":{"surface":{"hover":"#FF6B35","active":"#2D9CDB","disabled":"#F8F5EE"},"border":{"default":"#FF6B35","focus":"#2D9CDB","disabled":"#FF6B35"},"text":{"default":"#101723","muted":"#FF6B35","disabled":"#FF6B35"},"accent":{"hover":"#2D9CDB","active":"#2D9CDB"}},"dark":{"surface":{"hover":"#FF6B35","active":"#2D9CDB","disabled":"#101723"},"border":{"default":"#FF6B35","focus":"#2D9CDB","disabled":"#FF6B35"},"text":{"default":"#F8F5EE","muted":"#FF6B35","disabled":"#FF6B35"},"accent":{"hover":"#2D9CDB","active":"#2D9CDB"}}},"colorRamps":{"neutral":["#F8F5EE","#F8F5EE","#FF6B35","#FF6B35","#FF6B35","#FF6B35","#FF6B35","#101723","#101723","#101723"],"accent":["#2D9CDB","#2D9CDB","#2D9CDB","#2D9CDB","#2D9CDB","#2D9CDB","#2D9CDB","#2D9CDB","#2D9CDB","#2D9CDB"]},"semantic":{"success":"#16a34a","warning":"#f59e0b","info":"#2D9CDB","danger":"#dc2626","muted":"#FF6B35"},"typography":{"display":{"family":"Fraunces, 'Space Grotesk', system-ui, sans-serif","weight":600,"lineHeight":1.2,"letterSpacing":"0em","casing":"title"},"body":{"family":"Space Grotesk, system-ui, sans-serif","weight":400,"lineHeight":1.5,"letterSpacing":"0em","casing":"sentence"},"mono":{"family":"IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace","weight":500,"lineHeight":1.4,"letterSpacing":"0em"},"scale":{"xs":12,"sm":14,"md":16,"lg":18,"xl":20,"2xl":24,"3xl":30,"4xl":36,"5xl":48,"6xl":60}},"space":{"xs":4,"sm":8,"md":12,"lg":16,"xl":24,"2xl":32},"radius":{"sm":12,"md":16,"lg":20,"xl":28},"shadow":{"soft":"0 18px 40px rgba(16, 23, 35, 0.15)","hard":"0 0 0 1px rgba(16, 23, 35, 0.12)"},"border":{"width":{"thin":1,"thick":2},"style":"solid"},"motion":{"fast":"150ms","base":"200ms","slow":"300ms","easing":"cubic-bezier(0.4, 0, 0.2, 1)"},"opacity":{"muted":0.7,"disabled":0.4,"overlay":0.55},"z":{"base":1,"overlay":10,"modal":30,"toast":40},"interaction":{"focusRing":{"color":"#2D9CDB","width":2,"offset":3,"style":"solid"},"states":{"hoverOpacity":0.94,"activeOpacity":0.88,"disabledOpacity":0.5,"selectedOpacity":0.92,"pressedScale":0.99},"outlines":{"width":1,"color":"#FF6B35"},"keyboard":{"indicator":"focus-ring","behavior":"show-on-focus"},"motionSafety":"respect-reduced-motion"},"content":{"voice":"friendly","casing":{"headings":"title","body":"sentence"},"numerals":{"format":"localized","decimalPlaces":2},"dates":{"format":"yyyy-MM-dd"},"ellipsis":{"maxLines":2,"strategy":"ellipsis"},"placeholders":"Use concise, action-oriented placeholders."},"accessibility":{"contrast":{"text":4.5,"ui":3},"tapTarget":44,"focusOrder":"natural","aria":{"nav":"role=navigation, aria-label required","forms":"associate labels, describe errors, aria-live for status","tables":"use scope on headers, describe sortable state"},"motionReduction":"respect"},"dataViz":{"palette":{"categorical":["#2D9CDB","#FF6B35","#10b981","#8b5cf6"],"sequential":["#e0f2fe","#93c5fd","#3b82f6","#1d4ed8"],"diverging":["#dc2626","#fbbf24","#22c55e","#0ea5e9"]},"grid":{"color":"rgba(0,0,0,0.08)","width":1},"axis":{"color":"#101723","width":1,"labelCase":"title"},"stroke":{"width":2,"radius":6},"tooltip":{"background":"#F8F5EE","text":"#101723","shadow":"0 12px 30px rgba(0,0,0,0.12)"}},"i18n":{"rtl":false,"numeralSystem":"latn","dateFormat":"yyyy-MM-dd","typographyFallbacks":["Inter","system-ui","sans-serif"]},"compliance":{"status":"brand-critical","usage":{"do":["Respect density and palette constraints","Keep accent usage minimal"],"dont":["Override guardrails","Add new accent colors"]},"allowedStacks":["html","tailwind","shadcn"]},"layout":{"grid":{"columns":12,"gutter":24,"maxWidth":1280},"breakpoints":{"sm":640,"md":768,"lg":1024,"xl":1280},"container":{"padding":{"mobile":20,"desktop":28},"maxWidth":1200},"section":{"verticalSpacing":32},"media":{"aspectRatios":["16:9","4:3","1:1"]}},"componentSpecs":{"button":{"variants":["primary","secondary","ghost"],"states":["default","hover","active","focus","disabled"],"requiredTokens":["colorRoles.light.accent","colorRoles.dark.accent","colorRoles.light.accentText","colorRoles.dark.accentText","typography.scale.md","radius.lg"],"sizeTokens":{"height":"space.2xl","paddingX":"space.lg","paddingY":"space.sm","radius":"radius.lg"},"typographyTokens":{"size":"typography.scale.md","weight":"typography.display.weight","lineHeight":"typography.display.lineHeight","letterSpacing":"typography.display.letterSpacing","family":"typography.display.family"},"anatomy":["root","label"],"a11yTokens":["focus-visible"]},"input":{"variants":["default","filled"],"states":["default","focus","disabled","error"],"requiredTokens":["colorRoles.light.surface","colorRoles.dark.surface","colorRoles.light.border","colorRoles.dark.border","typography.scale.sm","radius.md"],"sizeTokens":{"height":"space.2xl","paddingX":"space.md","paddingY":"space.sm","radius":"radius.md"},"typographyTokens":{"size":"typography.scale.sm","weight":"typography.body.weight","lineHeight":"typography.body.lineHeight","letterSpacing":"typography.body.letterSpacing","family":"typography.body.family"},"anatomy":["label","control","helper"],"a11yTokens":["label-associated","described-by"]}},"componentGuardrails":{"hero":{"required":["headline","supporting copy","primary action"],"allowedPatterns":["image-right","image-left","split"],"maxAccents":1,"maxActions":2,"notes":["Keep eyebrow short","One accent block per hero"]},"nav":{"required":["brand","primary links"],"allowedPatterns":["topbar","sidebar"],"maxAccents":0,"maxActions":1,"notes":["Use focus ring on nav links","Keep link labels <= 2 words"]},"table":{"required":["header","rows","hover/focus states"],"allowedPatterns":["sortable columns"],"maxAccents":0,"maxActions":2,"notes":["Use zebra or divider rows","Include empty-state copy"]},"card":{"required":["title","body"],"allowedPatterns":["media-top","media-left"],"maxAccents":1,"maxActions":2,"notes":["Respect radius scale","Avoid more than 2 badges"]},"form":{"required":["label","helper text","error state"],"allowedPatterns":["stacked","inline"],"maxAccents":0,"maxActions":1,"notes":["Inputs full-width on mobile","Use consistent spacing scale"]},"chart":{"required":["axes labels","legend","tooltip"],"allowedPatterns":["line","bar"],"maxAccents":1,"maxActions":0,"notes":["Use dataViz palette","Keep gridlines subtle"]}},"density":"airy","mood":"electric","stacks":["html","tailwind","shadcn"],"tags":["saas","dashboard","modern","luminous","data-rich"],"guardrails":["Density in {airy}","Palette tokens = 6","Accent usage <= 1 primary per section"]},"content":"## Intent\nAurora Grid is a bright, tile-based system built for AI dashboards and SaaS\nplatforms. It balances sharp geometry with soft light gradients so agents can\ncompose surfaces that feel futuristic without being cold.\n\n## Tokens\n- Background: `#F8F5EE`\n- Ink: `#101723`\n- Accent: `#2D9CDB`\n- Highlight: `#FF6B35`\n- Glow: `#E0F2FE`\n- Warmth: `#FCE7D6`\n- Radius: `20px`\n- Shadow: `0 18px 40px rgba(16, 23, 35, 0.15)`\n\n## Layout cues\n- Use a 12-column grid with 24px gutters.\n- Cards float with soft glow overlays (8% opacity).\n- Buttons are pill-shaped, 40px height, heavy label tracking.\n\n## Tailwind sample\n```tsx\n<div className=\"rounded-3xl border border-slate-200 bg-white/80 p-6 shadow-[0_18px_40px_rgba(16,23,35,0.15)]\">\n  <div className=\"flex items-center justify-between\">\n    <p className=\"text-xs uppercase tracking-[0.3em] text-slate-500\">Aurora</p>\n    <span className=\"rounded-full bg-slate-900 px-3 py-1 text-xs text-white\">Live</span>\n  </div>\n  <h3 className=\"mt-4 text-2xl font-semibold text-slate-900\">Agent grid summary</h3>\n  <p className=\"mt-2 text-sm text-slate-600\">\n    Modular tile layout with bright delimiters and ample breathing room.\n  </p>\n</div>\n```\n\n## Vanilla HTML sample\n```html\n<section class=\"card\">\n  <header class=\"card__header\">\n    <span class=\"eyebrow\">Aurora</span>\n    <span class=\"badge\">Live</span>\n  </header>\n  <h3>Agent grid summary</h3>\n  <p>Modular tile layout with bright delimiters and ample breathing room.</p>\n</section>\n```"},"links":{"page":"/visual-languages/aurora-grid","api":"/api/visual-languages/aurora-grid","versions":"/api/visual-languages/aurora-grid/versions","diff":"/api/visual-languages/aurora-grid/diff?from=v0.1.1&to=v0.1.1"},"generatedAt":"2026-04-17T13:23:09.286Z"}