Components / Navigation and overlays

Navigation and overlays

Navbar to move around the site, Tabs to switch views inside a page, Modal for decisions that interrupt and Tooltip for short help. All linked to tokens; text ≥4.5:1 and indicators ≥3:1.

Version 1.4 · Oct 20, 2026

Navbar

Top bar on web (1440) and mobile (390), Light (surface-white) or Dark (brand-ink) theme. Official logo v1.1: solid version only on white and ring on dark backgrounds; never stretched or repeated. Items with Default, Hover, Active and Focus states; Primary Button CTA; on mobile, a menu button.

DefaultHoverActiveFocus
DefaultHoverActiveFocus
ProductSolutionsPricingResourcesCompany
Get started
ProductSolutionsPricingResourcesCompany
Get started
Default

Tabs

They switch views inside the same page. Tab item with Default, Hover, Active (bottom indicator in color-action-default), Focus and Disabled states; optional icon and counter (Badge).

Tab
SummaryActivitySettingsArchive

Modal

Dialog that interrupts to ask for a decision. Sizes sm 400, md 560 and lg 720; radius-lg and shadow-md. Title, text, close button and footer with Secondary + Primary, or Destructive for actions that delete. Background darkened with color-overlay-scrim.

Dialog title
Dialog text: explains in one or two sentences what will happen and what the person has to decide.
CancelConfirm
Dialog title
Dialog text: explains in one or two sentences what will happen and what the person has to decide.
CancelDelete
Dialog title
Dialog text: explains in one or two sentences what will happen and what the person has to decide.
CancelConfirm

Tooltip

Short help on hover or focus. Background brand-ink, text text-inverse, maximum width 240 px and an arrow up, down, left or right.

Tokens

Values linked in navigation and overlays.

Name (token)
Value
When to use it
color-surface-white · color-brand-ink
#FFFFFF · #021627
Navbar Light and Dark background; Tooltip background (ink).
color-text-secondary · -primary
8.03 · 18.31:1
Nav item and Tab on Default · Hover.
color-action-strong
#124EA1 · 7.98:1
Text of active Nav item and Tab.
color-action-default
#2164EE · 5.09:1
Active bottom indicator and focus ring.
color-text-inverse / -muted
18.31 · 7.08:1
Navbar Dark and Tooltip text.
color-overlay-scrim
brand-ink at 60% · new
Background behind the Modal.
radius-lg · radius-md
12 · 8
Modal · Nav item, Tab and Tooltip.
shadow-md
Effects
Modal.
space-2 · 3 · 4 · 6 · 20
8 · 12 · 16 · 24 · 80
Item padding, Modal and web Navbar.

Contrast

Text: minimum 4.5:1. Indicators and focus ring: minimum 3:1.

Aa
Sample text
Nav item Default · text-secondary on white
8.03
Excellent
Aa
Sample text
Nav item Active · action-strong on white
7.98
Excellent
Aa
Sample text
Nav Dark Default · inverse-muted on ink
7.08
Excellent
Aa
Sample text
Nav Dark Active · inverse on ink
18.31
Excellent
Aa
Sample text
Tab Hover · text-primary on surface-subtle
16.7
Excellent
Aa
Sample text
Indicator · action-default on white
5.09
Pass
Aa
Sample text
Focus · action-default on ink
3.59
Pass
Aa
Sample text
Tooltip · inverse on ink
18.31
Excellent
Aa
Sample text
Modal · text-secondary on white
8.03
Excellent

What to do and what to avoid

✓
Do this

Only one active item in the Navbar and in Tabs, marked with color and an indicator.

✕
Avoid this

Putting essential information only in a Tooltip: it is not seen on mobile or without a mouse.

Dialog title
Dialog text: explains in one or two sentences what will happen and what the person has to decide.
CancelDelete
✓
Do this

For actions that delete, a Destructive Modal with a clear verb (“Delete”).

✕
Avoid this

Opening a Modal on top of another one or using it for notices that do not ask for a decision: use Alert.

Related pages

Components

Buttons

Used in the Navbar CTA and the Modal footer.

See page
Components

Badges, alerts and cards

Badge as counter in Tabs; Alert for notices.

See page
Identity

Color

Action and overlay colors.

See page