The University of California Santa Cruz needed a Wordpress theme that reflected it’s unique and gorgeous soul. The campus has all the magic of Northern California: ocean views, mountains, and meandering forest paths where one might spot whimsical student art projects. But it’s also a strong place, known for it’s student activism, commitment to social justice, and rigorous academics. How does one balance these two? The challenge was to create something spacious and free, yet powerful. Much like the spirit of the campus itself.

Following the theory of atomic design, we first defined the atomic components - typography, colors, etc. Then we combined these to form molecules - buttons, tables, cards, and other patterns. Finally these molecules could be made into web pages.

We created the identity system in Figma so that many people could work on it at the same time, and the styles were easily accessible for the developers in html. The components combined to form patterns, which then could be made into page templates. The result was an airy and beautiful component library that would work across campus for many different types of websites.

Typography

Typograhy

Typography

Color components

color components

Color components

Cards

Cards

Card examples

Examples of all the components put together:

A vibrant home page for an academic division.

An example of a departmental website.