9.3 KiB
9.3 KiB
Design System: BellSystems Console Design
Project ID: 18406618574074411899
1. Visual Theme & Atmosphere
"The Digital Observatory" — A high-fidelity, immersive enterprise command center aesthetic that rejects the typical boxed-in SaaS feel. The mood is best described as Atmospheric Depth: dark, spacious, and precision-focused. Inspired by high-end editorial design and command center interfaces, data is treated as a premium asset surfaced through tonal layering rather than structural lines.
The base is built on Midnight Navy — a deep blue-black that evokes an infinite canvas — with UI elements that appear to float and glow rather than sit flat. Hierarchy is established exclusively through surface tone shifts; hard borders are forbidden. The result feels like peering through a high-resolution window into enterprise data, where clarity comes from contrast in depth rather than weight.
Overall density is medium-high — information-rich layouts with generous vertical whitespace between elements, but no wasted screen real estate.
2. Color Palette & Roles
Core Surfaces (darkest to lightest)
| Name | Hex | Role |
|---|---|---|
| Abyss | #0a0e14 |
Deepest well; nested content backgrounds |
| Midnight | #10141a |
Main application viewport / page background |
| Void Navy | #181c22 |
Sidebar, header, and secondary navigation surfaces |
| Deep Slate | #1c2026 |
Default card and information module background |
| Elevated Slate | #262a31 |
High cards, hovered table rows |
| Island | #31353c |
Active states, selected rows, top-layer containers |
| Frosted Glass | #353940 |
Floating modals and dropdowns (at 80% opacity with blur) |
Accent & Brand Colors
| Name | Hex | Role |
|---|---|---|
| Indigo Glow | #c0c1ff |
Primary accent; CTA text, key metrics, active nav indicator |
| Lavender Soft | #8083ff |
Primary container fills |
| Violet Pulse | #d2bbff |
Secondary accent; gradient pair to Indigo Glow |
| Deep Indigo | #6001d1 |
Secondary container fills |
| Royal Indigo | #494bd6 |
Inverse primary; used on light-over-dark contexts |
| Aqua Sky | #7bd0ff |
Tertiary accent; data visualization, device status indicators |
| Ocean | #009bd1 |
Tertiary container |
Semantic / State Colors
| Name | Hex | Role |
|---|---|---|
| Coral Error | #ffb4ab |
Error text and destructive action labels |
| Crimson | #93000a |
Error container backgrounds |
| Emerald (Tailwind) | emerald-* |
Online / active device status badges |
| Amber (Tailwind) | amber-* |
Warning / pending device status badges |
Text Colors
| Name | Hex | Role |
|---|---|---|
| Cloud | #dfe2eb |
Primary text; body copy, data values, headings |
| Mist | #c7c4d7 |
Secondary / muted text; labels, metadata |
| Ghost | #908fa0 |
Placeholder text, disabled states, divider fill |
| Boundary | #464554 |
Ghost border fallback for inputs (used at low opacity) |
3. Typography Rules
Single font family throughout: Inter (geometric sans-serif). Used for headlines, body, and labels alike — unity is achieved through weight and tracking variation rather than font switching.
| Level | Size | Weight | Tracking | Usage |
|---|---|---|---|---|
| Display | 56px / 3.5rem | Bold (700) | Tight (negative) | Hero KPI metrics, total counts |
| Headline | 24px / 1.5rem | SemiBold (600) | Normal | Page titles, major section headings |
| Title | 16px / 1.0rem | Medium (500) | Normal | Card titles, module headers, tab labels |
| Body | 14px / 0.875rem | Regular (400) | Normal | Default text, table rows, descriptions |
| Label | 11px / 0.6875rem | SemiBold (600) | Wide (+0.1em) | Sidebar category headers, metadata chips — All Caps |
The Editorial Rule: Sidebar category headers use the Label style in all-caps with wide letter-spacing (+0.1em). This creates a "system-level" authority that contrasts with fluid body text and signals structural navigation. Body text must never be all-caps.
4. Component Stylings
Buttons
- Primary CTA: Gradient fill from Indigo Glow (
#c0c1ff) to Violet Pulse (#d2bbff). White text. Softly rounded corners (matchinglgradius — just barely rounded, not pill). On hover, a high-glow indigo shadow emanates beneath the button. - Secondary / Outline: Island background (
#31353c) with an extremely faint ghost border — outline-variant (#464554) at 20–30% opacity. Mist text (#c7c4d7). - Tertiary / Ghost: Fully transparent background. Mist text. On hover: Cloud text with elevated background tint.
- Destructive: Coral Error text (
#ffb4ab) on a Crimson container (#93000aat low opacity). Used for delete and irreversible actions. Never bright red.
Cards & Containers
- Default Card: Deep Slate background (
#1c2026). No visible border — separation is purely tonal. Features a subtle top-edge inner glow:inset 0px 1px 0px rgba(192, 193, 255, 0.05)— mimics a ceiling light reflecting off the card's glass surface. - Corner Rounding: Minimal — just enough to soften, not enough to feel playful. Approximately 4px (the
lgtoken = 0.25rem). Cards feel rectangular and purposeful, not bubbly. - Elevation principle: No drop shadows on standard cards. Hierarchy comes from the surface color step (Void Navy → Deep Slate → Elevated Slate).
- Floating Modals / Dropdowns: Frosted Glass background (
rgba(53, 57, 64, 0.8)) withbackdrop-filter: blur(12px). This "Glassmorphism" effect keeps the user contextually anchored to the underlying page while the modal floats above. Shadow:0px 8px 24px rgba(13, 17, 23, 0.6)— navy-tinted, never pure black.
Inputs & Forms
- Default state: Deep Slate background. Ghost border at very low opacity (near invisible). Text in Cloud color.
- Focus state: Indigo Glow (
#c0c1ff) border at 40% alpha creates a soft halo glow — not a hard ring. The inner glow on the input also subtly strengthens. - Placeholder text: Ghost color (
#908fa0). - Select / Dropdown: Same surface as inputs; opens as a Frosted Glass panel with blur.
- No hard outlines at rest — inputs feel embedded in the surface until interacted with.
Status Badges
- Shape: Fully pill-shaped (maximum border-radius /
full= 0.75rem). - Style: Functional color (Emerald, Amber, Coral) at approximately 15% background opacity, with the same color at full 100% opacity for the label text. Creates a "glowing ink" effect — the badge appears illuminated from within.
- Examples: Online → soft emerald glow; Warning → soft amber glow; Error/Offline → soft coral glow.
Navigation Sidebar (224px wide)
- Background: Void Navy (
#181c22) — one step lighter than the main viewport. - Active item indicator: A
3pxvertical bar on the far-left edge using Indigo Glow (#c0c1ff). The text weight also increases slightly. No background highlight on active items — the light bar IS the indicator. - Inactive items: Mist text (
#c7c4d7) at normal weight. - Category headers: Label-style — all-caps, 11px, SemiBold, wide tracking. Ghost color (
#908fa0). - Item padding: Comfortable vertical padding (~9.6px / 0.6rem) for breathing room between items.
- No dividers between nav sections — spacing does the work.
Data Tables
- Row separation: No horizontal dividers. Alternating subtle tonal rows (Island
#31353con hover) and consistent vertical gap rhythm. - Header row: Mist text (
#c7c4d7), Label-style capitalization, slightly smaller than body. - Hovered row: Elevated Slate (
#262a31) or Island (#31353c) background. - Selected row: Island background with Indigo Glow left border accent.
Scrollbars
- Slim — 4px wide track.
- Thumb: Boundary color (
#464554), with 2px border-radius. - Track: Transparent.
- Overall feel: Nearly invisible unless sought out.
5. Layout Principles
Whitespace is structure. The design never uses lines or dividers to separate sections — space does that job. When content feels disconnected, the solution is always to add vertical breathing room, never to draw a border.
- Page content area: Fills the viewport to the right of the 224px sidebar. Padding inside the content area is generous — approximately 24–32px on all sides.
- Section spacing: Major sections within a page are separated by approximately 24px of vertical space. Sub-sections by 16px.
- Card grid: Cards sit in fluid grids with 16px gaps. Cards never touch each other.
- Alignment: Strong left-edge alignment for all content. Data tables, card headers, and page titles all share the same left origin point.
- No horizontal rules /
<hr>elements: Surface color transitions and whitespace define the visual structure entirely. - Modals: Centered in the viewport, overlaid on a dark scrim. The page content behind is still readable through the frosted glass effect, maintaining spatial context.
- The "No Raw Border" rule: Any element requiring a visible boundary for accessibility (e.g., an active input) must use the ghost border approach — Boundary color (
#464554) at 20% opacity maximum. Full-opacity borders are strictly prohibited. - Mobile / responsive: The sidebar collapses to a drawer on narrow viewports. Cards reflow to single-column. The design's depth relies on background layers, so it translates naturally to smaller screens.