Skip to content
ZoBlocksby Zowork

ZoBlocks Premium

Coming soon

A theming console and design packs for clinical software.

The console is built and running, and the packs are in production. Premium is not in this release.

View components

01

Theming console

9 features

Set a brand colour, check contrast before release, and publish a versioned stylesheet.

One colour drives every tile below. #42597f, live in your browser.

Brand preview

Brand, mode, density and colour vision, over an interface rather than a swatch board.

Mode
Density
Colour vision

Wearing Slate, version 7.

Colour ramp

Anchored so step 600 is exactly what you gave it.

  1. 50#f5f7fa
  2. 100#ebeff5
  3. 200#d0d9e7
  4. 300#abbad3
  5. 400#8399be
  6. 500#617ead
  7. 600#42597f
  8. 700#41577c
  9. 800#344765
  10. 900#2a3851
  11. 950#1a2332

Contrast gate

Measured on the server. The boundary is at publish, so a failure cannot be clicked past.

  • Label on brand 6007.08
  • Link on paper7.29
  • Brand on brand 506.59

All three clear 4.5:1.

Versioned stylesheets

An edit here cannot change a running application until somebody moves the pin.

  1. /t/northwind/northwind-clinical@9.css
  2. /t/northwind/northwind-clinical@8.css
  3. /t/northwind/northwind-clinical@7.css

Framework bridges

The same value under four house styles, and the library imports none of them.

  • ZoBlocks--zb-accent
  • Ant DesigncolorPrimary
  • MUIpalette.primary.main
  • Bootstrap--bs-primary

Also included

Figma plugin
Variables out, a proposal back. Proposing is not publishing.
Roles and permissions
Thirteen capabilities per role. Publish and rollback are admin only.
Playground
Brand, mode, density and colour vision over real components.
Pack licensing
Design packs, licensed to the organisation, perpetually.

02

Design packs

5 packs

Illustrations, icons, a design system and a Figma kit, licensed to your organisation. Purchasing opens with the ZoBlocks console.

No pack has been reviewed by a registered clinician yet.

  • 01Illustrations

    Empty State Illustrations

    Illustrations for every empty state, in the three meanings clinical records need: not asked, none found and withheld.

    • SVG + React
    • FHIR emptyReason
    • Forced colours

  • 02Icons

    Clinical Icon Set

    Icons for medications, devices, specimens and record states, drawn on a consistent 24px grid.

    • 24px grid
    • 1.5px stroke

  • 03Icons

    Behavioural Health Icon Set

    Icons for therapy, group sessions, telehealth and peer support, designed with a trauma-informed approach.

    • 24px grid
    • Trauma-informed

  • 04Design system

    Behavioural Health Design System

    A calm, low-arousal design system for behavioural health products, with tokens, components and Figma files.

    • Tokens
    • Components
    • Figma

  • 05Figma library

    Figma UI Kit

    The complete ZoBlocks component library in Figma, with component anatomy and light, dark and high-contrast modes.

    • Variables
    • 3 modes
    • Dev Mode

The component library is available now

30 components, MIT licensed, installed as source into your repository. No account and no card.

Browse components
Zowork

Custom application development

The components are free. The decade behind them is available too.

Zowork is the engineering and design team that built ZoBlocks — and the clinical platforms thousands of clinicians open every morning. Behavioral health since 2016, without a pivot. HIPAA and SOC 2 for the whole of it.

10 yrs
In behavioral health
Bells.ai
Built it. Netsmart bought it.
~50%
Documentation time returned
Zero
Clients lost to churn
Book a consultationCase studies

Our team replies. Usually inside a business day.

Emailhello@zowork.com
PhoneUS+1 302 600 3184Japan+81 80 1444 1599India+91 80166 89265
OfficesBLRBangaloreAMDAhmedabadYOKYokohamaWILWilmington
On the webzowork.com