Design Principles

This page explains how Atalie approaches design.

Balancing accessibility and personality

Atalie takes accessibility seriously, and that applies to design as well.

At the same time, I want the site to keep a recognizable Atalie personality.

Personality can make things harder to read if it is pushed too far. Decorative choices or unusual layouts can get in the way of access to information.

The goal is to balance those two values - clarity and identity - rather than choosing only one of them.

Design principles

Atalie's design is based on the following principles.

1. Be clear

  • Make the priority of information visually obvious so people can get where they want to go

  • Prefer structure over decoration and keep the content itself at the center

2. Be consistent

  • Keep color, typography, spacing, and component usage aligned across the site

  • Consistency lowers cognitive load and increases trust

3. Be accessible

  • Use WCAG as a reference for contrast, font sizing, and keyboard support

  • Pay attention to Japanese-specific issues such as wrapping and reading flow

  • Build with screen readers and other assistive technologies in mind

4. Be honest

  • Avoid dark patterns

  • Do not use elements that steal attention unnecessarily

  • Make sure the appearance matches the actual content

5. Feel like Atalie

  • Keep the principles above while still reflecting Atalie's tone and visual identity

  • Aim for something calm and warm rather than cold or overly formal

Typography

  • Prioritize Japanese readability and choose fonts that are comfortable for body text

  • Pay attention to line height, spacing, and wrapping so long pages remain readable

  • Use techniques such as BudouX to improve natural Japanese line breaking

Color

  • Maintain contrast that meets accessibility expectations

  • Base the palette on Atalie's brand colors and keep the overall feel restrained and consistent

  • Do not rely on color alone to communicate meaning

Responsive design

  • Make the site comfortable to use on mobile and desktop alike

  • Adjust layouts to the screen size while preserving the information hierarchy

Updates

This policy may evolve as the design matures.