Honeycomb — design system & UI screens

Dev Tools · 1 screen · 12 sections · https://www.honeycomb.io/

Light hero with blue accent beside an MCP command block and an in-product welcome panel.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/honeycomb.

Decoded design system

Honeycomb's decoded design system: background #FFFFFF, text #25303E, accent #0078CD, link #25303E, primary #0078CD; type scale h1 52px / h2 42px / body 12px; 4px spacing base; 4px base radius. The single interactive/action color is #0078CD — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F1F2F3`
border	`#DEDFE2`
text	`#25303E`
text_muted	`#777E87`
primary	`#0078CD`
accent	`#0078CD`
link	`#25303E`
secondary	`#1863DC`
button_bg	`#0078CD`
button_text	`#FFFFFF`

Using these colors

Action color #0078CD — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #0078CD — one role, not several (the action color).
accent #0078CD — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #25303E — inline text links and link-styled controls.
secondary #1863DC — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Poppins
Body: Roboto
h1: 52px
h2: 42px
body: 12px

Spacing

base unit: 4px
scale: 4px, 6px, 8px, 10px, 12px, 13px, 16px, 24px, 32px, 40px

Radii

base: 4px
button: 4px

Shadows (elevation)

card: rgba(172, 171, 171, 0.3) 0px -1px 10px 0px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 300ms · 500ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · cubic-bezier(0.4, 0, 1, 1)
animated properties: color, background-color, border-color, outline-color

Native design tokens

Token	Value
`--background`	`#fff`
`--foreground`	`#25303e`
`--color-hc-gray-800`	`#444a53`
`--color-hc-slate`	`#25303e`
`--color-slate-700`	`lab(26.9569% -1.47016 -15.6993)`
`--color-hc-sky-500`	`#0296ec`
`--color-hc-gray-200`	`#dee3ec`
`--color-hc-white`	`#fff`
`--color-hc-sky-300`	`#60b5f0`
`--color-blue-700`	`lab(36.9089% 35.0961 -85.6872)`

…and 110 more measured on the page.

Button states (measured)

primary hover: border 2px solid rgb(7, 152, 236) · background #0797EB

Layout (measured)

container max-width: 1344px
nav: 105px sticky
common grid: 2 columns

Motion choreography (measured)

Load order: div.animate-fadeIn → div.data-[state=closed]:anim → div.animate-[fadeIn_1s] → ul.flex

Scroll reveal: 1 elements rest at opacity 0, animate in over 500ms.

Overlay recipe (measured)

dialog panel: #FFFFFF · radius 6px

Responsive (measured)

breakpoints: 352px · 390px · 400px · 425px · 440px · 576px
mobile (390px): hero 16px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Observability built for the AI era