30X

Design System

Overview

Typography

Icons

Colors

Buttons

Forms & Filters

Cards & Lists

Data Display

Feedback

Create Invoice

Layout

Preview Page

Design System

30X Components Library

A comprehensive component library reflecting the 30X brand identity. Geometric shapes, bold typography, and a high-contrast color palette designed for impact.

Scalable

Built with Reflex & Python for rapid expansion and consistent implementation across all digital products.

Accessible

High contrast ratios and semantic HTML ensure the content is accessible to everyone.

Modern

Utilizing the Manrope typeface and geometric principles for a contemporary aesthetic.

Typography

Manrope

Responsive text components with semantic hierarchy and mobile-optimized sizing.

The 30X typography system uses Manrope font with consistent sizing scales:

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Body Text

This is body text with standard styling and proper line height for readability. It's used for main content paragraphs throughout the application.

This is secondary/help text used for descriptions, hints, and supporting information.

This is caption text for small labels, metadata, and timestamps.

Links & Inline Elements

Link:

This is a clickable link

Code:

const example = 'inline code';

Badges

Default

Success

Warning

Error

Icons

SVG

Custom SVG icons built with Reflex's rx.el.svg namespace. For standard icons, use rx.icon() with the Lucide library.

These brand-specific icons are from the 30X Vite design system:

30X Brand Icons

icon_logo

Brand hexagon logo

icon_grow

Growth chart bars

icon_collaborate

Network nodes

icon_mindset

Grid squares

icon_arrow_right

Navigation arrow

icon_download

Download action

icon_menu

Hamburger menu

Usage Example

Python Import

from reflex_app.components.ui.icons import (
    icon_logo,
    icon_grow,
    icon_collaborate,
)

# Use in your component:
icon_logo(size=40, color="hsl(var(--app-brand-black))")
icon_grow(size=24)  # Uses currentColor

Lucide Icons (rx.icon)

For standard icons, use Reflex's built-in Lucide integration:

rx.icon("home", size=24)

Colors

Palette

Black Potencia

#000000

Amarillo X

#E9FF7B

Beige Crecimiento

#DDD4C0

Gris Net

#F1F1F1

Gradients

Gradient 01

Gradient 02

Buttons

Interactions

Interactive button components with multiple variants and sizes.

Buttons support click handlers and integrate with the toast notification system:

Primary Variants

Outline & Ghost Variants

Button Sizes

Forms & Filters

Inputs

Modern form inputs with enhanced styling and validation states.

Inputs support labels, help text, validation, and various input types:

Form Inputs

Name

Enter your full name

We'll never share your email

Search & Textarea

Type to search

Message

Multi-line text input

Validation States

Success Input

This input is valid

Error Input

This field is required

Cards & Lists

Containers

Container components with different variants for various use cases.

Cards provide consistent spacing, borders, and shadows:

Default Card

Standard card with default styling and consistent padding throughout the component.

Interactive Card

Card with hover effects designed for clickable content with smooth transitions.

Elevated Card

Elevated card for highlighting important features with enhanced shadows.

Enhanced Card

Enhanced card with modern shadows and smooth animations for a premium feel.

Perfect for login forms, modals, and premium content areas.

Complete Card Example

This card demonstrates all the card sub-components working together: header, content, and footer sections with proper spacing.

Cards automatically handle padding and borders between sections.

List Card Stack

Interactive card list with search, selection, and detail views. Click a card to view details, or right-click for context menu.

Employees

All employees sorted A-Z

Search Employees

No employees available.

Data Display

Tables

Mobile-responsive tables with horizontal scroll and touch-friendly controls.

Tables support multiple variants for different visual styles:

Default Table

Employee	Role	Department	Status
Alex Johnson	Software Engineer	Engineering	active
María González	Data Scientist	Engineering	active
Priya Patel	Product Manager	Product	on_leave

Striped Table

Employee	Role	Department	Status
Alex Johnson	Software Engineer	Engineering	active
María González	Data Scientist	Engineering	active
Priya Patel	Product Manager	Product	on_leave

Bordered Table

Employee	Role	Department	Status
Alex Johnson	Software Engineer	Engineering	active
María González	Data Scientist	Engineering	active
Priya Patel	Product Manager	Product	on_leave

Sortable and searchable data tables with pagination.

Includes sorting, search filtering, and page navigation:

Advanced Data Table

Employee ↕	Role ↕	Department ↕	Status ↕

Showing 0 of 0 entries

Client-side tables with sorting, pagination, filtering, and CSV export.

All data loaded upfront for instant filtering and sorting:

Database Table with Filters

Status

Showing 0 of 0 records

Employee Name ↕	Role ↕	Department ↕	Status ↕	Experience (Years) ↕

Database Table - Server Mode

Database Table - Server-Powered

Fetches data via ServerTableState with server-side pagination, sorting, and reusable filter widgets. Includes CSV export, adjustable page size, and clickable rows that trigger toast notifications.

Search Employees

Status

Department

Experience range (years)

2.0

—

9.0

Showing 0 of 0 records

Employee ↕	Role ↕	Department ↕	Status ↕	Salary ↕	Experience (Years) ↕	Hire Date ↕
No records match your filters.

Page 1 / 1

Feedback

Notifications

Popup Component

Reusable Popup

Use the shared popup component to maintain consistent dialog styling and behavior across the application. The state helper ensures visibility can be managed from anywhere.

No acknowledgements yet.

Toast Notifications

Reusable SRA toast system with native Reflex notifications, brand styling, and multiple usage patterns.

Toast Examples

Click the buttons below to see native Reflex toast notifications with SRA brand styling:

✨ Features: Native Reflex icons, SRA Blue (Info/Success) & Red (Warning/Error), 16px border radius, auto close button

Create Invoice

Slide-over

Create Invoice Slide-Over

Vite Design Recreation (Mock)

Trigger the slide-over to see the Create Invoice design in Reflex. This is a UI-only mock (no API calls).

Layout

Responsive

Responsive Design Features

Mobile-first responsive design with optimized layouts and touch-friendly interfaces.

📱 Mobile Typography

Headings and text automatically scale down on mobile devices for better readability:

H1 Heading (1.75rem mobile)

H2 Heading (1.375rem mobile)

H3 Heading (1.125rem mobile)

Body text adjusts to 0.9rem on mobile for optimal reading experience.

📋 Touch-Optimized Forms

Inputs designed for mobile interaction:

Mobile Input

✓ iOS zoom prevention with 16px minimum font size

• 44px minimum touch target height • Consistent 10px vertical padding • 16px minimum font size on mobile • Full-width textarea with proper box-sizing

📊 Scrollable Tables

Tables maintain functionality on mobile with horizontal scroll:

Feature	Desktop	Tablet	Mobile
Font Size	1rem	0.9rem	0.85rem
Padding	16px	12px	8px
Scroll	None	Auto	Touch + Momentum

Swipe horizontally on mobile to see all columns →

Layout Components

Container, grid, and layout utilities for consistent page structure.

Responsive Grid

Grid Item 1