articulink
v1.0March 2026

Color

Our color palette is warm, joyful, and trustworthy. It helps us stand out while remaining approachable.

Core Brand Colors

Tide

1
037DE4

Surf

2
1E96FC

Abyss

3
012A4D

Cloud

4
FFFFFF

Our core colors form the foundation of Articulink's visual identity. Here's the common hierarchy in which they're used:

1. Tide is the core color of our brand. This is the hue that the world associates with Articulink. When in doubt, lean in to Tide!

2. Surf is our secondary blue, used for backgrounds and hover states where Tide elements appear.

3. Abyss is used exclusively for typography.

4. Cloud is our primary background color and used for text on dark backgrounds.

Secondary Colors

Sunshine

1
FCDE1E

Coral

2
FC1E96

Sunset

3
FC6F1E

Jellyfish

4
C11EFC

Kelp

5
96FC1E

Seafoam

6
1EFCC8

Extended colors for accents, illustrations, and special moments. Use these sparingly to add personality and delight.

1. Sunshine brings warmth and joy. Use sparingly for highlights and celebrations.

2. Coral adds energy and playfulness to illustrations and accents.

3. Sunset creates warmth and is great for call-to-action highlights.

4. Jellyfish adds a touch of magic for special moments and features.

5. Kelp brings natural energy, used in illustrations and playful elements.

6. Seafoam evokes calm tropical waters, perfect for refreshing accents.

Blue Scale

Cloud

1
FFFFFF

Breeze

2
F7FBFF

Mist

3
E4F2FE

Bubble

4
AFD9FD

Lagoon

5
013F74

Depths

6
01355E

Abyss

7
012A4D

Trench

8
001C33

Our "Ocean Journey" palette — an 8-step scale from sky to midnight depths. Use for backgrounds, borders, and text hierarchy.

1. Cloud is our brightest value, used for primary backgrounds and text on dark surfaces.

2. Breeze is a gentle off-white, perfect for secondary backgrounds and subtle contrast.

3. Mist is used for borders, dividers, and card outlines.

4. Bubble adds playful accents and is used for inactive UI elements.

5. Lagoon provides depth for secondary text and subtle emphasis.

6. Depths is used for borders and card backgrounds in dark mode.

7. Abyss is used for primary typography and card backgrounds in dark mode.

8. Trench is our darkest value, reserved for dark mode page backgrounds.

UI Feedback

Info

1
3B82F6

Success

2
22C55E

Warning

3
F59E0B

Error

4
EF4444

Semantic colors for communicating status and feedback. These are universal across all interfaces.

1. Info communicates helpful information, tips, and neutral guidance.

2. Success confirms positive actions, completed states, and achievements.

3. Warning alerts users to cautions, pending states, and important notices.

4. Error indicates errors, destructive actions, and critical alerts.

Color Roles

Primary Actions

Use Tide for buttons, links, active states, and interactive elements that need attention.

Typography

Use Abyss for headings and Lagoon for body text to ensure readability.

Backgrounds

Use Cloud for primary backgrounds, Breeze for sections, and Mist for borders.

Accents

Use Sunshine sparingly for highlights, celebrations, and drawing attention to key moments.

UI Feedback

Use semantic colors consistently: Success, Warning, Error, Info.

Illustrations

Secondary colors bring life to illustrations, icons, and decorative elements. Use playfully but sparingly.

Contrast & Accessibility

All color combinations must meet WCAG 2.1 AA standards. Normal text requires 4.5:1 contrast ratio; large text (18px+) requires 3:1.

Aa

Abyss on Cloud

15.6:1 ratio

AA Pass
Aa

Lagoon on Cloud

9.2:1 ratio

AA Pass
Aa

Tide on Cloud

4.5:1 ratio

AA Pass
Aa

Cloud on Tide

4.5:1 ratio

AA Pass
Aa

Cloud on Abyss

15.6:1 ratio

AA Pass
Aa

Bubble on Cloud

2.1:1 ratio

Fail

Dark Mode

While light mode (Cloud background) is our preferred style, dark mode is available for user preference and reduced eye strain. The same Ocean Journey palette adapts beautifully.

Light Mode (Preferred)Default

Section Heading

Body text in Lagoon for comfortable reading.

Dark ModeAlternative

Section Heading

Body text in Breeze for dark backgrounds.

Color Mapping

How Ocean Journey colors translate between modes

RoleLight ModeDark Mode
Primary Background
Cloud (#FFFFFF)
Trench (#001C33)
Secondary Background
Breeze (#F7FBFF)
Abyss (#012A4D)
Card Background
Cloud (#FFFFFF)
Abyss (#012A4D)
Border
Mist (#E4F2FE)
Lagoon (#013F74)
Primary Text
Abyss (#012A4D)
Cloud (#FFFFFF)
Secondary Text
Lagoon (#013F74)
Breeze (#F7FBFF)
Muted Text
Bubble (#AFD9FD)
Bubble (#AFD9FD)
Primary Action
Tide (#037DE4)
Tide (#037DE4)
Accent
Sunshine (#FCDE1E)
Sunshine (#FCDE1E)

Do's and Don'ts

Do
  • • Use Tide for primary buttons and interactive elements
  • • Use Abyss for headings, Lagoon for body text
  • • Use Cloud/Breeze for backgrounds (preferred style)
  • • Use Sunshine sparingly for accent highlights
  • • Apply secondary colors in illustrations and decorative elements
  • • Maintain 4.5:1 contrast ratio for all text
  • • Use semantic UI colors consistently across all products
  • • In dark mode, use Cloud for headings, Breeze for body text
  • • Default to light mode — offer dark mode as user preference
Don't
  • • Use Sunshine, Coral, or other bright colors for body text
  • • Use Bubble or Mist for text on light backgrounds
  • • Mix Ocean Journey colors with off-brand colors
  • • Use low-contrast combinations (Surf on Tide, Lagoon on Abyss)
  • • Overuse secondary colors — they should feel special
  • • Use UI feedback colors for non-semantic purposes
  • • Apply gradients that combine incompatible colors
  • • Use Lagoon for text in dark mode (insufficient contrast)
  • • Make dark mode the default — light mode is preferred