Brand system / Components
UI Components
The enterprise component library: buttons, status indicators, division cards, statistical KPI callouts, and form controls built on our core design tokens.
Component Architecture
All Holistic Smart web interfaces, client portals, and mobile apps are assembled from these standardized, accessible building blocks.
Token-Driven
Every element uses predefined CSS variables from tokens.css for colors, spacing, radius, and shadows.
WCAG Accessible
High-contrast focus rings, semantic HTML elements, keyboard navigable states, and screen-reader labels.
Responsive
Fluid dimensions that scale effortlessly from 390px mobile screens to large 4K monitoring dashboards.
Buttons
Clear call-to-action hierarchies with interactive hover states and tactile lift physics.
Button HTML Structure
<!-- Primary Action Button with Forward Arrow -->
<a href="/services" class="btn btn--sky">
Explore Infrastructure
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
<path d="M5 12h14M13 5l7 7-7 7"/>
</svg>
</a>Status Badges & Chips
Pill-shaped indicators used for tagging division categories, system health, and version numbers across our 3 Blues and 2 Greens palette.
Badge CSS Tokens
components.css<span class="badge badge--sky">ICT Division</span>
<span class="badge badge--lime">ELV Systems</span>Division Cards (ICT & ELV)
Our flagship card pattern featuring high-contrast backgrounds, gradient top energy stripes, division tags, and interactive hover transitions.
Metric Callouts & Stats
KPI counters presenting quantifiable engineering milestones with high visual impact.
Network Core Uptime
Enterprise Projects
Optical Fiber Backbone
Emergency AMC Response
Form Controls & Inputs
Input controls designed with 1.6px precision borders, 8px corner radii, and Sky-accent focus indicators.
Alert & Callout Boxes
Contextual banners highlighting critical technical warnings, informational notes, and security guidance.