Articulink

Brand Guidelines

v1.0March 2026

Accessibility

Building inclusive experiences that work for everyone.

Principles

P

Perceivable

Information must be presentable in ways all users can perceive.

O

Operable

Interface components must be operable by all users.

U

Understandable

Information and UI operation must be understandable.

R

Robust

Content must be robust enough for assistive technologies.

We follow WCAG 2.1 Level AA guidelines as our minimum standard.

Color Contrast

Text must have sufficient contrast against its background. Minimum ratios: 4.5:1 for normal text, 3:1 for large text (18px+).

Sample Text

Abyss on Cloud

15.6:1

Pass
Sample Text

Lagoon on Cloud

9.2:1

Pass
Sample Text

Tide on Cloud

4.5:1

Pass
Sample Text

Cloud on Tide

4.5:1

Pass
Sample Text

Cloud on Abyss

15.6:1

Pass
Sample Text

Bubble on Cloud

2.1:1

Fail
Safe Combinations
  • • Abyss text on Cloud/Breeze/Mist backgrounds
  • • Cloud text on Tide/Abyss backgrounds
  • • Lagoon text on Cloud/Breeze backgrounds
  • • Tide text on Cloud background
Avoid
  • • Bubble text on any light background
  • • Mist text on Cloud background
  • • Sunshine text on Cloud (decorative only)
  • • Low contrast color combinations

Focus States

All interactive elements must have visible focus indicators for keyboard navigation.

Buttons

focus:ring-2 focus:ring-tide focus:ring-offset-2

Inputs

focus:border-tide focus:ring-1 focus:ring-tide

Links

focus:outline-none focus:ring-2 focus:ring-tide focus:ring-offset-2 rounded
Focus me

Cards

focus-within:ring-2 focus-within:ring-tide

Never use outline: none without providing an alternative focus indicator.

Keyboard Navigation

All functionality must be accessible via keyboard. Common patterns:

KeyAction
TabMove focus to next focusable element
Shift + TabMove focus to previous focusable element
Enter / SpaceActivate buttons, links, and controls
EscapeClose modals, dropdowns, and overlays
Arrow KeysNavigate within menus, tabs, and lists
Home / EndJump to first/last item in a list

Screen Reader Support

ARIA Labels

aria-label

Provide text label for elements without visible text

<button aria-label="Close modal">
  <XIcon />
</button>
aria-describedby

Link element to its description

<input aria-describedby="email-hint" />
<p id="email-hint">We'll never share your email</p>

Semantic HTML

  • <button>Clickable actions (not <div onClick>)
  • <a href>Navigation links (not <span onClick>)
  • <nav>Navigation regions (not <div class='nav'>)
  • <main>Main content area (not <div class='main'>)
  • <h1>-<h6>Section headings (not <p class='title'>)
  • <ul>, <ol>Lists of items (not <div> with bullets)

Motion Sensitivity

Some users are sensitive to motion. Always respect the prefers-reduced-motion media query.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
Safe
  • • Color transitions
  • • Opacity fades
  • • Small scale changes
Disable for reduced-motion
  • • Parallax effects
  • • Auto-playing animations
  • • Large sliding transitions

Accessibility Checklist