Design Foundations
The building blocks of Retailys UI Design Framework. Colors, typography, icons, and visual assets that ensure consistency across Retailys and Chatlys.
Color System
Semantic color palettes used across every component and surface.
Brand
25
--color-brand-25
50
--color-brand-50
100
--color-brand-100
200
--color-brand-200
300
--color-brand-300
400
--color-brand-400
500
--color-brand-500
600
--color-brand-600
700
--color-brand-700
800
--color-brand-800
900
--color-brand-900
950
--color-brand-950
Gray
25
--color-gray-25
50
--color-gray-50
100
--color-gray-100
200
--color-gray-200
300
--color-gray-300
400
--color-gray-400
500
--color-gray-500
600
--color-gray-600
700
--color-gray-700
800
--color-gray-800
900
--color-gray-900
950
--color-gray-950
Error
25
--color-error-25
50
--color-error-50
100
--color-error-100
200
--color-error-200
300
--color-error-300
400
--color-error-400
500
--color-error-500
600
--color-error-600
700
--color-error-700
800
--color-error-800
900
--color-error-900
950
--color-error-950
Warning
25
--color-warning-25
50
--color-warning-50
100
--color-warning-100
200
--color-warning-200
300
--color-warning-300
400
--color-warning-400
500
--color-warning-500
600
--color-warning-600
700
--color-warning-700
800
--color-warning-800
900
--color-warning-900
950
--color-warning-950
Success
25
--color-success-25
50
--color-success-50
100
--color-success-100
200
--color-success-200
300
--color-success-300
400
--color-success-400
500
--color-success-500
600
--color-success-600
700
--color-success-700
800
--color-success-800
900
--color-success-900
950
--color-success-950
Typography Scale
The complete type scale from display headings to body text.
Display 2xl
72px / 90px
text-display-2xlThe quick brown fox jumps over the lazy dog
Display xl
60px / 72px
text-display-xlThe quick brown fox jumps over the lazy dog
Display lg
48px / 60px
text-display-lgThe quick brown fox jumps over the lazy dog
Display md
36px / 44px
text-display-mdThe quick brown fox jumps over the lazy dog
Display sm
30px / 38px
text-display-smThe quick brown fox jumps over the lazy dog
Display xs
24px / 32px
text-display-xsThe quick brown fox jumps over the lazy dog
Text xl
20px / 30px
text-xlThe quick brown fox jumps over the lazy dog
Text lg
18px / 28px
text-lgThe quick brown fox jumps over the lazy dog
Text md
16px / 24px
text-mdThe quick brown fox jumps over the lazy dog
Text sm
14px / 20px
text-smThe quick brown fox jumps over the lazy dog
Text xs
12px / 18px
text-xsThe quick brown fox jumps over the lazy dog
Icon Library
1000+ icons from @untitledui/icons.
Logo Variants
Brand logos used throughout the platform.
Logos
UIRetailys
ChatlysIllustrations
Decorative illustration components for empty states and feature highlights.
Types
All four illustration types at medium size.
Colors
The cloud illustration rendered in all semantic color families.
Background Patterns
Repeating SVG patterns used as decorative backgrounds.
Patterns
Payment Icons
Payment method icons for checkout and billing UI.
Miscellaneous
Small utility visuals: dots, QR codes, and dividers.
Dot Icons
Colored status dots in two sizes.
QR Code
Scannable QR codes at multiple sizes.
Section Divider
A horizontal rule component for separating content areas.
Social Icons
Brand icons for social media and third-party services.