134 lines
9.3 KiB
Markdown
134 lines
9.3 KiB
Markdown
# 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 (matching `lg` radius — 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 (`#93000a` at 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 `lg` token = 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)`) with `backdrop-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 `3px` vertical 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 `#31353c` on 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.
|