SONATA
Welcome to Sonata
This is Sonata Design System, the cornerstone of SIPPO's product design philosophy. Sonata is not just a collection of guidelines, but a living, breathing ecosystem that empowers teams to create cohesive, accessible, and delightful experiences for our users. Whether you're a designer, developer, or product manager, Sonata is here to guide and inspire you as you build the future of SIPPO.
What is it?
Sonata is SIPPO’s official design system, meticulously crafted to provide the tools and resources needed to maintain brand consistency and elevate user experience across all digital products. It’s a single source of truth that brings together design principles, components, patterns, and guidelines, all of which are built with scalability and accessibility at their core.
Why was it created?
SIPPO believes in creating seamless experiences that are consistent, intuitive, and visually compelling. As products and services evolved, so did the need for a unified design language that could scale across platforms and touchpoints. Sonata was born out of this need—to ensure that every interaction with SIPPO, from mobile apps to physical spaces, feels like part of the same cohesive story.
What you’ll find in Sonata
Sonata is organized into several key sections, each designed to guide you through the process of creating and maintaining high-quality designs:
Explore SIPPO’s design principles and core values.
Learn the design language, including tone, voice, and visual identity.
Access a library of reusable UI components and design patterns.
Follow clear guidelines for creating accessible experiences.
Utilize writing and microcopy guidelines to enhance content.
Integrate custom iconography with Material Design.
Learn how Noto Sans is used through our typography guidelines.
Apply design tokens for consistency in colors, spacing, and more.
Icon Library: A collection of custom icons and their Material Design counterparts.
Available Artifacts
Sonata offers a range of artifacts that you can access and download to streamline your design processes:
Component Library: A Figma library with all reusable UI components.
Design Tokens: A downloadable set of design tokens (colors, spacing, etc.) for use in your designs.
Guideline Documents: Comprehensive guides on design principles, accessibility, and more.
Icon Library: A collection of custom icons and their Material Design counterparts.
SONATA
Welcome to Sonata
This is Sonata Design System, the cornerstone of SIPPO's product design philosophy. Sonata is not just a collection of guidelines, but a living, breathing ecosystem that empowers teams to create cohesive, accessible, and delightful experiences for our users. Whether you're a designer, developer, or product manager, Sonata is here to guide and inspire you as you build the future of SIPPO.
What is it?
Sonata is SIPPO’s official design system, meticulously crafted to provide the tools and resources needed to maintain brand consistency and elevate user experience across all digital products. It’s a single source of truth that brings together design principles, components, patterns, and guidelines, all of which are built with scalability and accessibility at their core.
Why was it created?
SIPPO believes in creating seamless experiences that are consistent, intuitive, and visually compelling. As products and services evolved, so did the need for a unified design language that could scale across platforms and touchpoints. Sonata was born out of this need—to ensure that every interaction with SIPPO, from mobile apps to physical spaces, feels like part of the same cohesive story.
What you’ll find in Sonata
Sonata is organized into several key sections, each designed to guide you through the process of creating and maintaining high-quality designs:
Explore SIPPO’s design principles and core values.
Learn the design language, including tone, voice, and visual identity.
Access a library of reusable UI components and design patterns.
Follow clear guidelines for creating accessible experiences.
Utilize writing and microcopy guidelines to enhance content.
Integrate custom iconography with Material Design.
Learn how Noto Sans is used through our typography guidelines.
Apply design tokens for consistency in colors, spacing, and more.
Icon Library: A collection of custom icons and their Material Design counterparts.
Available Artifacts
Sonata offers a range of artifacts that you can access and download to streamline your design processes:
Component Library: A Figma library with all reusable UI components.
Design Tokens: A downloadable set of design tokens (colors, spacing, etc.) for use in your designs.
Guideline Documents: Comprehensive guides on design principles, accessibility, and more.
Icon Library: A collection of custom icons and their Material Design counterparts.
SONATA
Welcome to Sonata
This is Sonata Design System, the cornerstone of SIPPO's product design philosophy. Sonata is not just a collection of guidelines, but a living, breathing ecosystem that empowers teams to create cohesive, accessible, and delightful experiences for our users. Whether you're a designer, developer, or product manager, Sonata is here to guide and inspire you as you build the future of SIPPO.
What is it?
Sonata is SIPPO’s official design system, meticulously crafted to provide the tools and resources needed to maintain brand consistency and elevate user experience across all digital products. It’s a single source of truth that brings together design principles, components, patterns, and guidelines, all of which are built with scalability and accessibility at their core.
Why was it created?
SIPPO believes in creating seamless experiences that are consistent, intuitive, and visually compelling. As products and services evolved, so did the need for a unified design language that could scale across platforms and touchpoints. Sonata was born out of this need—to ensure that every interaction with SIPPO, from mobile apps to physical spaces, feels like part of the same cohesive story.
What you’ll find in Sonata
Sonata is organized into several key sections, each designed to guide you through the process of creating and maintaining high-quality designs:
Explore SIPPO’s design principles and core values.
Learn the design language, including tone, voice, and visual identity.
Access a library of reusable UI components and design patterns.
Follow clear guidelines for creating accessible experiences.
Utilize writing and microcopy guidelines to enhance content.
Integrate custom iconography with Material Design.
Learn how Noto Sans is used through our typography guidelines.
Apply design tokens for consistency in colors, spacing, and more.
Icon Library: A collection of custom icons and their Material Design counterparts.
Available Artifacts
Sonata offers a range of artifacts that you can access and download to streamline your design processes:
Component Library: A Figma library with all reusable UI components.
Design Tokens: A downloadable set of design tokens (colors, spacing, etc.) for use in your designs.
Guideline Documents: Comprehensive guides on design principles, accessibility, and more.
Icon Library: A collection of custom icons and their Material Design counterparts.
Design Language
Unified and Dynamic
SIPPO’s design language is rooted in simplicity and modernity, with a dynamic touch that reflects the vibrant energy of its community.
Clean Lines, Bold Accents
Use clean lines and minimalism as a base, complemented by bold accents that add personality without overwhelming the user.
Consistency Across Platforms
Ensure that the visual and interactive elements are consistent across all platforms, reinforcing SIPPO’s brand identity whether users are interacting on mobile, desktop, or in the physical space.
Design System Governance
Centralized Control, Decentralized Creativity
While the core elements of the Sonata design system are managed centrally to maintain consistency, encourage decentralized innovation by allowing individual teams to propose and experiment with new components within the established guidelines.
Versioning and Updates
Regularly review and update the design system to incorporate new learnings, trends, and feedback. Document changes thoroughly and communicate them effectively to all stakeholders.
Contribution Guidelines
Define clear contribution guidelines for those who want to add to the design system, ensuring that all new components align with SIPPO’s principles and aesthetic.
Microcopy Guidelines
Helpful, Not Overbearing
Microcopy should guide users through tasks without overwhelming them. It should provide just enough information to assist, not distract.
Encouraging and Positive
Use a friendly, encouraging tone that aligns with SIPPO’s brand voice. For example, instead of saying “Error: Invalid input,” say “Oops! Let’s try that again.”
Contextual Relevance
Ensure microcopy is contextually relevant, appearing where and when users need it most. Avoid unnecessary instructions and keep it task-focused.
Iconography Guidelines
Custom Icons
The SIPPO app’s core services are represented by four custom-designed icons (SIPPO Home, Workspaces, Food, and Events). These icons are tailored to reflect the unique identity of each service while maintaining consistency with the overall design language.
Material Design Integration
For all other icons, Google’s Material Design icons are used. Ensure that these are used consistently and don’t clash with SIPPO’s custom icons.
Size & Spacing
In the SIPPO app, icons are primarily used at 24x24 pixels in the bottom navigation. Ensure that icons are clear, readable, and maintain visual harmony at this size.
Design Token Guidelines
Color Palette
Sonata's color palette is purpose-driven, defining colors based on their functional usage—Brand, Neutral, Success, Warning, and Error—to ensure consistent and meaningful application across the design system.
Supporting Colors
In addition to primary brand colors (Brand 20 and Brand 30), Sonata incorporates supporting colors like Onyx, Blue, and Coral as secondary colors. These add versatility and depth to the design while maintaining brand cohesion.
When to Use
Use the primary colors for actions that require user attention or interaction, like buttons or navigation elements. Use secondary colors for less prominent elements, like backgrounds or subtle highlights.
What Not to Do
Avoid using too many bright or contrasting colors in close proximity. Ensure that text on colored backgrounds maintains sufficient contrast for readability.
Primary Colors
Sonata's Brand 20 and Brand 30 are the key colors driving brand recognition and user interaction. Brand 20 is used for high-visibility elements like buttons and links, while Brand 30 is for hover states and subtle highlights.
Typography Guidelines
Font Selection
SIPPO exclusively uses Noto Sans. This font was chosen for its readability, versatility, and modern aesthetic that aligns with the brand’s identity.
Hierarchy & Pairings
Headings: Bold and slightly larger to create a strong visual impact.
Subheadings: Medium weight, providing structure and flow.
Body Text: Regular weight, optimized for readability across different screen sizes.
Captions: Light or regular, smaller size, but still clear and readable.
Establish a clear typographic hierarchy with defined styles for headings, subheadings, body text, and captions. For example:
Usage Guidelines
Use Noto Sans to maintain consistency across all digital and print materials. Avoid using too many different font sizes or weights in close proximity to prevent visual clutter.
What Not to Do
Don’t overuse bold or italic styles. Avoid all-caps text for large bodies of content, as it can be harder to read and may come off as aggressive.
Vision
Brand's Vision
To create an accessible, community-driven workspace that bridges the gap between home and office, offering a seamless blend of professional and social environments.
Design Vision
Reflect SIPPO’s vision by designing experiences that are welcoming, functional, and community-focused, where every interaction feels like a step towards building a meaningful connection.
Accessibility Guidelines
Accessibility is at the core of the Sonata Design System, ensuring that all users, regardless of their abilities, can interact with SIPPO’s products effectively and enjoyably. Our accessibility guidelines provide best practices for designing inclusive experiences, covering everything from color contrast and text size to keyboard navigation and screen reader compatibility. We emphasize the importance of considering accessibility at every stage of the design process, ensuring that our products are not only compliant with standards but also genuinely user-friendly for everyone.
Guidelines
Design Language
Unified and Dynamic
SIPPO’s design language is rooted in simplicity and modernity, with a dynamic touch that reflects the vibrant energy of its community.
Clean Lines, Bold Accents
Use clean lines and minimalism as a base, complemented by bold accents that add personality without overwhelming the user.
Consistency Across Platforms
Ensure that the visual and interactive elements are consistent across all platforms, reinforcing SIPPO’s brand identity whether users are interacting on mobile, desktop, or in the physical space.
Design System Governance
Centralized Control, Decentralized Creativity
While the core elements of the Sonata design system are managed centrally to maintain consistency, encourage decentralized innovation by allowing individual teams to propose and experiment with new components within the established guidelines.
Versioning and Updates
Regularly review and update the design system to incorporate new learnings, trends, and feedback. Document changes thoroughly and communicate them effectively to all stakeholders.
Contribution Guidelines
Define clear contribution guidelines for those who want to add to the design system, ensuring that all new components align with SIPPO’s principles and aesthetic.
Microcopy Guidelines
Helpful, Not Overbearing
Microcopy should guide users through tasks without overwhelming them. It should provide just enough information to assist, not distract.
Encouraging and Positive
Use a friendly, encouraging tone that aligns with SIPPO’s brand voice. For example, instead of saying “Error: Invalid input,” say “Oops! Let’s try that again.”
Contextual Relevance
Ensure microcopy is contextually relevant, appearing where and when users need it most. Avoid unnecessary instructions and keep it task-focused.
Iconography Guidelines
Custom Icons
The SIPPO app’s core services are represented by four custom-designed icons (SIPPO Home, Workspaces, Food, and Events). These icons are tailored to reflect the unique identity of each service while maintaining consistency with the overall design language.
Material Design Integration
For all other icons, Google’s Material Design icons are used. Ensure that these are used consistently and don’t clash with SIPPO’s custom icons.
Size & Spacing
In the SIPPO app, icons are primarily used at 24x24 pixels in the bottom navigation. Ensure that icons are clear, readable, and maintain visual harmony at this size.
Design Token Guidelines
Color Palette
Sonata's color palette is purpose-driven, defining colors based on their functional usage—Brand, Neutral, Success, Warning, and Error—to ensure consistent and meaningful application across the design system.
Supporting Colors
In addition to primary brand colors (Brand 20 and Brand 30), Sonata incorporates supporting colors like Onyx, Blue, and Coral as secondary colors. These add versatility and depth to the design while maintaining brand cohesion.
When to Use
Use the primary colors for actions that require user attention or interaction, like buttons or navigation elements. Use secondary colors for less prominent elements, like backgrounds or subtle highlights.
What Not to Do
Avoid using too many bright or contrasting colors in close proximity. Ensure that text on colored backgrounds maintains sufficient contrast for readability.
Primary Colors
Sonata's Brand 20 and Brand 30 are the key colors driving brand recognition and user interaction. Brand 20 is used for high-visibility elements like buttons and links, while Brand 30 is for hover states and subtle highlights.
Typography Guidelines
Font Selection
SIPPO exclusively uses Noto Sans. This font was chosen for its readability, versatility, and modern aesthetic that aligns with the brand’s identity.
Hierarchy & Pairings
Headings: Bold and slightly larger to create a strong visual impact.
Subheadings: Medium weight, providing structure and flow.
Body Text: Regular weight, optimized for readability across different screen sizes.
Captions: Light or regular, smaller size, but still clear and readable.
Establish a clear typographic hierarchy with defined styles for headings, subheadings, body text, and captions. For example:
Usage Guidelines
Use Noto Sans to maintain consistency across all digital and print materials. Avoid using too many different font sizes or weights in close proximity to prevent visual clutter.
What Not to Do
Don’t overuse bold or italic styles. Avoid all-caps text for large bodies of content, as it can be harder to read and may come off as aggressive.
Vision
Brand's Vision
To create an accessible, community-driven workspace that bridges the gap between home and office, offering a seamless blend of professional and social environments.
Design Vision
Reflect SIPPO’s vision by designing experiences that are welcoming, functional, and community-focused, where every interaction feels like a step towards building a meaningful connection.
Accessibility Guidelines
Accessibility is at the core of the Sonata Design System, ensuring that all users, regardless of their abilities, can interact with SIPPO’s products effectively and enjoyably. Our accessibility guidelines provide best practices for designing inclusive experiences, covering everything from color contrast and text size to keyboard navigation and screen reader compatibility. We emphasize the importance of considering accessibility at every stage of the design process, ensuring that our products are not only compliant with standards but also genuinely user-friendly for everyone.
Guidelines
Principles
Elegant Simplicity
Minimal, Impactful & Effortless Experience
Strip away the unnecessary, focusing on clean, minimalist designs that still convey depth and sophistication. Ensure that the user journey is intuitive, with seamless interactions that make complex tasks feel simple.
Dynamic Energy
Reflecting the Spirit of SIPPO
Infuse designs with the same energy and dynamism that the SIPPO brand stands for—whether it’s through vibrant color choices, fluid animations, or engaging interactions.
Adaptability
Create flexible designs that can easily adapt to different contexts and user needs, keeping the experience lively and fresh.
Human-Centered Design
Empathy-Driven
Every design decision should be rooted in a deep understanding of user needs, ensuring that SIPPO feels personal and relevant to its audience.
Practical Aesthetics
Marry form and function by crafting designs that are not only beautiful but also highly usable, providing real value to users.
Consistency with Flexibility
Unified Visual Language
Maintain a consistent visual language across all platforms, ensuring that SIPPO is instantly recognizable wherever it appears.
Flexible Frameworks
While consistency is key, also allow room for creative expression within the brand’s visual guidelines, enabling innovation within the established framework.
Sustainable Design
Eco-Conscious Choices
Whenever possible, choose design solutions that are sustainable, both in terms of materials and the digital experience (e.g., optimizing for energy efficiency in the digital realm).
Long-Term Thinking
Headings: Bold and slightly larger to create a strong visual impact.
Subheadings: Medium weight, providing structure and flow.
Body Text: Regular weight, optimized for readability across different screen sizes.
Captions: Light or regular, smaller size, but still clear and readable.
Design with longevity in mind, creating products and experiences that can evolve over time without losing their core essence.
Community at the Core
Foster Collaboration & Inclusive Spaces
Design every aspect of SIPPO to encourage collaboration, making it easy for users to connect, share, and work together. Create an environment where everyone feels welcome, ensuring that designs are accessible and inclusive to a diverse audience.
Application of Principles
The design system should embody all these principles, from the choice of components to the color palettes and typography. Every element in Sonata should reinforce SIPPO’s commitment to community, simplicity, energy, and sustainability. Use these principles to guide the creation of new components, ensuring that every new addition to the design system aligns with SIPPO’s values and goals.
Principles
Elegant Simplicity
Minimal, Impactful & Effortless Experience
Strip away the unnecessary, focusing on clean, minimalist designs that still convey depth and sophistication. Ensure that the user journey is intuitive, with seamless interactions that make complex tasks feel simple.
Dynamic Energy
Reflecting the Spirit of SIPPO
Infuse designs with the same energy and dynamism that the SIPPO brand stands for—whether it’s through vibrant color choices, fluid animations, or engaging interactions.
Adaptability
Create flexible designs that can easily adapt to different contexts and user needs, keeping the experience lively and fresh.
Human-Centered Design
Empathy-Driven
Every design decision should be rooted in a deep understanding of user needs, ensuring that SIPPO feels personal and relevant to its audience.
Practical Aesthetics
Marry form and function by crafting designs that are not only beautiful but also highly usable, providing real value to users.
Consistency with Flexibility
Unified Visual Language
Maintain a consistent visual language across all platforms, ensuring that SIPPO is instantly recognizable wherever it appears.
Flexible Frameworks
While consistency is key, also allow room for creative expression within the brand’s visual guidelines, enabling innovation within the established framework.
Sustainable Design
Eco-Conscious Choices
Whenever possible, choose design solutions that are sustainable, both in terms of materials and the digital experience (e.g., optimizing for energy efficiency in the digital realm).
Long-Term Thinking
Headings: Bold and slightly larger to create a strong visual impact.
Subheadings: Medium weight, providing structure and flow.
Body Text: Regular weight, optimized for readability across different screen sizes.
Captions: Light or regular, smaller size, but still clear and readable.
Design with longevity in mind, creating products and experiences that can evolve over time without losing their core essence.
Community at the Core
Foster Collaboration & Inclusive Spaces
Design every aspect of SIPPO to encourage collaboration, making it easy for users to connect, share, and work together. Create an environment where everyone feels welcome, ensuring that designs are accessible and inclusive to a diverse audience.
Application of Principles
The design system should embody all these principles, from the choice of components to the color palettes and typography. Every element in Sonata should reinforce SIPPO’s commitment to community, simplicity, energy, and sustainability. Use these principles to guide the creation of new components, ensuring that every new addition to the design system aligns with SIPPO’s values and goals.
Tokens are the building blocks of Sonata's design system, ensuring consistency and scalability across SIPPO's digital products. They act as the smallest unit of design decisions, allowing for a cohesive experience. By standardizing design attributes like color, spacing, and corner radius, tokens enable flexibility while maintaining brand identity.
Anatomy
At its core, a token is a Name-Value pair, where the Name reflects the intended purpose of the token, and the Value defines the specific attribute it controls (such as color or spacing). Proper naming conventions are crucial as they indicate the token's usage and allow for easy implementation across the design system.
Example
In the above image the token name "Brand 20" uses a follows a hierarchical structure, starting with a category (Surface) and followed by its type or a specific use case or variation (number). This naming convention helps in organizing and retrieving tokens efficiently.
Primitive Tokens
Primitive tokens form the foundation of the color system. They are the raw values that define the base colors for different themes and purposes, such as branding, neutrals, or statuses (e.g., success, error).
Example
In the above image the token name "Success 40" uses the same hierarchical structure, starting with a category (brand) and followed by its type (number).
Color Tokens
Color tokens are derived from the primitive tokens and are organized based on their specific use cases within the system. They bring a layer of abstraction by defining how and where colors should be applied, enhancing flexibility.
Example
Border Inverted: This color token references the primitive token
Border 30for its value.
Content Error: This color token references the primitive token
Error 40for its value
Corner Radius Tokens
Corner radius tokens standardize the rounding of UI elements, such as buttons, cards, and containers. By using increments of 4pt, these tokens maintain visual consistency and can be easily scaled across various components.
Example
Sonata has very small, small, medium, large, very large and ultra large as its border radius tokens with numeric values.
Spacing Tokens
Spacing tokens define the space between UI elements, contributing to the overall layout and visual rhythm of the design. These tokens ensure consistent spacing throughout the interface, making the design more predictable and harmonious.
Example
Sonata has very small, small, medium, medium variant, large, very large and ultra large as its border radius tokens with numeric values.
Implementing Tokens
Tokens are implemented across the design system to ensure consistency and scalability. They are used in Figma for design and translated into CSS variables for development. By adhering to the naming conventions and structured use of tokens, designers and developers can maintain uniformity across all products and platforms.
Best Practices
Reusability: Design tokens should be created with reuse in mind. For example, spacing tokens should apply to padding, margins, and gaps consistently.
Clarity: Names should be descriptive and reflect their purpose to make it easy for both designers and developers to understand and implement.
Scalability: Tokens should allow for the addition of new variants as the design system evolves.
Example
In this example, we’re breaking down the implementation of tokens in the design of the “Add Item” button.
On the first button, we’ve highlighted the spacing within the button using blue and red bars, connected to the respective spacing tokens: Small for the top & bottom paddings inside the button and Large for the left & right paddings. These tokens ensure consistent spacing across the interface.
On the second button, the colors are pointed out and linked to specific color tokens: Surface Primary for the button’s background, Border Primary for the button’s outline, and Content Primary for the text color. These color tokens maintain visual harmony and brand consistency, seamlessly integrating the button within the overall design language.
Tokens
Check out the Figma file
Tokens are the building blocks of Sonata's design system, ensuring consistency and scalability across SIPPO's digital products. They act as the smallest unit of design decisions, allowing for a cohesive experience. By standardizing design attributes like color, spacing, and corner radius, tokens enable flexibility while maintaining brand identity.
Anatomy
At its core, a token is a Name-Value pair, where the Name reflects the intended purpose of the token, and the Value defines the specific attribute it controls (such as color or spacing). Proper naming conventions are crucial as they indicate the token's usage and allow for easy implementation across the design system.
Example
In the above image the token name "Brand 20" uses a follows a hierarchical structure, starting with a category (Surface) and followed by its type or a specific use case or variation (number). This naming convention helps in organizing and retrieving tokens efficiently.
Primitive Tokens
Primitive tokens form the foundation of the color system. They are the raw values that define the base colors for different themes and purposes, such as branding, neutrals, or statuses (e.g., success, error).
Example
In the above image the token name "Success 40" uses the same hierarchical structure, starting with a category (brand) and followed by its type (number).
Color Tokens
Color tokens are derived from the primitive tokens and are organized based on their specific use cases within the system. They bring a layer of abstraction by defining how and where colors should be applied, enhancing flexibility.
Example
Border Inverted: This color token references the primitive token
Border 30for its value.
Content Error: This color token references the primitive token
Error 40for its value
Corner Radius Tokens
Corner radius tokens standardize the rounding of UI elements, such as buttons, cards, and containers. By using increments of 4pt, these tokens maintain visual consistency and can be easily scaled across various components.
Example
Sonata has very small, small, medium, large, very large and ultra large as its border radius tokens with numeric values.
Spacing Tokens
Spacing tokens define the space between UI elements, contributing to the overall layout and visual rhythm of the design. These tokens ensure consistent spacing throughout the interface, making the design more predictable and harmonious.
Example
Sonata has very small, small, medium, medium variant, large, very large and ultra large as its border radius tokens with numeric values.
Implementing Tokens
Tokens are implemented across the design system to ensure consistency and scalability. They are used in Figma for design and translated into CSS variables for development. By adhering to the naming conventions and structured use of tokens, designers and developers can maintain uniformity across all products and platforms.
Best Practices
Reusability: Design tokens should be created with reuse in mind. For example, spacing tokens should apply to padding, margins, and gaps consistently.
Clarity: Names should be descriptive and reflect their purpose to make it easy for both designers and developers to understand and implement.
Scalability: Tokens should allow for the addition of new variants as the design system evolves.
Example
In this example, we’re breaking down the implementation of tokens in the design of the “Add Item” button.
On the first button, we’ve highlighted the spacing within the button using blue and red bars, connected to the respective spacing tokens: Small for the top & bottom paddings inside the button and Large for the left & right paddings. These tokens ensure consistent spacing across the interface.
On the second button, the colors are pointed out and linked to specific color tokens: Surface Primary for the button’s background, Border Primary for the button’s outline, and Content Primary for the text color. These color tokens maintain visual harmony and brand consistency, seamlessly integrating the button within the overall design language.
Tokens
Check out the Figma file
Sonata's components are the foundation of SIPPO's digital interface, designed for consistency, scalability, and seamless brand identity. This page guides you through their creation, design, and implementation, with a focus on core App Services for starters.
Design Principles
Atomic Design Structure
Sonata's components are built using Atomic Design, organizing elements into a hierarchy of atoms, molecules, organisms, templates, and pages.
Building Blocks
Atoms are basic UI elements (like buttons), molecules are combinations of atoms (like a search bar with a button), and organisms are more complex groupings (like a card). Templates and pages bring these together into the full interface.
Modularity & Reusability
This method ensures each component is modular, reusable, and scalable, making the system adaptable and easy to maintain.
App Services Component
The App Services are the core offerings of SIPPO, visually represented on the app's Home Page as a series of cards. These cards are categorized into three variants—Small, Medium, and Large—each designed to reflect the hierarchy and importance of the service it represents.
Principles
Clarity & Brand Consistency: Focused on clear, accessible design with consistent branding.
Visual Hierarchy: Larger cards highlight primary services; smaller cards represent secondary ones.
Clean & Modern Design: Emphasizes readability and easy interaction.
Anatomy
Large Card
Includes a prominent title, a brief 1-line description of the service, an offers pill/ offer label, and a large image that visually represents the service. The shape is a curved rectangle spanning the entire screen width (entire row).
Specifications
Container Size
Width: 328px
Height: 116px
Image Size
Width: 96px
Height: 84px
Pill Size
Width: 70px
Height: 24px
Text Font Size
Title Font Size: 18px Bold
Description Font Size: 12px Regular + 450
Pill Label Font Size: 10px Display Bold
Medium Card
Features a slightly smaller title, description, and image. The design is balanced to maintain visibility without overshadowing the primary service
Specifications
Container Size
Width: 328px
Height: 88px
Image Size
Width: 80px
Height: 56px
Text Font Size
Title Font Size: 18px Bold
Description Font Size: 12px Regular + 450
Small Card
Compact design with a focus on essential information—title, brief description, and image. These cards are squarish and designed to fit neatly in a grid layout.
Specifications
Container Size
Width: 160px
Height: 128px
Image Size
Width: 56px
Height: 48px
Pill Size
Width: 56px
Height: 24px
Text Font Size
Title Font Size: 18px Bold
Description Font Size: 12px Regular + 450
Pill Label Font Size: 10px Display Bold
Hierarchy
Example
Large card: Always placed at the top of the Home Page, occupying the full width of the first row. Workspaces always remains at the top as it is the primary service offered by SIPPO.
Small card: Positioned side by side in the second row, occupying equal space. Dine & Eats and Events use small card as it is currently the secondary services offered by SIPPO.
Medium card: Centered in the last row, slightly larger than the small cards but smaller than the large card. Meeting rooms and Pulse use medium cards.
Usage
App Services cards are the primary way users interact with SIPPO's core offerings. They should be used thoughtfully to highlight key services, following the established visual hierarchy. Each card should provide a clear title, concise description, and a visual that aligns with SIPPO’s brand identity, ensuring a seamless and intuitive experience for the user.
Large Card
Used to direct users to the primary service of the business. The large card is designed to draw immediate attention. This card should always occupy the highest position in the app services section in the home page of the app and only one large card can be used in the page at a time.
Do
Always place it at the top most position to let users know this is the primary service.
Don't
Do not place it like this because it looks cool or because there is some visual balance.
Do
Only one large card should be used in the app services section.
Don't
Do not use two large cards even if two business services are having equal importance.
Medium Card
Used to direct users to the Tertiary services of the business. It's designed to be easily accessible yet distinguishable from the primary service. This card should occupy the lowest position in the app services section in the home page of the app. Only one card should be used in a row.
Do
Place it at the bottom of the app services section.
Don't
Do not place it at a higher position in the app section. Follow card hierarchy.
Do
Only one medium card should be used in a row. You can have multiple rows having medium cards.
Don't
Do not use more 1 medium card in a row as this card has lowest priority compared to other cards.
Small Card
Used to direct users to the Secondary services of the business. The compact design of these cards ensure that these services are accessible without overpowering the main service. This card should occupy the second highest position in the app services section in the home page of the app. A maximum of two cards can exist in the row.
Do
Place it below the large cards.
Don't
Do not place it at the top position.
Do
Put a maximum of 2 cards per row.
Don't
Do not use more than 2 cards in a row.
Best Practices
Adhere to Brand Consistency
Do
Use the designated color tokens and typography from the design system to ensure each card aligns with SIPPO’s brand identity.
Don't
Avoid using off-brand colors, fonts, or inconsistent styles that might break the cohesive feel of the UI.
Keep Information Concise
Do
The titles and descriptions should be concise, yet informative. Users should be able to understand the purpose of the service at a glance without needing to read through excessive details.
Don't
Long titles or descriptions will make it difficult for the user to understand the service being provided and will move away from using them.
Leverage Imagery Effectively
Do
Ensure the images used within the cards are relevant to the service they represent and align with SIPPO’s visual identity.
Don't
Avoid generic or unrelated visuals that does not align with SIPPO's visual identity.
Explore more components on Sonata's Figma file
Explore Sonata
Components
🤯 Fun Fact
This project is the most content rich and technically complex(tool wise) project I have ever done. This micro app made use of about 87 variables (including design tokens) and a lot of conditional logic in Figma in order to achieve the awesome micro app that you will experience in this project.
P.S. This micro app is best experienced on an android mobile device.
Micro app link↗
Sonata's components are the foundation of SIPPO's digital interface, designed for consistency, scalability, and seamless brand identity. This page guides you through their creation, design, and implementation, with a focus on core App Services for starters.
Design Principles
Atomic Design Structure
Sonata's components are built using Atomic Design, organizing elements into a hierarchy of atoms, molecules, organisms, templates, and pages.
Building Blocks
Atoms are basic UI elements (like buttons), molecules are combinations of atoms (like a search bar with a button), and organisms are more complex groupings (like a card). Templates and pages bring these together into the full interface.
Modularity & Reusability
This method ensures each component is modular, reusable, and scalable, making the system adaptable and easy to maintain.
App Services Component
The App Services are the core offerings of SIPPO, visually represented on the app's Home Page as a series of cards. These cards are categorized into three variants—Small, Medium, and Large—each designed to reflect the hierarchy and importance of the service it represents.
Principles
Clarity & Brand Consistency: Focused on clear, accessible design with consistent branding.
Visual Hierarchy: Larger cards highlight primary services; smaller cards represent secondary ones.
Clean & Modern Design: Emphasizes readability and easy interaction.
Anatomy
Large Card
Includes a prominent title, a brief 1-line description of the service, an offers pill/ offer label, and a large image that visually represents the service. The shape is a curved rectangle spanning the entire screen width (entire row).
Specifications
Container Size
Width: 328px
Height: 116px
Image Size
Width: 96px
Height: 84px
Pill Size
Width: 70px
Height: 24px
Text Font Size
Title Font Size: 18px Bold
Description Font Size: 12px Regular + 450
Pill Label Font Size: 10px Display Bold
Medium Card
Features a slightly smaller title, description, and image. The design is balanced to maintain visibility without overshadowing the primary service
Specifications
Container Size
Width: 328px
Height: 88px
Image Size
Width: 80px
Height: 56px
Text Font Size
Title Font Size: 18px Bold
Description Font Size: 12px Regular + 450
Small Card
Compact design with a focus on essential information—title, brief description, and image. These cards are squarish and designed to fit neatly in a grid layout.
Specifications
Container Size
Width: 160px
Height: 128px
Image Size
Width: 56px
Height: 48px
Pill Size
Width: 56px
Height: 24px
Text Font Size
Title Font Size: 18px Bold
Description Font Size: 12px Regular + 450
Pill Label Font Size: 10px Display Bold
Hierarchy
Example
Large card: Always placed at the top of the Home Page, occupying the full width of the first row. Workspaces always remains at the top as it is the primary service offered by SIPPO.
Small card: Positioned side by side in the second row, occupying equal space. Dine & Eats and Events use small card as it is currently the secondary services offered by SIPPO.
Medium card: Centered in the last row, slightly larger than the small cards but smaller than the large card. Meeting rooms and Pulse use medium cards.
Usage
App Services cards are the primary way users interact with SIPPO's core offerings. They should be used thoughtfully to highlight key services, following the established visual hierarchy. Each card should provide a clear title, concise description, and a visual that aligns with SIPPO’s brand identity, ensuring a seamless and intuitive experience for the user.
Large Card
Used to direct users to the primary service of the business. The large card is designed to draw immediate attention. This card should always occupy the highest position in the app services section in the home page of the app and only one large card can be used in the page at a time.
Do
Always place it at the top most position to let users know this is the primary service.
Don't
Do not place it like this because it looks cool or because there is some visual balance.
Do
Only one large card should be used in the app services section.
Don't
Do not use two large cards even if two business services are having equal importance.
Medium Card
Used to direct users to the Tertiary services of the business. It's designed to be easily accessible yet distinguishable from the primary service. This card should occupy the lowest position in the app services section in the home page of the app. Only one card should be used in a row.
Do
Place it at the bottom of the app services section.
Don't
Do not place it at a higher position in the app section. Follow card hierarchy.
Do
Only one medium card should be used in a row. You can have multiple rows having medium cards.
Don't
Do not use more 1 medium card in a row as this card has lowest priority compared to other cards.
Small Card
Used to direct users to the Secondary services of the business. The compact design of these cards ensure that these services are accessible without overpowering the main service. This card should occupy the second highest position in the app services section in the home page of the app. A maximum of two cards can exist in the row.
Do
Place it below the large cards.
Don't
Do not place it at the top position.
Do
Put a maximum of 2 cards per row.
Don't
Do not use more than 2 cards in a row.
Best Practices
Adhere to Brand Consistency
Do
Use the designated color tokens and typography from the design system to ensure each card aligns with SIPPO’s brand identity.
Don't
Avoid using off-brand colors, fonts, or inconsistent styles that might break the cohesive feel of the UI.
Keep Information Concise
Do
The titles and descriptions should be concise, yet informative. Users should be able to understand the purpose of the service at a glance without needing to read through excessive details.
Don't
Long titles or descriptions will make it difficult for the user to understand the service being provided and will move away from using them.
Leverage Imagery Effectively
Do
Ensure the images used within the cards are relevant to the service they represent and align with SIPPO’s visual identity.
Don't
Avoid generic or unrelated visuals that does not align with SIPPO's visual identity.
Explore more components on Sonata's Figma file
Explore Sonata
Components
🤯 Fun Fact
This project is the most content rich and technically complex(tool wise) project I have ever done. This micro app made use of about 87 variables (including design tokens) and a lot of conditional logic in Figma in order to achieve the awesome micro app that you will experience in this project.
P.S. This micro app is best experienced on an android mobile device.
Micro app link↗
More resources coming soon!
Artifacts
More resources coming soon!
Artifacts
SECRET PAGES
SECRET PAGES
MY SOCIALS
@2024 Vishal's Portfolio. All rights reserved.
Brainstormed in Figma & designed in Framer
Brainstormed in Figma & designed in Framer