500
End-to-end design system built with Tailwind CSS and Web Components for Infotech — covering tokens, components, patterns, and documentation.
I inherited the first iteration of Causeway shortly after joining Infotech in 2020. In the years since, and with a heap of help from my extraordinary frontend colleagues, it has been completely re-built to meet the scale and demand of Infotech's ever-growing features.
Starting from foundational color, typography, icons, and spacing to app navigation, carefully considered slots, and complex compositions — Causeway has grown a lot. I'm proud to say my fingerprints are all over it.
While it's not perfect or complete (is any DS ever complete?), it has matured into a reliable foundation that meets Infotech's sophisticated needs.
Browse and interact with Causeway components — rendered live from the public CDN, no install required.
Causeway tints and shades are created by applying white (screened) or black (multiplied) to a base 500 color at stepped opacity intervals. This method creates monochromatic harmony. And, by applying the same amount of tint or shade to the other colors, creates nuance harmony for the entire palette.
The named values that keep every Causeway component visually consistent. Sourced directly from tailwind-preset.umd.js v1.95.3