HVAKR / DESIGN SYSTEM

Design System

The building blocks of HVAKR.

One source of truth for color, type, space, radius, icons, and components. Build every HVAKR interface with HVAKR UI.

BASE UNIT
4px
TYPE
HVAKR Sans
MONO
HVAKR Mono
RADIUS
4px
THEMES
Light · Dark
01

Color

Click any chip to copy its token.

Brand

Semantic - Surfaces

Theme-aware. Swatches show the current theme; toggle to see both. Light / dark values labelled below each.

Semantic - Text

UI State

Reserved for UI states and chart series - neverdecorative on marketing. Base shade in bold.

Blue$blue
Information, supply air, links.
Red$red
Danger, errors, return air.
Green$green
Success, exhaust air.
Gold$yellow
Warnings, caution.
Indigo$indigo3
Charts, secondary data series.

Neutrals

Light grays$light-gray
Grays$gray
Dark grays$dark-gray
True black / white$black / $white
02

Typography

Families

Self-hosted at fonts.hvakr.com. Licensed under SIL OFL 1.1. Download individual weights or the full family as WOFF2.

Aa
HVAKR Sansvar(--font-sans)Everything. Weights 400 / 500 / 600 / 700.0123456789 &@#%
400500600700
Aa
HVAKR Monovar(--font-mono)Code, tokens, tabular figures, spec labels. Weights 400 / 500 / 600 / 700.0123456789 &@#%
400500600700

Scale

Display

h1clamp(36px → 62px)w700

Section

h2clamp(28px → 40px)w700

Subsection

h3clamp(22px → 32px)w600

Card title

h4clamp(18px → 24px)w600
Label
h5clamp(16px → 20px)w600
Small label
h6clamp(14px → 18px)w600

Body copy

pclamp(14px → 16px)w400

Weights

03

Spacing

4px baseline. No off-grid values.

04

Radius

One dial. Rect, pill, or circle - nothing in between.

05

Elevation

Flat by default. Separation comes from borders, not shadows.

Default surface1px solid var(--fg-4)Cards, panels, inputs, dividers.
Hero / feature image0 8px 40px rgba(0,0,0,.1)The only shadow in the system.
06

Icons

Brand & product

HVAKRIcon
HVAKRIconCurrent
HVAKRLogoText
ASHRAEIcon
MeasureIcon
OnlineDot

Blueprint icon set

The full UI set - blueprintjs.com. A representative sample:

home
cog
search
plus
cross
tick
edit
trash
duplicate
download
upload
document
folder-close
chart
timeline-line-chart
grid-view
layers
cube
calculator
temperature
snowflake
flame
lightbulb
warning-sign
07

Loaders

Spinner & progress

Default spinner. HVAKR mark at 40px and above. Use variant='random' for a themed glyph.

Spinner · 16
Spinner · 32
Spinner · 48
ProgressBar

Random

random
random
random
random
random
random
08

Components

Blueprint.js + @hvakr/ui. Never roll your own.

Buttons

Tags

DefaultPrimarySuccessWarningDangerMinimalRound

Callouts

Information
Load calculations update automatically as you edit spaces.
Success
Report generated. 12 pages, ASHRAE 183 compliant.
Warning
Ventilation falls below ASHRAE 62.1 for 3 zones.
Error
Weather station could not be resolved for this location.

Cards

Project

Interactive card. Hover for the lift state.

Static card

Bordered surface, no shadow - flat by default.

09

Logos

Download brand assets.

Digital

Full-color marks with the halo. Use these on screen.

For print

Flat marks - solid fills, no halo or gradient. Use these on paper, plotter sheets, and title blocks, where they reproduce cleanly in a single color.

Copied