--- version: alpha name: Aurora Console description: Observability at three in the morning. Near-black indigo, two neons that only ever appear as light, and numbers that glow. meta: id: "theme-aurora-console" model: "Claude Opus 5" author: "Claude Code" createdAt: "2026-09-01T19:34:32+09:00" updatedAt: "2026-09-01T19:34:32+09:00" version: "1.0.0" isNew: false lookbook: tagline: Telemetry that looks like the aurora, not like a spreadsheet bestFor: Observability, infrastructure consoles, developer tools, real-time monitoring, AI/agent dashboards avoidFor: Children's products, print-like editorial, anything read in direct sunlight defaultMode: dark surfaceStyle: elevated accentUse: fill caseStyle: labels-upper borderWidth: 1px imageTreatment: cool motion: intensity: 5 duration: 180ms ease: "cubic-bezier(0.2, 0.9, 0.3, 1)" signature: "Values count up and glows bloom outward. Nothing slides." displayFont: Space Grotesk displayKind: sans bodyFont: Inter monoFont: JetBrains Mono colors: background: "#F6F6FC" foreground: "#2A2A37" card: "#ECECF5" card-foreground: "#2A2A37" popover: "#ECECF5" popover-foreground: "#2A2A37" primary: "#6B3FE2" primary-foreground: "#F9F9FF" secondary: "#E2E2EE" secondary-foreground: "#2A2A37" muted: "#E2E2EE" muted-foreground: "#626275" accent: "#008085" accent-foreground: "#F9F9FF" destructive: "#B6322D" destructive-foreground: "#F9F9FF" border: "#CECFD9" input: "#CECFD9" ring: "#6B3FE2" chart-1: "#6C4BDA" chart-2: "#C32684" chart-3: "#935100" chart-4: "#518E00" chart-5: "#00687B" colorsDark: background: "#0F0E1D" foreground: "#D8D8E6" card: "#191826" card-foreground: "#D8D8E6" popover: "#191826" popover-foreground: "#D8D8E6" primary: "#A497FF" primary-foreground: "#0C0B1A" secondary: "#232235" secondary-foreground: "#D8D8E6" muted: "#232235" muted-foreground: "#8A8B9C" accent: "#28D6DF" accent-foreground: "#0C0B1A" destructive: "#FF786D" destructive-foreground: "#0C0B1A" border: "#303042" input: "#303042" ring: "#A497FF" chart-1: "#A395FF" chart-2: "#E86AAC" chart-3: "#FC911A" chart-4: "#68A927" chart-5: "#00CBEE" typography: display-lg: fontFamily: Space Grotesk fontSize: 40px fontWeight: 600 lineHeight: 1.02 letterSpacing: -0.02em headline-lg: fontFamily: Space Grotesk fontSize: 26px fontWeight: 600 lineHeight: 1.12 letterSpacing: -0.02em headline-md: fontFamily: Space Grotesk fontSize: 18px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.01em body-lg: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.62 body-md: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.58 body-sm: fontFamily: Inter fontSize: 12.5px fontWeight: 400 lineHeight: 1.5 label-caps: fontFamily: Inter fontSize: 10.5px fontWeight: 600 lineHeight: 1 letterSpacing: 0.12em label-mono: fontFamily: JetBrains Mono fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em numeral-xl: fontFamily: JetBrains Mono fontSize: 30px fontWeight: 700 lineHeight: 1 letterSpacing: -0.03em rounded: none: 0px sm: 4px md: 8px lg: 12px xl: 18px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 16px lg: 24px xl: 44px gutter: 20px margin: 28px measure: 74ch components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.md}" padding: 11px button-secondary: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.md}" padding: 11px card-article: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.lg}" padding: 18px badge-label: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label-caps}" rounded: "{rounded.sm}" --- # Aurora Console ## Overview Aurora Console is what a monitoring surface looks like when someone cares about it. The page is a deep indigo-black that is never quite neutral, panels lift off it with a soft ambient shadow, and the only saturated colour in the system is emitted rather than printed: violet and cyan behave like light sources, so they appear in glows, gradients, sparklines and focus rings, and almost never as large flat fills. Use it when the product is a live system and the user is watching it. Density is a feature — this theme expects twenty numbers on a screen and gives each one a mono face and a tabular width so the columns hold still while they update. Personality: alert, technical, faintly beautiful. Never corporate blue. ## Colors An achromatic near-black ground with two emitted colours. - **Primary (#A497FF in dark, #6B3FE2 in light):** Aurora violet. Primary actions, the active nav item, the series a chart is actually about. - **Accent (#28D6DF):** Signal cyan. Reserved for *live* — streaming values, connected states, the second chart series. If it is cyan it is moving. - **Ground (#0F0E1D):** Indigo-black. Not grey. The blue bias is what stops the neons looking like they were pasted on. - **Cards (#191826):** One step up from the ground, plus a low-alpha shadow. This is the only lookbook theme where the shadow is doing real work in dark mode. - Charts run polychrome — five separated hues — because the series on this screen are unrelated systems, not steps of one quantity. Light mode is the same instrument in daylight: the ground becomes a cool near-white, the violet darkens to hold contrast on it, and the glows become thin rings instead of blooms. ## Typography Space Grotesk for anything structural, Inter for prose, JetBrains Mono for every number without exception. - **Display / headlines:** Space Grotesk, tight, and deliberately small — a page title here is 40px, not 72px. The screen's job is the data. - **Body:** Inter at 14-16px. Copy is short: a panel description is one line. - **Labels:** uppercase Inter at 10.5px with 0.12em tracking, in muted-foreground. Every panel has one. - **Numerals:** JetBrains Mono with tabular figures, always. A value that changes must not change width, or the whole dashboard twitches. ## Layout A 12-column grid at 1440px with 20px gutters, but panels are placed on a *dashboard* rhythm rather than a document one: a full-width strip of key values at the top, then a 2:1 split of chart to list, then a full-width table. Vertical rhythm is 4px. Panels are allowed to be different heights in the same row; they are not allowed to be different widths than the grid allows. ## Elevation & Depth Panels sit on the page with a soft, wide, very low-alpha shadow and a hairline border on top of it. The shadow is what separates a panel from the ground; the border is what keeps its edge crisp at small sizes. Modals go one step further with a backdrop blur. Nothing else in the system ever lifts. ## Shapes Moderately soft: 12px on panels, 8px on buttons and inputs, 4px on badges, pills only for status chips. Sparkline strokes are round-capped. Images are clipped to the panel radius and carry a cool grade so photography never fights the violet. ## Components - **Buttons:** solid violet fill with near-black text, 8px radius, 11px padding. Hover raises the fill lightness rather than adding a shadow. - **Panels:** card background, hairline border, soft shadow, 18px padding, an uppercase label at the top-left and a mono value at the top-right. - **Stat tiles:** the numeral is 30px mono; the label is above it, not below. - **Tables:** hairline row rules, mono right-aligned numerics, sticky header with the panel background so it does not become transparent while scrolling. - **Status chips:** pill, filled with a 12% tint of the status colour, text at full strength. ## Do's and Don'ts - Do treat violet and cyan as light: glows, rings, thin strokes, gradients. - Do use tabular mono figures for every number that can change. - Do keep panel titles to two or three words. - Don't fill a large area with the primary — a violet hero here looks broken. - Don't use pure black or pure white; the ground has a blue bias and the ink is soft. - Don't put more than five chart series on one axis, even though five hues exist. - Don't animate position. Values fade and count; panels stay where they are.