Style Guide

A comprehensive design system built for React Native applications. Featuring consistent colors, typography, spacing, and accessibility guidelines that scale across all devices and platforms.

Design Principles

Our design system is built on modern principles that prioritize consistency, accessibility, and scalability

Clarity First

Every element has a clear purpose and meaning

Consistency

Unified patterns and styling throughout

Accessibility

WCAG 2.1 AA compliant design

Responsive

Adapts to all screen sizes and devices

Design System Components

Explore our comprehensive design system with colors, typography, spacing, and accessibility guidelines

Color Palette

Primary

#4E4DD7

Main brand color

Primary actions, links, brand elements

Secondary

#00CCCC

Secondary brand color

Secondary actions, accents

Success

#22C55E

Success states

Success messages, positive states

Warning

#FFAB00

Warning states

Warnings, caution states

Error

#FF5630

Error states

Errors, destructive actions

Info

#00B8D9

Information states

Information, neutral states

Background

#FAFAFB

Main background

App background, card backgrounds

Text

#1B1D20

Primary text

Main text content

Gray 1

#323436

Secondary text

Secondary text, labels

Gray 5

#98999B

Border color

Borders, dividers

Gray 9

#F4F4F4

Light background

Card backgrounds, sections

Dark Mode Support

Light Mode

Optimized for bright environments

Dark Mode

Easy on the eyes in low light

Ready to Build Beautiful Apps?

Start building with our comprehensive design system and create consistent, accessible React Native applications that users love.