DEV Community

Sanghun Han
Sanghun Han

Posted on • Edited on

[School Landing Page – Part 1, Section 2] Define Site Personality: Color, Font, and Mood

#html #css #learning #portfolio

🎨 School Landing Page Project – Section 2: Define Site Personality

Before designing any layout, it's crucial to define the personality of the site —

how it should feel, what message it should convey, and how users should perceive it at a glance.

This step lays the foundation for visual and UX consistency throughout the site.

🧠 Personality Direction

After considering the project’s goal and target users, I chose this personality:

Bold / Confident + Calm / Peaceful

This combination reflects a site that feels trustworthy, clear, and professional — while still welcoming and calming for international users.

🎨 Color System

To express that tone visually, I selected the following color palette:

Role HEX Code Usage
Main #03A6A1 Primary buttons, highlights, main components
Accent #F9A825 Supporting highlights, icons, and tag emphasis
Grey #4E4E4E Base text color for high readability
Background #FFFFFF Default page background

🌗 Tints & Shades

To enable flexibility (e.g., hover states, backgrounds, soft dividers), I created tints and shades from the base colors.

Main (#03A6A1)

  • Light: #68CAC7, #B3E4E3
  • Dark: #027471, #014240

Accent (#F9A825)

  • Light: #FBCB7C, #FDE5BE
  • Dark: #AE761A, #7D5413

Greys

  • Main grey: #4E4E4E
  • Light grey: #606060
  • Background: #FFFFFF

Here’s the color system in CSS variables for implementation:

/* Main */
--color-main: #03A6A1;
--color-main-light1: #68CAC7;
--color-main-light2: #B3E4E3;
--color-main-dark1: #027471;
--color-main-dark2: #014240;

/* Accent */
--color-accent: #F9A825;
--color-accent-light1: #FBCB7C;
--color-accent-light2: #FDE5BE;
--color-accent-dark1: #AE761A;
--color-accent-dark2: #7D5413;

/* Grey & Background */
--color-grey-main: #4E4E4E;
--color-grey-light: #606060;
--color-background: #FFFFFF;
Enter fullscreen mode Exit fullscreen mode

✍️ Typography

For clarity and consistency, I chose a single sans-serif font family:

Font: Inter

Why Inter?

  • ✅ Clean and neutral appearance
  • ✅ Friendly yet professional
  • ✅ Readable in both headings and long paragraphs
  • ✅ Supports multiple weights for better hierarchy (e.g., 300–700)

📌 Summary

By clearly defining the site’s tone, color palette, and typography,

I’ve established a strong design foundation for the landing page.

This will guide every future decision — from layout to imagery to content —

and ensure a consistent, trustworthy identity:

“Bold yet Calm.”

🔜 Next up…

In the next section, I’ll keep doing the project plan contents collection such as image, video and icons.

Thanks again for reading! 😊

Top comments (0)