Style guide
The colours, type, shapes and pictures of Fableova Co in one place.
Brand
Fableova CoFableova CoEducation & Courses - Friendly and clear: confident blues and violets with warm highlights, books and screens.
Palette Indigo Night · Editorial style · pictures: Soft blobs with education & courses subjects · fonts Newsreader and IBM Plex 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
Newsreader
Headings
IBM Plex Sans
Text, buttons and forms (Google Fonts)
Learn in 15 minutes a day
What makes Fableova Co different
Our favourite tips for busy weeks
Every course ends with a real project, from a sales dashboard to a landing page, that goes straight into your portfolio.
Study groups and a friendly forum keep you motivated along the way. Earn a certificate at the end of each course and share it with employers. Guided learning paths take you from beginner to job-ready step by step. Mentors review your projects and give feedback within two days.
The mobile app downloads lessons, so you can learn on the train.
Corners and depth
--wt-shadow--wt-shadow-lgComponents
Pictures
Soft blobs 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.