01 · Typography
Display
Aa Bb Cc
Barlow Condensed 900
Headers · Tabs · Hero
Body
Clean & readable prose for tools that get out of the way.
DM Sans 300–600
Body · Controls · Labels
Mono
FILE SIZE · 2.4 MB
FORMAT · WEBP
QUALITY · 85%
STATUS · DONE
JetBrains Mono 400–500
10px · Uppercase · 0.15em
02 · Color
Brand · Orange
Neutral · Gray
Surface
bg-[#f0f0f4]
neutral-100 · Page bg
Status
03 · Motion
Click each preset to see the spring in action.
fadeSlideUp · AnimatePresence
Results panel
Floats in with spring.float — stiffness 60, damping 20
04 · Components
Pill Picker
Queue States
Buttons
Drop Zone
Drop files here
PNG · JPEG · WEBP · AVIF
05 · Usage
CSS Import
@import "@encodehive/ui/styles/globals.css";
@import "@encodehive/ui/styles/persona.css";
Motion Import
import { spring, fadeSlideUp } from "@encodehive/ui";