Cray Networks Rebrand

Project Overview

The Cray Networks rebrand modernizes the brand of a real 20-year-old IT support business serving Central Texas while doubling as a senior-level design-system demonstration. The build keeps the company's existing blue-and-white identity but finally systematizes it: a canonical OKLCH token model drives every color, and a live theming engine lets the entire site re-skin in real time without a single React re-render. It is a full React Router framework-mode app with SSR, a Base UI component library, a variable-font typography lab, and a hand-coded SVG logo built from network nodes. An interactive showcase walks through the design rationale, including an honest before-and-after slider against the actual 2003 site. The result argues for design-system competence by proving it in the product itself rather than claiming it.

Knowledge Gained

Building the theming engine pushed me deep into the CSS cascade and the OKLCH color space. Authoring tokens as composable lightness, chroma, and hue channels meant I could override accent color, density, and radius by setting inline CSS variables on the html element, letting them outrank the root scope and re-theme the page instantly with no component re-render. I worked out SSR-safe theme persistence with cookies to avoid a flash of unstyled content, plus Zod-validated shareable theme query parameters. The variable-font work taught me to drive real wght and opsz axes for genuine optical sizing rather than faking type scales. Pairing Base UI primitives with Class Variance Authority and Tailwind v4's @theme inline gave me a clean way to keep utility classes overridable while a single token file stayed the source of truth and prevented drift.

The Impact

This project showcases my ability to design and engineer a coherent design system end to end, from primitive color channels up through documented, accessible components. It demonstrates fluency across the modern frontend stack: React Router framework mode with SSR, Tailwind v4, Base UI, variable fonts, and OKLCH color, all shipped on a Dockerized Railway deploy. The live theming and typography labs prove I understand how systems scale and stay maintainable rather than just how a single screen looks. The honest before-and-after narrative shows I can respect an existing brand while modernizing it, a balance that matters for real client work. As a portfolio piece it speaks directly to design-minded hiring managers who can tell the difference between a template and a system.

Links