SynerLink Brand Guide

Design system & visual identity — v2 Refined

01 Brand Mark & Wordmark

SynerLink
Industrial category platform
SynerLink
Platform
Nav / app header
SynerLink
Platform
Dark sidebar
SynerLink
Small / favicon
SynerLink
Heading accent

Usage guidelines

  • The link mark () is the primary brand symbol — always rendered in --c-primary (#065FD4)
  • Wordmark uses Inter 600 weight with -0.02em letter-spacing
  • Never rotate, distort, or recolor the diamond
  • Minimum clear space: 8px around the full lockup
  • Do not use the brand mark as a bullet, list marker, or UI decorative element
  • On dark backgrounds, the diamond remains #065FD4 (not white)

02 Color System

#065FD4
Primary
--c-primary
All primary actions, links, active states, brand marks
AA 4.5:1White text
#1557b0
Primary Deep
--c-primary-deep
Hover states, pressed buttons
AA 4.5:1White text
#e8f0fe
Primary Light
--c-primary-light
Selected states, tinted backgrounds, pills
AA —Background only
#f0f2f5
Page Background
--c-bg
Default page background, secondary surfaces
—Background only
#ffffff
Surface
--c-surface
Cards, modals, panels, inputs, dropdowns
—White
#1a1a1a
Ink (Body Text)
--c-ink
Primary body text, headings, high-emphasis content
AAA 15:1White bg
#5f6368
Ink Soft
--c-ink-soft
Secondary text, descriptions, meta info
AA 7:1White bg
#80868b
Muted
--c-muted
Labels, placeholders, disabled text, secondary meta
AA 4.5:1White bg
#dadce0
Line
--c-line
Borders, dividers, card outlines
—Border only
#188038
Green (Success)
--c-green
Verified, approved, success states, positive deltas
AA 4.5:1White text
#f9ab00
Amber (Warning)
--c-amber
Pending, caution, vendor-side active, warnings
AA 3.0:1Large text ok
#d93025
Red (Error)
--c-red
Errors, negative deltas, destructive actions
AA 4.5:1White text

Color usage notes

  • Blue is the platform's primary identifier — use it sparingly for actions and links
  • Green = confirmed/verified/healthy. Amber = pending/warning/vendor. Red = error/blocking
  • Neutrals form the vast majority of the UI — text, borders, backgrounds
  • Do not use green for "success" banners that are informational — use blue for info
  • All text on white/light backgrounds meets WCAG AA 4.5:1 minimum
  • Amber (#f9ab00) fails AA on small text — use only for badges, large text, or backgrounds

03 Typography

Inter
--font-sans · 400 / 500 / 600 / 700 · Variable opsz

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

JetBrains Mono
--font-mono · 400 / 500 / 700

0 1 2 3 4 5 6 7 8 9 A B C D E F

code / labels / tabular data · 10.2 kB compressed

Type scale

--text-xs = 11px
Caption, meta, data label — The quick brown fox
--text-sm = 13px
Body small, descriptions — The quick brown fox
--text-base = 14px
Default body text — The quick brown fox jumps
--text-lg = 18px
Subheadings, card titles — The quick brown
--text-xl = 21px
Section headings — The quick brown
--text-2xl = 26px
Page headings — The quick
--text-3xl = 34px
Hero / large headings

Heading hierarchy

h1 — Page title
h1 · 34px · 600 weight · -0.02em letter-spacing
h2 — Section heading
h2 · 26px · 600 weight · -0.015em letter-spacing
h3 — Card group heading
h3 · 21px · 600 weight
h4 — Card title
h4 · 18px · 600 weight
h5 — Item heading
h5 · 14px · 600 weight
h6 — Section label
h6 · 13px · 600 · uppercase · 0.05em spacing

Usage rules

  • Inter is used for all UI text — no serif fonts anywhere
  • JetBrains Mono for: data labels, stat values, table headers, code, pills, badges, timestamps
  • Minimum font size: 11px (--text-xs). Never smaller.
  • Body text: 14px, 1.5 line-height. Dense views can use 13px.
  • Headings use tight line-height (1.2) for compact information density
  • Vertical rhythm: stack headings with 4px margin-bottom, paragraphs with 16px
  • No bold below 500 weight exists — 400 = normal, 500 = medium, 600 = semibold, 700 = bold

04 Category Icons

Icon style specification

  • 24×24 viewBox consistent canvas
  • 2px stroke width, stroke-linecap="round", stroke-linejoin="round"
  • Use currentColor — icons inherit color from their context
  • No filled areas — clean line art only
  • Minimum stroke separation: 4px
  • Usage: 14px in cards/listings, 20px in category headers, 24px+ in brand contexts
Design principle:
  Professional B2B — no emoji, no cartoonish shapes, no excessive detail.
  Each icon must be recognizable at 14px and at 32px.
  Conservative line art that communicates clearly at small sizes.

All 32 category icons

05 Spacing & Layout

Spacing scale

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 20px
--space-6 24px
--space-8 32px
--space-10 40px
--space-12 48px

Layout rules

  • Max content width: 1400px for app pages, 1200px for landing pages
  • Sidebar: 220px fixed width
  • Card padding: 20px (--space-5) default
  • Content vertical padding: 24px (--space-6)
  • Grid gap: 12-16px (--space-3 to --space-4) for card grids
  • Section spacing: 32px (--space-8) between major sections
  • No gutters narrower than 8px (--space-2)
  • B2B density: prefer tighter spacing over generous whitespace

06 Component Gallery

.btn .btn-primary .btn-secondary .btn-ghost .btn-red .btn-sm .btn-lg
Card Title
Optional subtitle or description
Action

Card body content. Use for grouped information, widgets, and panels throughout the app.

Footer note
.card .card-header .card-title .card-sub .card-body .card-footer
Primary Active Pending Blocked Draft
Industrial Oil & Gas Construction
.pill .pill-primary / .pill-green / .pill-amber / .pill-red / .pill-muted + .tag
CompanyCityStatus
Acme FabricationCalgaryVerified
Northern ValveEdmontonPending
Bighorn SupplyCalgaryVerified
Prairie PipelineRed DeerExpired
.table-wrap table.striped th.sortable
.banner .banner-primary / .banner-green / .banner-amber / .banner-red
Enable auto-sync
.form-group .form-label .form-input .form-select .form-row .toggle

Confirm action

This will send the request to vendors. You'll receive bids within 48 hours.

.modal-overlay .modal .modal-close .modal-actions

07 Responsive Behavior

  • ≥ 1000px: Full multi-column grids, sidebar visible
  • 768–1000px: 2-column grids, sidebar hidden
  • 480–768px: Single column, compact topbar
  • < 480px: Single column, reduced padding, stacked layouts
  • Sidebar hidden via display:none below 768px (use hamburger for app)

08 Accessibility

  • Focus: Every interactive element has :focus-visible styling with a 2px blue outline
  • Color contrast: All text/background combinations meet WCAG AA (4.5:1) minimum
  • Reduced motion: @media (prefers-reduced-motion: reduce) disables all animations
  • Print: @media print removes nav, sidebar, overlays; ensures backgrounds print
  • Semantic HTML: Use proper heading hierarchy (h1→h6), form labels, table headers
  • Keyboard: All interactive elements reachable and operable via keyboard

09 Dark Mode

Dark mode is not currently implemented but is pre-architected. The sidebar (#1e1e1e) serves as the dark surface reference. To add dark mode:

Dark mode (not yet active) Implementation ready — see CSS