Our design tokens are a package, and the marketing site is deliberately not a consumer
Munchable has three surfaces that need to look like the app: the app itself, built with Expo; the marketing site, built with Next.js; and a set of social reels rendered with Remotion that show a phone running the app. When the reels were built, their theme file was a hand-copied mirror of the app's tokens, under a comment promising it matched. That is the arrangement that drifts. The reels' new…
Munchable's design tokens are a cohesive package, while the marketing site is distinctively separate. The app, marketing site, and social reels all utilize these tokens, but each surface has its own unique adaptations. The reels, in particular, initially mirrored the app's tokens, but this caused issues when changed colours or labels were introduced.
To address this, the reels now import the token package and adapt it to their specific needs. The package itself contains a single light palette, colour contrasts, spacing and radius scales, and a set of verdict vocabulary. The marketing site, however, maintains its own style with CSS custom properties and different radius sizes.
This deliberate separation allows each platform to have its unique design, with the package serving as the central truth and source of reference. The system relies on TypeScript to enforce consistency, with any changes to the tokens causing compilation errors across the platform, ensuring that drift is caught early.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
