Exolynk Brand Manual

Brand Guidelines & Design System für Birei UI

Download CSS Tokens Contact

Brand Colors

Our core brand identity colors. Click any value to copy it to your clipboard.

Primary
Exolynk Teal
Primary Color
#255459
37, 84, 89
var(--primary-700)
Brand IdentityHeadingsCTA ButtonsLinks
Secondary
Twilight Stroll
Secondary Color
#728a8c
114, 138, 140
var(--secondary-500)
Supporting TextCaptionsIconsMetadata
Accent
Handmade Red
Accent Color
#a67676
166, 118, 118
var(--accent-500)
HighlightsIllustrationsDecorativeBadges
Base
Ink
Base / Text Color
#1f2a2b
31, 42, 43
var(--neutral-950)
Body TextHeadings
Neutral
Tradewind
Neutral Mid-tone
#b8c4c5
184, 196, 197
var(--neutral-300)
BordersDividersDisabled
Canvas
Cloud
Background / Canvas
#f5f7f7
245, 247, 247
var(--neutral-50)
Page BackgroundCanvas

Full Palette

Complete shade scales from 50 (lightest) to 950 (darkest) for every color family.

Semantic Colors

Purpose-driven colors for feedback, status, and interactions. Error is intentionally distinct from the Accent color to avoid ambiguity.

Accent vs. Error — Why They Differ

The accent color (Handmade Red) is warm and muted for decorative use. The error color is cooler and more saturated to convey urgency and ensure clear semantic distinction.

Accent
Handmade Red Warm, soft, decorative. Used for highlights, illustrations, badges, and brand expression. Does not signal errors.
Error
Signal Red Cooler, more saturated. Reserved exclusively for validation errors, destructive actions, and system alerts.

Data Visualization (DRAFT)

A 12-color palette where every series owns its own hue family in the Full Palette — Lagoon, Algae, Lichen, Olive, Honey, Copper, Coral, Plum, Mauve, Indigo, Slate, and Anchor. Each chart color is the chart-recommended weight (★) of its family, so any series can be shifted up or down its scale for emphasis or contrast.

Light Variants

Use these for area chart fills, background highlights, and secondary data layers.

Usage Guidelines
Categorical data
Use colors in sequence starting from --chart-1. For 3-5 categories, skip every other color for maximum contrast.
Area & filled charts
Pair each base color with its -light variant for fills and the base for strokes/borders.
Accessibility
All 12 colors meet WCAG AA contrast on white backgrounds. For colorblind-safe charts, combine with shape/pattern differentiation.

App Tokens

Ready-to-use semantic tokens for UI components. Reference these in your app styles.

Components

Button components from the birei component library, styled with the Exolynk design tokens.

Button Variants
Primary
Secondary
Transparent
Danger
Sizes
Small
Medium
Large
Shapes & Layout
Round
Block
Block
CSS Variable Reference
--birei-button-primary-* Primary filled button
--birei-button-secondary-* Outlined button
--birei-button-transparent-* Text-only button
--birei-button-danger-* Destructive action button

Each variant exposes -bg, -bg-hover, -bg-active, -border, -color

Typography

Instrument Sans is our primary typeface across all platforms.

Instrument Sans
Google Fonts · Variable · 400–700
Regular 400Aa Bb Cc Dd
Medium 500Aa Bb Cc Dd
SemiBold 600Aa Bb Cc Dd
Bold 700Aa Bb Cc Dd
DisplayExolynk Platform
H1Heading One
H2Heading Two
H3Heading Three
BodyThe quick brown fox jumps over the lazy dog. Exolynk enables seamless workflow automation.
SmallCaptions, labels, and helper text for compact UI elements.