The colours, type, shapes and pictures of Fluxio Works in one place.
Brand
Fluxio WorksFluxio WorksEducation & Courses - Friendly and clear: confident blues and violets with warm highlights, books and screens.
Palette Vivid Rose · Editorial style · pictures: App screens with education & courses subjects · fonts DM Serif Display and Source Sans 3
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
DM Serif Display
Headings
Source Sans 3
Text, buttons and forms (Google Fonts)
The online school for busy people
What makes Fluxio Works different
How to choose the right course
We review every course with hiring managers each year, so you learn SQL, Figma and planning the way teams use them.
Earn a certificate at the end of each course and share it with employers. We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick. Every course is built around hands-on projects you can add to your portfolio.
Study groups and a friendly forum keep you motivated along the way.
Corners and depth
--wt-shadow--wt-shadow-lgComponents
Pictures
App screens in the template colours, with education & courses 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.