UI Launch Design System

Welcome to the official documentation of our Design System for React Native. This library was created to provide a solid, accessible, consistent, and reusable visual foundation for building modern mobile applications quickly and with quality.

📖 What is a Design System?

A Design System is a collection of reusable components, design tokens, and guidelines that help teams create consistent and cohesive user interfaces across applications. It provides a shared vocabulary and set of tools for designers and developers to work together effectively, ensuring that the user experience is seamless and visually appealing. A design system typically includes:

• UI Components: Pre-built, customizable components that can be used to build user interfaces.
• Design Tokens: Reusable design variables that define colors, typography, spacing, and other visual properties.
• Guidelines: Best practices and standards for using the components and tokens to ensure consistency across applications.

🚀 What does the library include?

• UI Components accessible and customizable divided into atomic levels:

  • Atoms: Button, TextInput, Switch, Tooltip, etc.
  • Organisms: SearchBar, Tabs, OfferCard, PlaceCard.
  • Templates like OTPInput.

• Tokens for design: a set of reusable design tokens that allow you to create a consistent and scalable design system. These tokens are used to define the visual properties of your components, such as colors, typography, spacing, and more.

  • Color palette (colors)
  • Spacing (spacing)
  • Borders (radii), border widths (strokeWidths)
  • Typography (custom styles and sizes)

• ThemeProvider that wraps your entire app to apply declarative styles with security and consistency.\

⚙️ Technologies used

This design system is built on a modular architecture using high-performance and scalable tools:

• @shopify/restyle: for styles and tokens with theme support.
• react-native-svg: for icons and vector graphics.
• react-native-reanimated: for animations and transitions.
• react-native-gesture-handler: for handling gestures and touch events.
• @gorhom/bottom-sheet: for bottom sheets and modals.
• Integrated fonts with reusable typography styles.

📦 What's the purpose of create this library?

• Promote visual consistency across multiple teams and projects.
• Accelerate the development process by providing a set of reusable components.
• Simplify customization through the use of tokens.
• Facilitate collaborative design between development and design teams.

🧠 Who is it for?

This design system is designed for both frontend developers and designers working with mobile teams in React Native, looking for a scalable way to create products.

• Frontend Developers: who want to create consistent and reusable components for their applications.
• Designers: who want to create a consistent and scalable design system for their applications.
• Product Managers: who want to ensure that their applications have a consistent and high-quality user experience.

---

Continue with the Installation to integrate the library into your project.