SpellingJoy Branding Guide
A comprehensive guide to our application's design system and UI components
Color Palette
#2D5A27
primary-DEFAULT
#93D789
primary-light
#FFE135
accent-DEFAULT
#FFF4B8
accent-light
#9281e8
hq-purple-DEFAULT
#ff8a70
hq-coral-DEFAULT
#1A1A1A
avocado-text
#0E121A
Custom dark background
Typography
Headings
Heading 1 (4xl)
Heading 2 (3xl)
Heading 3 (2xl)
Heading 4 (xl)
Heading 5 (lg)
Heading 6 (base)
Body Text
Base text (base): This is the standard text size used for most body content in our application.
Small text (sm): Used for secondary information, labels, and less important text.
Extra small text (xs): Used for captions, footnotes, and other fine details.
UI Components
Buttons
Action Cards
List Items
Weekly Spelling Test
Science Vocabulary
Navigation
Profile Cards
Our new profile card design for user personas, based on the provided example:
Jenny
24 y.o. • Middle salary rate
User story
As a girl, I want to be able to get help carrying luggage, so I don't have to lift heavy things myself.
Job story
When I travel to unfamiliar airports, I want to navigate the gates quickly and easily, so I don't miss my flight.
ProfileCard Component
Reusable component for user personas, designed to match our brand aesthetics while maintaining the layout from the example design.
View all profile card examplesImplementation Notes
Guidelines for Developers
Consistency: Maintain consistent spacing, border radius, and shadow styles across components.
Responsive Design: Components should be responsive and maintain their visual integrity across screen sizes.
Accessibility: Ensure sufficient color contrast for text readability, especially for accent colors.
Branding Hierarchy: Primary green should be used sparingly for emphasis. Accent yellow is our signature color for CTAs.
UI Elements: Round corners (border-radius) should be consistent - buttons and small elements use rounded-lg (0.5rem), larger containers and cards use rounded-xl (0.75rem) or rounded-3xl (1.5rem) for bigger components.