chalk.ai
chalk.ai Design System
A playful yet professional design system for English learning materials.
Color Palette
Primary Colors
Accent Colors
Action/Warning Colors
Neutral Colors
Color Usage Guidelines
- Primary Blue: Main theme color, used for primary actions, navigation, and key UI elements
- Yellow: Highlights, accents, important notes, and interactive elements
- Red: Warnings, errors, destructive actions, and important alerts
- Neutrals: Backgrounds, text, borders, and subtle UI elements
Typography
Font Families
Poppins
Used for headings and emphasis
Weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
Nunito
Used for body text and UI elements
Weights: 400 (Regular), 600 (SemiBold), 700 (Bold)
Headings
Heading 1 (36px)
Heading 2 (30px)
Heading 3 (24px)
Heading 4 (20px)
Heading 5 (18px)
Heading 6 (16px)
Body Text
Large Body (18px): Used for introductory paragraphs or emphasized content.
Body (16px): Default text size for most content throughout the application.
Small (14px): Used for secondary information, captions, and helper text.
Extra Small (12px): Used for legal text, footnotes, and very minor details.
Typography Guidelines
- Maintain a line height of 1.5 for body text to ensure readability
- Use appropriate contrast between text and background (WCAG AA compliance)
- Limit line length to 60-80 characters for optimal readability
- Use bold (700) or semibold (600) for emphasis rather than italics
- Keep text left-aligned for better readability (except for specific design elements)
Components
Buttons
Cards
Standard Card
This is a standard card with an image, heading, and text content.
Accent Card
This card has an accent border to highlight important information or featured content.
Interactive Card
This entire card is clickable with hover effects to indicate interactivity.
Form Elements
Checkbox & Radio
Alerts & Notifications
Success Alert
Your changes have been saved successfully.
Information Alert
This feature will be available in the next update.
Warning Alert
Your subscription will expire in 3 days.
Error Alert
There was a problem processing your request.
Tabs
This is the content for the active tab.
Badges
Modal
Modal Title
This is the content of the modal. It can contain text, forms, or other components.
UI Tone & Visual Guidelines
UI Tone
- Friendly & Approachable:
Use conversational language that makes teachers feel comfortable and supported. Avoid technical jargon when possible.
- Clear & Concise:
Instructions and messaging should be straightforward and easy to understand, respecting teachers' time and cognitive load.
- Encouraging:
Celebrate small wins and provide positive reinforcement throughout the user journey.
- Professional with Playfulness:
Maintain a professional tone while incorporating playful elements that reflect the creative nature of teaching.
Visual Guidelines
- Clean & Minimal:
Prioritize white space and clean layouts to reduce visual clutter and cognitive load.
- Consistent Spacing:
Use a consistent spacing system (8px increments) for margins, padding, and layout.
- Rounded Corners:
Use rounded corners (8px-12px radius) for containers and buttons to create a friendly, approachable feel.
- Subtle Shadows:
Implement subtle shadows to create depth and hierarchy without overwhelming the interface.
- Iconography:
Use simple, consistent line icons with rounded corners that match the overall design aesthetic.
- Illustrations:
When used, illustrations should be simple, colorful, and reflect the chalk-inspired theme.
Sample UI
chalk.ai
My Learning Materials
Create, organize, and share your English learning materials.
Vocabulary List
BeginnerCommon food vocabulary with images and example sentences.
Grammar Quiz
IntermediatePast tense vs. present perfect tense practice quiz.
Conversation Prompts
AdvancedDiscussion topics about environmental issues.