Kärlek
Project Overview:
Structuring Lovable for Speed and Love
Lovable is an AI startup founded in 2024, focused on making software engineering accessible to everyone by letting users build apps and websites simply by chatting with AI.
Our team's main goal was to create a design system that brings consistency, speed, and intention into the Lovable product, helping it scale at speed. The name Kärlek (SHAIR-lek) means "love" in Swedish and reflects the system's mission to help designers build with clarity and "with love"
Defining the Challenge:
From 33 Buttons to Lovable Velocity
Lovable was growing quickly but lacked the necessary structure (a unified design system) to scale its product development with efficiency and consistency.
So we asked ourselves,
"What are the specific points of friction caused by the lack of a system? How do we ensure a "no code, no friction" user experience when the internal building process is chaotic?"
Team Members (Left to right): Emily Yip, Isadora Oh, Jasmine Chen, Nabhi Shah
We identified three critical, interconnected problems that hindered growth and eroded user trust:
Manual Workflows & Duplication (Inefficiency):
Observation: The lack of usage guidelines led to confusion among designers. Designers wasted time choosing components, and developers often rebuilt elements that could have been reused.
Example: Teams had previously designed four different button styles, leading to the question: "Which button should go here, or should I make a new one?".
Visual Drift & Broken Trust (Inconsistency):
Observation: Fragmented components and inconsistent styles were disrupting the visual rhythm, weakening the brand identity, and eroding user trust as the product scaled.
Insight: Unreliable UI combined with inconsistent styles resulted in a product that users didn't trust.
Major Accessibility Gaps (Inclusivity):
Observation: Without clear guidelines, accessibility was consistently breaking down across the product. Issues included low color contrast, limited keyboard support, and unclear alt text.
Impact: These gaps blocked key features for users and increased legal risk, as we were not meeting WCAG standards.
Articulating Our Strategy:
Kärlek's Design Values
Our overall strategy was to embed four key design values: Consistent, Scalable, Efficient, and Inclusive into the foundation of Kärlek, thereby solving the three identified problems.
Approach: We chose a component-first approach, focusing on creating adaptable elements and clear usage documentation to enforce consistency from the ground up.
Key Activities/Steps:
- Initial Component Audit: Cataloging existing components (and their variations) to understand the scope of the visual drift.
- Value Definition: Defining the four core values to guide all design decisions.
- Accessibility Engineering: Proactively designing all components to meet AA standards for contrast and semantic structure.
- Documentation: Using Zeroheight to create an accessible, single source of truth for all teams.
Learning: Design systems are a culture change disguised as a UI kit. We learned that the "what" (the components) was less important than the "how" (the usage guidelines and community support).
The Kärlek Solution:
Building for Effortless Design
Driving Efficiency Through Intentional Design
- Solution: We created clear context for every component, eliminating manual, decision-paralyzing workflows.
- Key Feature: Usage guidelines define when to use components, such as choosing between compact or regular tabs based on available space.
- Efficiency for Modes: Built-in Dark and Light Mode support with automatically defined colors ensures visual consistency and saves designers time.
Ensuring Consistency and Scalability
- Solution: Kärlek established a unified visual language to reflect Lovable’s brand values across every element, from buttons to spacing, making it easier for designers to create confidently.
- Scalability Feature: The system was built with adaptable components and responsive layouts, allowing designs to expand and modify without extra effort. Developers can also access the corresponding tokens directly for both light and dark modes.
Proactive, Inclusive Design
- Solution: We mitigated major accessibility gaps and legal risk by making inclusivity a non-negotiable foundation.
- Visual Clarity: A contrast-engineered palette ensures full readability in any environment.
- Full Navigation: Semantic elements guarantee 100% keyboard and assistive technology access.
- Risk Mitigation: Components are built to meet AA standards at the component level, drastically mitigating legal risk.
Conclusion and Reflection:
Lessons for Future Systems
Project Outcomes and Next Steps
- The Story's End: Kärlek was successfully launched, providing the structural foundation Lovable needed for scaling effectively and efficiently. It now serves as the single source of truth for design and development.
- Immediate Impact: Reduced component duplication and a clearer decision-making process for designers.
- Future Steps:
- Integration of new components through the community contribution process.
- Continuous auditing and updating of documentation based on user feedback from Office Hours.
- Measuring design-to-development time reduction.
Key Lessons and Internalized Learning
The Power of Proactive Inclusion: I learned that designing for accessibility is not a feature to add later; it is the foundation for responsible design. By engineering contrast and semantics from the start, we didn't just meet standards we built a better, less risky product.
Documentation as Product: I internalized that the documentation (Zeroheight) is just as important as the code and design files. Clear, intentional, and engaging documentation is the vehicle for culture change and adoption.
Scaling Requires Intent: The most challenging part was deciding what not to include. I learned the value of slowing down the initial build to create clear guidelines, which ultimately speeds up the entire development cycle later on.
