Design System
Our comprehensive design guidelines, principles, and standards for creating consistent, accessible, and beautiful user experiences across all AriaFrame products.
Consistency
Maintain visual consistency across all interfaces and components
Accessibility
Design for all users with inclusive and accessible interfaces
Simplicity
Keep interfaces clean and intuitive for better user experience
Responsiveness
Ensure optimal experience across all devices and screen sizes
Color Palette
Primary Purple
Hex:
#6D41B8Usage:Main brand color, primary actions
Secondary Purple
Hex:
#8B5CF6Usage:Secondary actions, highlights
Accent Purple
Hex:
#A855F7Usage:Accents, tertiary elements
Dark Purple
Hex:
#3A2168Usage:Backgrounds, containers
Light Purple
Hex:
#E7D4FFUsage:Text on dark backgrounds
Pale Purple
Hex:
#D6B3FFUsage:Subtle text, borders
Typography
Display Large
Hero headlines, page titles
text-6xlfont-boldDisplay Medium
Section headers, major titles
text-5xlfont-boldDisplay Small
Subsection headers
text-4xlfont-semiboldHeading Large
Content headers
text-3xlfont-semiboldHeading Medium
Subcontent headers
text-2xlfont-mediumHeading Small
Minor headers
text-xlfont-mediumBody Large
Lead paragraphs, emphasis
text-lgfont-normalBody Medium
Regular body text
text-basefont-normalBody Small
Captions, metadata
text-smfont-normalSpacing System
4px
p-1Tight spacing, icons
8px
p-2Small components, buttons
12px
p-3Medium components
16px
p-4Standard padding
24px
p-6Section padding
32px
p-8Large section padding
48px
p-12Page padding
Best Practices
Do's
- Use consistent spacing and typography
- Ensure sufficient color contrast
- Test on multiple devices
- Follow accessibility guidelines
Don'ts
- Mix too many colors
- Use inconsistent spacing
- Ignore mobile responsiveness
- Overcomplicate interfaces