Shaping Tina.io’s Design System and Brand Presence

Tina.io is an open-source content editing platform with a quirky, creator-first energy. The challenge? Keep the llama and the personality — while giving the brand and product a structured design system that scales.

Overview

Overview

Tina.io — open-source CMS focused on developer joy and editor ease

Industry

Industry

Developer Tools
Open Source
Headless CMS

Challenge

When Tina joined the SSW family, it had strong developer love and a memorable mascot — but no structured design system, brand rules, or cohesive visual language. UI patterns were inconsistent, merch was ad hoc, and design decisions lived in DMs.

The ongoing challenge:
Bring clarity and structure across Tina’s product, site, and swag — without losing its weird, friendly charm.

Results (so far)

  • Launched Tina’s first official design system in Figma

  • Defined a visual language that balances playfulness and scalability

  • Designed branded merch for events

  • Aligned design across product, docs, and marketing — llama included

Process

Building the Design System

  • Audited Tina’s interfaces for UI inconsistencies and gaps

  • Created reusable components, naming standards, and token sets in Figma

  • Documented guidelines for both internal devs and open-source contributors

  • Collaborated with devs to align design and code tokens

Refining the Brand

  • Defined rules around tone, illustration style, colour usage, and layout

  • Formalised how and when to use “Tina the Llama” across the experience

  • Ensured product UI and external touchpoints feel unified but still fun

Merch & Events

  • Designed Tina-branded stickers, lanyards, shirts, QR cards, and more

  • Used merch design to test the brand’s flexibility in the real world

  • Supported developer events with collateral that actually gets remembered

Cross-Team Rollout

  • Collaborated across dev, marketing, and product to roll out gradually

  • Worked asynchronously with community contributors

  • Kept the system lean, flexible, and easy to maintain — like the product

My Role

I’m leading Tina’s design system and brand expansion — touching everything from interface audits to merch stickers, and making sure design is buildable, documented, and undeniably Tina.

  • System builder — established Tina’s first scalable component set

  • Brand wrangler — translated quirky tone into real visual rules

  • Team enabler — helped devs, marketers, and contributors work faster and more consistently

Conclusion

Tina’s brand and system are growing together — and staying weird in the best way. I’m helping shape a design foundation that scales across code, swag, and storytelling — so Tina can keep being Tina, just with fewer inconsistencies and more impact.