Design kit

Daylight Sonar

The OwlSonar marketing design system — warm paper, ink type, lime signal, sonar-ring motif. Everything namespaced under .lp. ← Back to landing

01 · Color tokens
paper#faf8f1
paper-2#f2efe4
card#ffffff
ink#171a10
muted#62684f
line#e7e3d3
lime#c8f24e
lime-deep#a4d32a
lime-soft#eff8d1
green#4b6b10
critical#e25c4f
minor#d9962b
info#3e9fd0
dark#0c0d10
02 · Typography — Fraunces · Hanken Grotesk · JetBrains Mono
Display / Fraunces 600Heading / Fraunces 600Subheading / Fraunces 600 · 1.25rem

Lead / Hanken Grotesk 400 — OwlSonar sweeps competitor surfaces around the clock and pings your team the moment anything shifts.

Eyebrow / JetBrains Mono 500Mono detail / JetBrains Mono — acme.com/pricing · 2 min ago
03 · Buttons
04 · Badges, chips & severity
LIVE BADGE Pricing & plans ProductsCriticalMajorMinorInfo
05 · Flat icon set — two-tone, 24px grid
OwlMark
IconPing
IconRadar
IconTag
IconSparkle
IconUsers
IconScroll
IconBox
IconMegaphone
IconLayers
IconArticle
IconTeam
IconBriefcase
IconBell
IconBolt
IconPlug
IconMail
IconChat
IconHook
IconCheck
IconShield
IconClock
IconDiff
IconKey
IconGlobe
06 · Surfaces & radii — 10 / 16 / 24 / 32
r-sm · 10px
r-md · 16px
r-lg · 24px
r-xl · 32px + shadow-lg
07 · Motion — ease cubic-bezier(.22,.61,.21,1) · 180/380/750ms · ping, sonar, float, marquee, rise
PING FLOAT
SONAR