← Back to App
Design Tokens & Code Library

Omnitrix Core Design System

Welcome to the official developer style guide and component specification library for Omnitrix Technologies. Use this system to assemble compliant, high-performance, and visually stunning digital products. All tokens are responsive, compositor-optimized, and dynamically adaptive for both Dark and Light themes.

Typography

Omnitrix utilizes Google Fonts Inter as the primary typeface across the entire website for both headings and body text, ensuring a modern, high-tech, and globally professional branding look.

Hero Title (H1 Extra-Bold)

Section Header (H1)

Sub-Section Header (H2)

Widget Header (H3)

Component Label (H4)

Standard body copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum egestas sapien, eget lacinia sem feugiat et. This is mapped with a line-height of 1.625 for optimal reading layout.

Monospace telemetry: [SYSTEM] Handshake secure on port 443. (Font Family: Inter, Monospace)

<h1 style="font-size: 38px;">Section Header (H1)</h1> <p style="font-size: 15px; line-height: 1.625; color: var(--text-primary);">Body content</p> <p style="font-family: monospace; font-size: 13px; color: var(--accent);">Telemetry details</p>

Color Palette

Custom colors are defined using HSL variables to support dynamic theme adaptations. Switch between light and dark modes in the toolbar above to check changes in real-time.

Primary (Emerald)
hsl(142, 70%, 45%)
--primary
Secondary (Cobalt)
hsl(217, 85%, 50%)
--secondary
Accent (Teal)
hsl(187, 85%, 48%)
--accent
Background Base
--bg
Card Overlay Fill
--bg-card
Border Outline
--border-color

Spacing & Grids

All margins, padding offsets, and grid gaps are designed around a mathematical 4px/8px grid scale. Use standard spacing properties to ensure consistent card alignments.

4px (Micro-gap)
8px (GAP-sm)
12px (GAP-md)
16px (GAP-lg)
24px (PAD-sm)
32px (PAD-md)
48px (PAD-lg)
64px (Hero-margin)
/* CSS Variables for Borders and Grids */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; /* Spacing layouts using standard padding */ .card-body { padding: 24px; margin-bottom: 16px; }

Cards & Elevated Containers

Omnitrix utilizes modern Glassmorphism to display information dashboards. Fills use semi-transparent HSL backgrounds with heavy background-blur backdrops, paired with animated micro-elevations on hover.

Static Glass

Standard Container

Renders outline borders and Cosmic Slate overlay fills.

ACTIVE BASE
Hover Interactive

Stripe Ease-Out Lift

Hover over this card to verify the scale transition and HSL emerald shadows.

HOVER CARD
Highlighted Core

Active Border Glow

Stands out dynamically on grids using the primary color scheme.

PRIMARY BORDER
<div class="glass"> <h4>Glassmorphic Panel</h4> <p>Content goes here</p> </div>

Buttons & CTA

Buttons indicate system operations. They are designed with rounded corners, distinct hover elevation, and linear gradient backgrounds.

<button class="btn btn-primary">Primary Button</button> <button class="btn btn-secondary">Secondary Button</button>

Forms & Inputs

Inputs feature dark background fills, transparent borders, and clean focus transitions using the primary brand color.

<div class="form-group"> <label>Email Address</label> <input type="email" placeholder="example@omnitrix.com" style="width:100%;"> </div>

Capability Tables

Omnitrix capability tables render product specifications or compliance parameters clearly, utilizing zebra striping and dynamic highlight hover effects.

Framework Module Standard Compliance Validation Status Latency Performance
OmniCore SCADA AS9100 / SOC2 A+ Fully Audited 0.8ms
Aether Compiler 21 CFR Part 11 A+ Fully Audited 1.2ms
Zero-Trust Hubs ISO 27001 P Partial Review 4.5ms
<div class="matrix-overflow"> <table class="matrix-table"> <thead> <tr><th>Module</th></tr> </thead> <tbody> <tr><td>Content</td></tr> </tbody> </table> </div>

Lightbox Modals

Click the button below to test the modal popup mechanism. The dialog uses Apple-style elastic spring scale transformations for a modern, tactile feel.

<div class="modal-backdrop-overlay" id="my-modal"> <div class="glass"> <h3>Dialogue Header</h3> <button id="close-btn">✕</button> </div> </div>

Dashboard & Telemetry Components

Includes dynamic elements like visual gauges, radar sweeps, and live scroll logs used to indicate data syncs, telemetry feeds, and background server monitors.

Interactive Orbit (100px x 100px center)

HubSpot Radar Wave Webhook Sweep

SWEEP ACTIVE
<!-- Radar Scan Element --> <svg id="dashboard-radar-svg" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="2" class="radar-core" /> <line x1="12" y1="12" x2="22" y2="12" class="radar-sweep" /> </svg>