Design Principle

Empathy-First

Our design choices prioritize clarity, understanding, and emotional resonance. Every component, interaction, and layout should foster trust, enhance engagement, and support users by making experiences intuitive, inclusive, and considerate of their needs.

Supporting Guidelines:

• Typography: Use clear, legible fonts and a consistent hierarchy to make content easy to scan and understand.
• Color: Apply accessible color combinations to communicate meaning without causing strain or confusion.
• Spacing & Layout: Maintain consistent white space and padding to reduce cognitive load and improve readability.
• Interactions & Feedback: Buttons, links, and forms should provide clear states and feedback to guide users confidently.
• Accessibility: Ensure all elements follow accessibility best practices to include users of all abilities.

Typography

Typography communicates hierarchy and readability. Use clear, legible fonts and consistent heading styles. Headings should follow a logical H1 → H2 → H3 order. Body text should be easy to scan, with appropriate line spacing and contrast for accessibility.

Body font:

Heading font (H1):

---

Headings

Headings can be center-aligned to create emphasis, but all body text must remain left-aligned for readability. Maintain consistent hierarchy so users can easily understand the structure of your content.

H1 Sample Heading

H2 Sample Subheading

H3 Sample Heading

H4 Sample Subheading

H5 Sample Heading

H6 Sample Subheading

Accessibility

• Pages must have exactly one <h1>.
• Heading levels must be hierarchical and not skipped:
  • h1 → h2 → h3, etc.
  • Do not jump from h2 directly to h4.
• Headings are for structure, not styling.
• Highlighted text/magenta-colored text should only be included in headings H3 and above to meet minimum contrast guidelines.

---

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum velit ac turpis dignissim, non consectetur ligula vulputate. Proin lobortis nibh dolor, a laoreet tellus consequat a. Donec suscipit semper leo non rutrum. In ut turpis eget risus rhoncus sollicitudin imperdiet pulvinar quam. Fusce sagittis tortor volutpat elit pharetra ornare. Nam at neque sit amet ante interdum tincidunt. Mauris hendrerit augue mi, et interdum urna scelerisque nec. Fusce hendrerit diam eget eros vulputate, a varius urna vulputate. Integer eleifend dui at augue vehicula, fringilla malesuada ex ullamcorper. Sed a risus tristique, tempus nisi sed, ornare quam. Pellentesque sed orci ut neque euismod feugiat.

---

Heading Alignment (Typography)

Headings help readers scan and orient through content, but readability depends on consistent text alignment. To maintain clarity and accessibility across the site:

• Section headings may be center-aligned when a visual emphasis or balance is desired.
• Body text and paragraph content must always be left-aligned to support readability, accessibility, and predictable eye movement, especially for assistive technologies.

This rule ensures that while headings can visually stand out, the flow of content remains easy to read and accessible throughout the page. Left alignment for body text supports consistent scanning patterns and reduces reading effort for all users, including those using screen readers or with cognitive or vision impairments.

---

Lists

Lists organize content clearly. Use numbered lists for sequences and bulleted lists for groups. Maintain proper spacing and indentation for readability and accessibility.

1. This is an example of a numbered list
2. This is an example of a numbered list
3. This is an example of a numbered list

• This is an example of a bulleted list
• This is an example of a bulleted list
• This is an example of a bulleted list

Color Palette

Use colors purposefully. Ensure text meets accessibility contrast requirements and highlight key elements consistently. Avoid combinations that reduce readability or create visual strain.

Accessibility

• Text must meet WCAG AA contrast ratios:
  • Normal text: 4.5:1
  • Large text (18px+ or 14px bold): 3:1
• Color must not be the only way information is conveyed.
• Interactive elements must have visible focus states.

Magenta body text on white (fails contrast)*

*Note: Magenta can be used as a highlight color on headings H3 and above.

Black text on magenta (passes contrast)

Links & Buttons

Links and buttons should be clear, distinguishable, and interactive. Use standard hover and focus states for accessibility. Buttons should follow the primary/secondary system to indicate hierarchy and action intent.

---

Link Styles

Links are used for navigation and inline references and should be immediately recognizable as interactive elements. All links inherit the system link color and styling to ensure consistency and accessibility across the site.

• Use links for navigation or contextual actions, not primary calls-to-action.
• Link text should be descriptive and meaningful on its own.
• Avoid styling links to look like buttons unless using the approved button classes.
• All links include visible hover and focus states to support keyboard and assistive technology users.

Use links consistently to reinforce affordance and maintain a clear visual hierarchy throughout the interface.

Example usage:

Normal Link

Accessibility

• Links must be descriptive and make sense out of context.
• Avoid “click here” or “learn more” without context.
• Buttons and links must be keyboard accessible.

---

Button Styles

Buttons are used for primary actions and key user interactions. To maintain clarity and consistency across the interface, all buttons should use the predefined button classes rather than custom styles.

• Use .button for primary actions. This style should be reserved for the main call-to-action on a page or within a section.
• Use .button-secondary for supporting actions. Secondary buttons provide an alternative action without competing visually with the primary button.
• Buttons should be used intentionally and sparingly to avoid overwhelming users or diluting visual hierarchy.
• Button styles include built-in states for hover, focus, and active interactions to ensure accessibility and consistency.

Example usage:

Primary Secondary

Accessibility

Use links styled as buttons only when the action navigates to another page. For in-page actions or JavaScript-driven behavior, use semantic <button> elements with the same classes applied.

Shadow & Border Radius

Consistent use of shadows and rounded corners helps establish a clear visual hierarchy and keeps the interface feeling unified across components. In this system we use defined utility classes to ensure elements have consistent elevation and shape.

• Use .radius-lg on larger containers and cards. This larger border radius gives prominent sections a comfortable, modern feel that separates them visually from the page itself.
• Use .radius-md on smaller elements and UI components. For buttons, small panels, and inline cards, this medium radius retains softness without overwhelming the layout.
• To apply drop shadows consistently, wrap elements with the .shadow class. This ensures that all shadows across the UI use the same intensity, blur, and spread — maintaining a cohesive depth language throughout the site.

Example usage:

Spacing & White Space

White space creates visual breathing room, improves readability, and separates content logically. Consistent spacing around sections, components, and text helps maintain a clean, organized layout.

Guidelines:

• Use standardized padding and margin classes for consistent spacing around cards, containers, and text blocks.
• Larger containers or sections should use more generous spacing, while smaller components use moderate spacing.
• Maintain consistent gaps between elements like headings, paragraphs, images, and buttons to create predictable rhythm across the site.
• Avoid crowding elements; white space is part of the design system and not "empty" space.

Additional Accessibility Guidelines

Accessibility ensures that all users, regardless of ability, can access and interact with the site. These guidelines cover text readability, color contrast, semantic structure, keyboard navigation, and visual hierarchy to create an inclusive, usable experience for everyone.

---

Images

• All meaningful images must have descriptive alt text.
• Decorative images should use empty alt text: alt=""
• Do not embed critical text inside images.

---

Forms & Inputs

• All inputs must have associated <label> elements.
• Error messages must be clear and programmatically associated.
• Placeholder text should not replace labels.

---

Keyboard & Focus

• All interactive elements must be reachable via keyboard.
• Focus order must follow visual order.
• Never remove focus outlines without a visible replacement.

---

Landmarks & Semantics

• Use semantic HTML first (nav, main, footer).
• ARIA should enhance, not replace, semantic HTML.
• Every page should have one <main> landmark.