UI/UX
Colour should make your screen clearer, not just prettier. If text, buttons, and status messages are hard to read, your UI fails even if the palette looks good.
Do not pick random colours screen by screen. Give each colour a job.
For a hackathon app, you usually need background, surface, text, muted text, primary action, success, warning, and error. Keep it small so your screens feel connected.
0 of 7 lessons done · proved by a submitted hackathon project
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
Beginners often use colour as decoration. Then every card, icon, and button fights for attention.
Another mistake is using only colour to show state. A red border alone is not enough for an error. Add an error message like “Enter a valid UPI ID” so the user knows what to fix.
Use a contrast checker before you polish the UI. Search for “WebAIM contrast checker” or use the contrast tools inside Figma if you design there.
Aim for readable contrast for body text, labels, inputs, and buttons. Pay extra attention to grey text. Light grey on white often looks clean but becomes unreadable on cheaper phones or in sunlight.
Store colours as tokens in code. This makes your React, Next.js, or plain CSS project easier to keep consistent across screens.
Here is a simple CSS file for a student event app.
:root {
--color-bg: #F8FAFC;
--color-surface: #FFFFFF;
--color-text: #0F172A;
--color-muted: #475569;
--color-border: #CBD5E1;
--color-primary: #2563EB;
--color-primary-text: #FFFFFF;
--color-success: #15803D;
--color-warning: #B45309;
--color-error: #B91C1C;
}
body {
background: var(--color-bg);
color: var(--color-text);
}
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.button-primary {
background: var(--color-primary);
color: var(--color-primary-text);
}
.error-text {
color: var(--color-error);
}You can ask ChatGPT or Gemini for palette suggestions. Give it your app type, audience, and mood. For example: “Suggest an accessible colour palette for a college hackathon expense-splitting app, with CSS variables.”
Do not trust the colours blindly. Check contrast yourself. Also check if the palette has too many colours or colours with unclear roles.
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
Answer the quick check to finish this lesson.