Brand system

Hey Borton design language

Warm, executive, and precise. This system guides every interface, piece of copy, and interaction we build. Use it to stay coherent as we grow.

01 - Logo system

The mark

The logo mark reads as a stylized lowercase b inside a speech bubble. The coral node is the intelligence focus point. Use the full lockup for core brand moments; the mark alone only when space is constrained.

Mark - on canvas

Mark - on dark

Hey Borton

Full lockup

Use the full lockup for primary brand placement: nav, hero, email headers
Mark alone is acceptable only in space-constrained or high-recognition contexts
Never stretch, rotate, recolor, or add effects to the mark
Minimum size: 20px mark height for digital, 8mm for print
Clear space: 50% of mark height on all sides

02 - Color palette

The color system

Warm neutrals dominate. Coral is the action color - not a background. Use it intentionally. Peach supports and softens. Deep ink anchors.

Coral

#E46B53

Primary CTA, action, accent

Peach

#EEB49B

Soft accent, supportive fill

Deep Ink

#2F2D3A

Dense emphasis, dark UI

Ink

#3A3948

Primary text, nav

Warm Canvas

#FCF8F3

Main page background

Soft Wash

#F6EFE8

Alternate section background

Stone

#D9D2CA

Borders, dividers

Slate

#7A7589

Secondary text, labels

Usage ratio

65% warm neutrals 20% ink family 10% white surfaces 5% coral & peach

03 - Typography

The type scale

Manrope for headlines: strong, rounded, executive. Inter for body: neutral, readable, reliable. Sentence case everywhere. Short headings.

Display

Manrope 800
56px / -3.2%

Think clearly.

Heading 1

Manrope 800
42px / -2.8%

Work intelligently.

Heading 2

Manrope 700
30px / -2.2%

From ambiguity to action

Heading 3

Manrope 700
20px / -1.8%

Strategic clarity

Body large

Inter 400
18px / 168%

Designed for leaders and teams who need to turn ambiguity into action, every time.

Body

Inter 400
15px / 163%

Not a chatbot. Not just an assistant. A thinking partner built for serious work.

Label

Inter 700
11px / +9% track

Executive AI counterpart

Mono

JetBrains Mono 400
12px

--hb-coral: #E46B53;

04 - Spacing & radii

The spatial scale

8-point base grid. Everything breathes. Nothing cramped.

8

12

16

24

32

48

64

80

96

120

Border radii

12px
input

16px
button

24px
card

32px
surface

40px
panel

05 - Glass surfaces

Glassmorphism

Translucent surfaces create warmth and depth. Use them deliberately. Layer on warm backgrounds - never on flat white. Text must remain readable.

Subtle

alpha: 0.40
blur: 8px
border: rgba(255,255,255,0.55)
Use: overlays, hints

Standard

alpha: 0.60
blur: 14px
border: rgba(255,255,255,0.55)
Use: cards, containers

Strong

alpha: 0.75
blur: 20px
border: rgba(255,255,255,0.55)
Use: modals, panels

Opaque

alpha: 0.88
blur: 28px
border: rgba(255,255,255,0.55)
Use: nav, drawers

Use on warm backgrounds

Glass surfaces only work on the canvas/wash gradient family. On flat white or dark surfaces the effect disappears or looks muddy.

Always add a highlight stroke

Apply inset 0 1px 0 rgba(255,255,255,0.65) as a box-shadow and a top-edge gradient. This creates the light-refraction feel.

Keep text readable

Body text color on glass should be --hb-ink or --hb-slate, never white. If text feels hard to read, raise the alpha.

Provide a fallback

Add will-change: transform to parallax glass. Provide a solid fallback if backdrop-filter is unsupported.

06 - Buttons

Button system

One primary action per surface. Coral is the single action color. Outline and soft-fill carry secondary weight.

Variant	When to use	Background	Border radius
Primary (coral)	Main action on any surface. One per section.	--hb-coral	16px
Outline	Secondary path when two actions are needed.	transparent	16px
Soft fill	Low-emphasis tertiary action or in-context action.	--hb-wash	16px
Small	Nav CTA, inline actions, tight space.	--hb-coral	12px

07 - Cards

Card types

Cards should feel editorial, not dashboard. One purpose per card. No overloading. Use glass for feature and workflow cards; dark for stats.

Feature card

One capability, concise explanation. Icon anchors the concept. No more than two sentences of body copy.

3.4×

faster from brief
to decision-ready

Use case

Product strategy

Quarterly planning
Roadmap prioritization
Stakeholder alignment

08 - Form controls

Form system

Strong labels above inputs. Never rely on placeholder alone. Clear focus states. Coral focus ring at 12% opacity.

Full name

Work email

Role

Organization size

What would you like to tell us?

A short answer is fine.

09 - Navigation

Nav component

Single top row. Logo left, links center, primary CTA right. No mega-menus. Becomes glass on scroll. One coral CTA only.

Scroll behavior: at scrollY > 24px apply backdrop-filter: blur(20px) + alpha: 0.88. Transition over 350ms ease. Never abrupt.

10 - Motion

Motion principles

Fast and restrained. Nothing showy. Motion should feel like physics, not performance. If it calls attention to itself, it's too much.

Hover lift

translateY(-4px) / 220ms ease

All interactive cards and buttons. Creates a responsive, physical feel without drama.

Fade entrance

opacity 0→1 + translateY 22→0 / 620ms ease

Scroll-reveal for all section content. Use IntersectionObserver at 0.10 threshold.

Nav transition

background + blur / 350ms ease

Nav glass activation on scroll. Never pop or snap - must feel continuous.

Cursor parallax

RAF lerp at 0.065 factor

Hero visual layers respond to mouse position. Max offset ±18px. Never jittery.

CTA glow pulse

opacity 1→0.45 / 2.4s ease-in-out infinite

The live indicator dot only. No other element should pulse.

Page transitions

backdrop-filter blur 0→18px / 420ms ease

Used for the brand system reveal (ArrowDown × 3). Frosted veil, then navigate.

Hover demo - move mouse over each box

Fast
150ms

Standard
220ms

Slow
400ms

Spring
cubic-bezier

Always honor prefers-reduced-motion. Apply transition-duration: 0.01ms when the media query is active.

11 - Voice & copy

How we write

Sharp. Collaborative. Executive-grade. Human. Lead with problem and outcome. Keep claims grounded.

Do use

Think clearly.
Move faster with clarity.
Turn ambiguity into action.
Work that matters.
Better together.

Avoid

Revolutionize your workflow
Supercharge productivity
Cutting-edge AI solution
Game-changing technology
Unlock your potential

Copy rules

- Sentence case. Always.
- No em dashes. Use a hyphen.
- Short headings. Short paragraphs.
- Lead with the problem and outcome. Keep claims grounded.
- Every page needs one primary action.