Introduction
A technical design system for enterprise interfaces. Built for clarity, precision, and performance.
Installation
Include the stylesheet in your HTML head. Load the required fonts from Google Fonts.
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<!-- Zenith.CSS -->
<link rel="stylesheet" href="https://files.catbox.moe/t908qn.css">
Quick Start
Use the grid system and components to build layouts quickly. All classes use the z- prefix.
<div class="z-row">
<div class="z-col-md-6">
<button class="z-btn z-btn-primary">Primary Action</button>
</div>
<div class="z-col-md-6">
<button class="z-btn z-btn-danger">Danger Action</button>
</div>
</div>
Design Tokens
Zenith.CSS uses CSS custom properties for consistent theming. Override these values to customize the system.
| Token | Value | Usage |
|---|---|---|
--z-void |
#050608 | Deepest background color |
--z-panel |
#0f1115 | Card surface background |
--z-primary |
#E2FF00 | Primary accent (yellow) |
--z-danger |
#FF2A2A | Error and destructive actions |
--z-success |
#00FF9D | Success states |
--z-info |
#00D1FF | Informational elements |
Grid System
12-column flexbox grid. Responsive breakpoints at 576px, 768px, 992px, 1200px, and 1400px.
z-col-md-4
z-col-md-4
z-col-md-4
<div class="z-row">
<div class="z-col-md-4">Column 1</div>
<div class="z-col-md-4">Column 2</div>
<div class="z-col-md-4">Column 3</div>
</div>
Typography
Two typefaces: Rajdhani for headings and UI, Share Tech Mono for code and data.