Superfast motion
for every team.
A clean, fast canvas built on near-black ink, a pure greyscale ramp and one electric cyan accent. Tight grotesque type, pill buttons and a springy sense of motion.
Two forward chevrons.
Two forward chevrons — speed, play, fast-forward — mapping straight onto dsvcore’s superfast motion. The leading chevron carries the accent; “dsv” is the strong ink, “core” a muted grey.
On light · dsv ink, core grey
On dark · dsv white, core grey
Variants
Animations — pure CSS, looping
Forward
Chevrons chase rightward
Draw
Strokes draw in sequence
How to use it.
Clearspace
Keep free space of at least the chevron height (≈ one “»”) on every side. Nothing intrudes.
Minimum size
Don’t render the icon below 16px or the lockup below 88px wide — the chevron gap closes up.
Colour usage
On light
Full colour
On dark
Full colour
One-colour
Ink only
On accent
Ink, one-colour
Do & Don’t
Backgrounds & favicon
The icon ships with transparency. When a contained mark is needed — a favicon, an app tile, an avatar — drop it on a black circle (transparent outside the circle) so it holds up on any background. A white circle is the inverse, for dark surroundings.
Keep the chevron at ~70% of the circle diameter. The circle may carry slight transparency (≈ 90%) when used as a scrim.
On things.
T-shirt
Black tee · white + accent, centre chest
Sweater
Accent knit · ink one-colour, left chest
Cup
White mug · ink + accent
Command line — the dsv CLI
$ dsv init »» dsvcore ready in 0.4s $ dsv build --watch » watching components… ✓ compiled 3 files $ ▋
Colours to set
accent / prompt / success
#23FEF1 · ESC[38;2;35;254;241m
text · dsv
#F4F4F5 · ESC[38;2;244;244;245m
muted · core
#8A8A8F · ESC[38;2;138;138;143m
background
#100F12 · ESC[48;2;16;15;18m
# ~/.config/dsv/theme DSV_ACCENT="#23FEF1" # prompt char » DSV_TEXT="#F4F4F5" DSV_MUTED="#8A8A8F" DSV_PROMPT="»"
Tight, bold, grotesque.
Body / Inter
Inter carries every interface surface — labels, paragraphs and controls — at a comfortable reading rhythm. The display face is a tight neo-grotesque set heavy with negative tracking.
Weights
One accent. The rest is greyscale.
#23FEF1
Brand cyan · CTAs, highlights, focus
#19171C
Near-black · text + dark surfaces
#FFFFFF
Canvas · the default background
Accent tones — click a swatch in the header to switch the whole system
Everything springs.
Spring scale on hover
--ease-back
Idle float loop
ds-anim-float
Overshoot pop
--ease-spring
Pills, cards & controls.
Buttons — variants
Sizes & states
Native pill buttons with the dsvcore spring on hover & press.
HeroUI (themed)
HeroUI inherits the same tokens via the theme config.
Import from anywhere
Large 40px radii, generous padding and a quiet hairline border — the canvas card used across the system.
Ready to move fast?
Inputs that feel quick.
Controls
Tabs
Underlined
Charts that animate in.
Bars, lines and counters are powered by anime.js. Each one plays a single springy entrance the first time it scrolls into view — kept in greyscale, so the data stays calm and the colour is saved for where it matters.
Bar chart
Line chart
Render success
Frames exported
Faster workflow
Put together.
Performance
Last 7 days · live preview
Revenue
Growth
Orders
Trend
By quarter
Pro/mo
- ✓ Unlimited projects
- ✓ 4K & Lottie export
- ✓ Team collaboration
- ✓ Priority rendering