Colors

Primary Dark (#171818)

Surface Dark (#1E1E1E)

Component Dark (#2C2C2C)

Accent (#171818)

Primary Text (#E0E0E0)

Secondary Text (#B0B0B0)

Success (#4CAF50)

Error (#F44336)

Good Practices:

Maintain high contrast for accessibility.
Use accent color sparingly for primary actions and highlights.
Ensure color consistency across all components.
Test color combinations for readability on different screen types.

Typography (Baloo 2)

Headline 1 (H1)

Baloo 2 Bold, 48px (Scaled)

Headline 2 (H2)

Baloo 2 SemiBold, 36px (Scaled)

Headline 3 (H3)

Baloo 2 Medium, 24px (Scaled)

Body Large

Baloo 2 Regular, 20px (Scaled)

Body Medium (Default)

Baloo 2 Regular, 16px

Body Small / Caption

Baloo 2 Regular, 14px

Good Practices:

Use a consistent typographic scale.
Limit the number of font weights used (e.g., Regular, Medium, SemiBold, Bold).
Ensure sufficient line height for readability (e.g., 1.5x font size).
Prioritize legibility and readability across different screen sizes.

Buttons

Good Practices:

Clearly differentiate primary and secondary actions.
Ensure buttons have adequate tap targets (min 44x44px).
Provide visual feedback on interaction (hover, active, focus states).
Use clear and concise button labels.

Input Fields

Email Address

Password

Input with Error

Please enter a valid value.

Good Practices:

Provide clear labels for all input fields.
Use placeholder text as a hint, not a label.
Offer clear visual feedback for focus and error states.
Ensure inputs are easily tappable and usable on mobile.

Cards

Content Card Title

This is a short description of the content within the card. It can span multiple lines.

List Item Card

Subtitle or secondary info

chevron_right

Good Practices:

Use consistent padding and spacing within cards.
Ensure clear hierarchy of information (title, subtitle, body, actions).
Optimize images for fast loading.
Maintain a consistent visual style for all cards.

Icons (Material Icons)

home

library_music

settings

account_circle

play_arrow

pause

skip_next

skip_previous

volume_up

favorite

more_horiz

Good Practices:

Use icons consistently and purposefully.
Ensure icons are recognizable and their meaning is clear.
Provide text labels or tooltips for icons where meaning might be ambiguous.
Use SVGs or icon fonts for scalability and sharpness.
Maintain a consistent icon style (e.g., filled, outlined).

Tabs / Pills

Calm Relax Focus Anxious

Good Practices:

Clearly indicate the active tab.
Ensure tabs are easy to tap and navigate.
Use concise and descriptive tab labels.
For pills/tags, ensure they are visually distinct and serve a clear purpose (e.g., filtering, categorization).

Spacing & Layout

Utilize a consistent spacing scale (e.g., multiples of 4px or 8px) for margins, paddings, and gaps between elements. Tailwind CSS's default spacing scale is a good starting point.

p-2 (8px padding)

p-4 (16px padding)

p-6 (24px padding)

Item 1

Item 2 (space-x-4 / 16px gap)