INDUSTRY:
BRANDING SYSTEMS DESIGN
CLIENT:
THE MIDNIGHT GRIND
YEAR:
2026
The Midnight Grind
Building a scalable brand identity and custom web presence for a student-run night café.
about.
The Midnight Grind (TMG) is a student-run late-night café at UC Davis designed to provide a community space for students during late hours. As a co-founder and the Media Team Director, I was responsible for taking the brand from a rough "beta" concept to a professional, scalable organization.
While I created the initial visual identity, I quickly realized that our original branding lacked the structure needed for a growing team and physical media. I led a strategic rebrand, developing a comprehensive design system in Figma, and then translated that system into TMG’s first digital home, building a mobile-first website from scratch with HTML, CSS, and JavaScript.
the problem.
Launching a new organization often involves moving fast at the expense of structure. Our initial branding worked for a launch, but it wasn't built to scale. The primary brand color (a dark, bright blue) was impossible to replicate accurately in print, and without a standardized design system, our social media feed became cluttered and difficult to maintain under tight deadlines.
Our challenge was:
How might we audit and rebuild TMG’s visual identity into a scalable system that maintains consistency across print, social media, and a custom web presence?
understanding the product.
As a co-founder, I had the unique advantage of seeing the brand’s friction points from the inside. I identified three core areas of failure in our original branding.
TECHNICAL LIMITATIONS
Our colors didn't translate to print-friendly CMYK, leading to inconsistent physical signage.
OPERATIONAL FRICTION
Content needed to be made from scratch, at the last-minute, because there were no reusable templates for the media team.
DIGITAL GAP
We had a strong social presence but no central source of truth or menu for students to reference outside of Instagram.
I decided to treat the rebrand as a design systems project rather than just a visual update, focusing on creating a framework that would allow our media team to execute high-quality work in minutes, not hours.
building the design system.
To solve the clutter of our original branding, I built a complete Figma library that served as the foundation for all of TMG's branded material, including our social media and the website.
COLOR
I pivoted from the dark, bright blue to a lighter, print-friendly shade. This ensured that our digital presence and physical marketing were perfectly aligned, regardless of the medium.
TEMPLATING
I created a suite of Figma templates for every post type (announcements, menus, spotlights). By outlining a strict schedule and providing "drag-and-drop" components, I enabled the media team to maintain a clean, intentional feed even during high-stress event weeks.
THE WEBSITE (0 to 1)
With the brand system stabilized, I built the website from scratch. The site became our central hub of important information, allowing us to have an online presence independent of Instagram.
the technical challenge.
The most significant hurdle was bridging the gap between my Figma design system and the live code. As a design engineer, I avoided using a template in favor of having total control over the performance and layout.
I hand-coded the site using HTML, CSS, and JavaScript, focusing on:
Custom CSS Grid/Flexbox: To ensure the menu was perfectly legible across all mobile device sizes.
Asset Optimization: Keeping the site lightweight so it would load instantly on campus Wi-Fi.
Translating Figma Tokens: Manually mapping my Figma spacing and color styles into CSS variables to ensure the code was a 1:1 reflection of the brand system.
figma to production.
This project gave me experience owning every stage of the design process, from shaping the brand strategy to designing and developing the final website.
Design: Audited the original brand and built the rebranded system in Figma.
Operations: Developed the media team's workflow and post-scheduling templates.
Engineering: Wrote the frontend code to ship the live site.
By owning the process from end-to-end, I was able to ensure that no detail was lost in translation between the creative vision and the technical execution.
outcomes.
The rebrand and website launch transformed TMG’s professional standing on campus.
KEY DELIVERABLES
Scalable design system and Figma component library
Mobile-first website (HTML/CSS/JS)
Print-friendly brand identity
Social media content framework and templates
IMPACT
Achieved 3,000+ followers with a cohesive, professional-grade aesthetic.
Eliminated brand inconsistency between digital and physical media.
Reduced media team production time by providing plug-and-play templates.
reflection.
The Midnight Grind taught me the importance of designing for real-world constraints. It’s easy to make something look good in a vacuum, but designing for print-reproducibility and team operational speed requires a higher level of strategic thinking.
This project was a fantastic experience that developed my understanding of what a design engineer is—someone who doesn't just hand off a design, but understands exactly how to build the system that makes that design work in the real world.
