BaseHub
Midnight Command Center: Focused precision on a deep, organized canvas.
BaseHub employs a 'dark modern command center' aesthetic, characterized by a deep, near-black canvas and layered dark gray surfaces. A single vivid orange electrifies interactive elements and critical accents, with subordinate blues for minor semantic cues. Typography is compact and precise, maintaining readability within the dark theme. The system emphasizes clear segmentation through subtle borders rather than heavy shadows or large elevation shifts, creating a focused and organized visual experience.
⚡️ Build with this templatehttps://basehub.comColor Palette
Typography
Heading: inherit
Body: inherit
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
# BaseHub — Style Reference > Midnight Command Center: Focused precision on a deep, organized canvas. Theme: dark BaseHub employs a 'dark modern command center' aesthetic, characterized by a deep, near-black canvas and layered dark gray surfaces. A single vivid orange electrifies interactive elements and critical accents, with subordinate blues for minor semantic cues. Typography is compact and precise, maintaining readability within the dark theme. The system emphasizes clear segmentation through subtle borders rather than heavy shadows or large elevation shifts, creating a focused and organized visual experience. ## Colors | Name | Value | Role | |------|-------|------| | Deep Space | `#000000` | Footer background, decorative fills. The deepest black grounding element | | Canvas Dark | `#040404` | Primary page background, base surface for content blocks | | Slate Surface | `#0c0c0c` | Card backgrounds, slightly elevated surfaces | | Elevated Ink | `#121212` | Subtly darker elevated surfaces, background for minor body sections | | Ghost Fill | `#1b1b1b` | Background for ghost buttons and interactive elements in their default state | | Border Dark | `#252525` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color | | Faint Gray | `#303030` | Background for minor cards or UI elements requiring minimal contrast with darker surfaces | | Muted Ash | `#646464` | Secondary text, descriptive comments, helper text. Soft readability on dark backgrounds | | Subtle Gray | `#909090` | Tertiary text, inactive icons, hairline borders. Receding visual information | | Light Text | `#dedede` | Primary text on dark backgrounds, active badge text. High contrast for essential information | | Bright White | `#f3f3f3` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color | | BaseHub Orange | `#ff6c02` | Primary action backgrounds, accent borders, highlights, brand elements. The core accent color evoking activation and importance | | Orange Bright | `#ff9b51` | Gradient highlight for brand elements, used in conjunction with BaseHub Orange | | Info Blue | `#55c2ff` | Informational badges, status indicators, secondary functional accents. Provides a clear, cool contrast to the dominant orange | ## Typography | Family | Role | |--------|------| | Geist | Primary typeface for all UI text, headings, and body copy. Its compact nature and precise letter-spacing contribute to the overall technical and focused aesthetic. | | Geist Mono | Used for code snippets, tags, and specific UI elements requiring a monospaced font. Reinforces the developer-centric nature of the product. |