Technossus Design System
W3C design tokens, CSS variables, custom Tailwind preset, and React components — single source of truth for the Technossus frontend.
The problem it solves
Design inconsistency across products: different teams using different spacing, colours, and component implementations. The Technossus Design System establishes a single source of truth that designers and developers share.
How it works
Design tokens follow W3C conventions and are exposed as CSS variables and a custom Tailwind preset. React components — Tag, Stats Card, Testimonial, SearchBar, Nav — are built on top of these tokens and documented with variant coverage. Full pages were built both from Figma files and from content requirements alone. Deployed and documented for adoption across Technossus products.
What makes it interesting
Building a design system from Figma is one thing. Building pages from a content brief alone — with no design file — requires you to make principled decisions about layout, hierarchy, and visual language. Both modes were used, which tested whether the system was actually expressive enough to work independently of the designer.