+128%Leads
2.4sLCP
98Score
Type
Portfolio Card
Result metric
Internal · Living Style Guide
CodeHypes Design System
Every token, component and section rendered from the real site code — so this page can never drift from production. Not linked in public navigation.
01
Foundations
Colors, typography, grid, spacing, radius, shadows and icons.
Colors
Typography
Heading 1 — Plus Jakarta Sans
Heading 2
Heading 3
Heading 4
Lead paragraph — Inter, used for intros and section leads.
Body text — the default reading size used across content. Inline link and gradient emphasis.
Small / muted — captions, metadata and disclaimers.
Radius
--ch-radius · 16px
Shadow
--ch-shadow
Icons (Boxicons + SVG graphics)
Grid: Bootstrap 5.3 12-column. Spacing: Bootstrap utility scale (g-*, p-*, m-*). Section rhythm: .section-md / .section-lg.
02
Components
Buttons, cards, forms, inputs, tables, accordions, tabs, modals, badges.
Buttons
Badges & Pills
Section Badge
Pill
Tech Chip
Cards
Service Card
The standard card used across services, solutions and industries.
Glass Card
Used for hero panels and highlighted content.
Forms & Inputs
Accordion
Answer content.
Answer content.
Tabs
Tab one content.
Tab two content.
Modal & Table
| Plan | Support |
|---|---|
| Starter | 2 months |
| Growth | 6 months |
03
Sections
Composed page sections — live examples of the building blocks.
Business Impact
Example KPI Dashboard
A live-style view of the business outcomes our solutions move — the numbers that matter to your bottom line.
Example KPI DashboardLive demo
0%
Metric A
+12%
0k
Metric B
+8%
0840k
Metric C
+24%
0.9★
Metric D
+0.4
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
04
Templates
Live page templates — open each in a new tab.
05
Graphics Library
Dashboards, device frames, mockups and graphic placeholders (CH-{ID} system).
New Pro subscription
OverviewUsersBilling
MRR
0k
+16%
Users
0k
+9%
Churn
0%
▼
Live Activity
New subscription
Trial converted
Usage spike
+128%Leads
2.4sLCP
98Score
Internal reference IDs follow CH-{SERVICE}-{TYPE}-{NUMBER}; public exports are descriptive WebP filenames (see assets/README.md).
Internal Reference Only
This living style guide renders from the same components as production. Keep it noindex and out of public navigation.