Design system

Convey Digital visual style guide

A working inventory of the site’s visual language, organized from foundational atoms to reusable molecules and complete organisms.

01

Atoms

Foundational visual elements

Use these tokens and primitives to keep every new component aligned with the existing site.

Color

Core brand, interface, and supporting colors currently available as CSS custom properties.

  • Convey dark --color-convey-dark #000224 Primary text and dark surfaces
  • Convey blue --color-convey-blue #056DFF Brand headings and primary actions
  • Accessible link blue --color-convey-link-blue #0060E6 Links on light surfaces
  • Crayola blue --color-crayola-blue #1766FF Active states and panels
  • Light blue --color-convey-light-blue #02B1FD Accent surfaces
  • Faded blue --color-faded-blue #8ED1FC Soft labels and diagrams
  • Gold --color-convey-gold #EEC338 Eyebrows and emphasis
  • Off-white --color-convey-offwhite #F8F9FF Subtle section backgrounds
  • Nickel --color-nickel #3B3B44 Body text
  • Mid gray --color-mid-gray #585865 Secondary text
  • Lines --color-lines #E5E5E5 Rules and quiet borders
  • White --color-convey-white #FFFFFF Page and card surfaces

Typography

Fagun carries brand headlines. TT Interphases carries body copy, labels, and controls.

H1
Website experts for B2B teams
H2
Build a better buyer experience
H3
A practical path forward
H4
Marketing automation strategy
H5
What is included
Lead

Clear recommendations for complex B2B marketing challenges.

Body

Convey works inside your existing processes to help your team move faster with less risk.

Small

Supporting details should remain readable and specific.

Buttons and links

Primary actions use solid blue. Text links use the accessible link-blue token.

Text link ›

Eyebrows and labels

Short labels add context and visual energy before a heading.

Default Blue Light blue Opposite tilt Small

Form controls

Labels stay visible, fields are at least 44px tall, and focus states remain prominent.

Spacing scale

A practical 4px-based scale for padding, gaps, and section rhythm.

4px
8px
12px
16px
24px
32px
48px
64px

Borders, radius, and shadow

The outlined card treatment combines a dark 1px border with a soft blue offset shadow.

Quiet surface1px solid --color-lines
Standard outline.outline
Small outline.outline--small

02

Molecules

Small reusable combinations

These patterns combine atoms into repeatable interface units with one clear purpose.

Specialist sprint

Google Tag Manager audit

Review tracking architecture, data quality, governance, and high-value conversion events.

  • Implementation inventory
  • Risk and gap analysis
  • Prioritized recommendations
View service pattern ›

Action group

Pair one primary decision with one lower-emphasis route.

Review details ›

Outcome callout

“We need a specialist who can find the issue, explain the tradeoffs, and give our team a clear next step.”

Pattern: one human problem, one tangible outcome.

Form field group

Use helper text to explain the expected format.

03

Organisms

Complete interface sections

Organisms establish page hierarchy and combine multiple molecules into a useful experience.

HeroHeadline + context + action group
Fixed-scope service

Get a clear plan for improving Core Web Vitals

A focused technical review that identifies the page-speed issues creating the biggest experience and search risks.

See what is included ›
Core Web Vitals 92 Example score
Service collectionIntro + three comparable cards

Specialist services

Practical help for high-stakes marketing systems

01

Tracking audit

Validate tags, events, consent behavior, and reporting inputs.

Explore pattern ›
02

Form review

Find friction, routing gaps, and unreliable conversion tracking.

Explore pattern ›
03

Platform migration

Plan data, workflow, integration, and launch requirements.

Explore pattern ›
Conversion panelPrompt + reassurance + short form
Ask us anything

Bring us the problem your team cannot solve in-house.

We will reply with a practical recommendation within one business day.

04

Usage principles

How to optimize individual elements

  1. Start with the smallest reusable layer.Change a token or atom when the improvement should apply everywhere.
  2. Give each molecule one job.A card, field group, or action group should support one clear decision.
  3. Compose organisms around user intent.Every section should answer a question or move the visitor toward a next step.
  4. Check every state and breakpoint.Review default, hover, focus, active, disabled, error, success, desktop, and mobile behavior.
  5. Use the live header and footer as references.The shared site chrome surrounding this page is part of the organism inventory.