Style guide
The colours, type, shapes and pictures of Halo Works in one place.
Brand
Halo WorksHalo WorksSaaS & Software - Modern and focused: indigo, violet and blue, the product on screen.
Palette Soft Blue · Minimal Luxury style · pictures: Bauhaus shapes with saas & software subjects · fonts Playfair Display and Albert Sans
Colours
Every colour is a token in assets/css/theme.css (--wt-primary ...). The contrast of the text colours is shown against the page; WCAG AA needs 4.5:1 for text.
Light mode
Dark mode
Type
Playfair Display
Headings
Albert Sans
Text, buttons and forms (Google Fonts)
Turn scattered tasks into a clear plan
Built for the way teams really work
What our customers asked us most
Status updates write themselves from the work in Halo Works, so the Monday stand-up becomes a five-minute read.
Teams report saving around five hours a week after the first month. We listen first, then build a plan around what you actually need. Your data is encrypted, backed up daily and hosted in the region you choose.
Plan projects, track progress and share updates without another status meeting.
Corners and depth
--wt-shadow--wt-shadow-lgComponents
Pictures
Bauhaus shapes in the template colours, with saas & software subjects. Every product picture shows its product. Replace them with your own photos of the same size (see PHOTOS.md for the photos of the live demo).
Design files
design-tokens/tokens.json- every token in the W3C Design Tokens format: in Figma, install the Tokens Studio plugin and load the file; Style Dictionary turns it into code for other platforms.design-tokens/style-guide.svg- this page as a board: drag it into Figma, Sketch or Illustrator and every swatch, text and shape stays editable.design-tokens/tokens.css- the same values as CSS variables for other projects in the brand.