Jovia Design System

Summary

We have collaborated with design advocates and with Design System Designers from the industry to provide the design community with the best design system for you to use both as an individual and as a team.

All the components are fully responsive, using auto-layout, and combined to variant groups. All instances are powered by main components to allow users apply changes to components from one single source of truth. Keep reading for the whole list of components and features.

_____________________

Component List:

• Actions: Fab Button, FAB Extended, Button, Button Group, Quick Actions
• Containers: Backdrop, Action Sheet, Modal (pro)
• Navigation: Navigation Bar, Tab Bar, Bottom Bar, Search, Tabs, Side Bar
• Status: Label, Status Light, Loader, Progress Circle, Progress Bar, Pagination Dots
• Feedback: Tooltip, Counter
• Inputs: Choice, Toggle
• Others: Divider
• Data Visualisation + Finance: Card, Graph, Graph Composition, Timeframe, Card Details, Card Item, Card List, Payment Categories, Transaction Item, Transaction List, Payment Method Icons, Payment Method List, Currencies
• Social: Avatar Item, Avatar Circle, Avatar Square, Avatar Group, User, Message Bubble, Row, Chat Composer, Composer mini, Photo Gallery, Emoji, User Card
• Native Components: Status Bar, Home indicators, Keyboards

_____________________

Main Features

Video Tutorials

Both versions come with video tutorials to help you get started. We have added all the documentation and video links in the Figma file. 

Color System

Jovia comes with an advanced color system supporting both light and dark themes with multiple combinations guaranteed to pass WCAG contrast ratio. Transparent variants for blacks and whites are also included, which are handy for UI components that need to blend into colored backgrounds.

Main Components

For each component we have added a 'main' component which acts as a single source of truth. With Jovia, we provide a control action for all the components. We have also added documentation to help you understand the steps you need to take to change the properties of the component.

Editable components without detaching

We can’t always assume what content a designer wants to place in a component. Such examples are the ‘Tooltip’ and ‘Modal’. In this video, we will use the 'Tooltip' as an example to show you how one can use the content placeholder to populate the component with a custom component, while still having one single control point of the component. 

Usage Examples

For each component you will find specific usage examples in a mobile layout. All of the example screens are using components from the library and are not custom. 

Advanced Icon System

The icon container can be used as a placeholder. The icon container allow designers to use a specific scale and not use random icon sizes. The beauty of the icon container is that it is being used in the main components to control the size of the icon in all the instances. You have the option to change the scale that suits your product.

Screens and Dark Mode

With Jovia Pro you will get 70+ screen examples which were built using Jovia.  All the screens are in light and dark mode. Below is a video showcasing the screens and an example of how easy it is to update screens from light to dark mode.

_____________________

FAQs

Who are we?
We are a small group of designers that worked in renowned design industries. Our goal is to deliver and share the best practices we have learned with the design community. We have more cool stuff coming up, stay tuned! 

Can I use this design system for a client’s end product or for my business?
Yeah! We have built Jovia for that reason. 

Can I sell or distribute this product (Jovia)?
No, we do not allow anyone to sell or distribute this product.

What tools do I need to use Jovia?
Figma

How can I reach you?
We are here to help! You can reach us on info@readydesign.io or instagram