datHere · Design Language

Build datHere.
Ship fast.

A complete visual language for datHere products — built on IBM Carbon, extended with brand tokens, 2,764 icons, and 148 animated glyphs.

Browse components → View on GitHub
2,764
Icons
148
Animated
144
CSS tokens
Carbon
Foundation

Foundation

Color

Brand blue from IBM Carbon blue-60. Every tone mapped to a --dh-* token. Color communicates action — never decoration.

Blue 10#EDF5FF
Blue 20#D0E2FF
Blue 30#A6C8FF
Blue 40#78A9FF
Blue 50#4589FF
★ Blue 60#0F62FE
Blue 70#0043CE
Blue 80#002D9C
★ Blue 90#001D6C
Blue 100#001141
Gray 10#F4F4F4
Gray 20#E0E0E0
Gray 30#C6C6C6
Gray 40#A8A8A8
Gray 50#8D8D8D
Gray 60#6F6F6F
Gray 70#525252
Gray 80#393939
Gray 90#262626
Gray 100#161616
Success#24A148
Error#DA1E28
Warning#F1C21B
Info#0043CE
Text primary#161616
Layer 01#F4F4F4

Foundation

Typography

IBM Plex Sans for UI and body. IBM Plex Mono for code and data. Productive scale for dense interfaces. Expressive scale for marketing.

Aa
IBM Plex Sans — UI & Body
Aa
IBM Plex Mono — Code & Data
Heading display — 36/40 expressive-05 · 300
Heading large — 28/36 expressive-04 · 400
Heading — 20/28 heading-05 · 400
Section title — 16/24 heading-04 · 600
Body — 14/20 · The quick brown fox jumps over the lazy dog. body-long-01 · 400
qsv stats --select 'col_a,col_b' data.csv code-01 · mono

Assets

Icons

2,764 Carbon icons across 16 / 20 / 24 / 32 px. Outlined, geometric, 1.5 px stroke. Mono-color — inherits currentColor when inlined.

Browse all 2,764 icons →

Assets

Motion icons

148 animated Carbon icons. Pure CSS keyframe animations — no JavaScript runtime, no Lottie. Hover to preview.

Browse all 148 animated icons →

Components

Built to Carbon spec

Square corners. 8-point grid. Flat by default. Color-shift on hover — no opacity tricks, no shadows in core UI.

Buttons

Tags

CSV Parquet Validated Error Archived GeoJSON

Input

Dataset card

U.S. Geological Survey USGS Streamflow — Rio Grande 38.1M rows · Updated today · CSV · GeoJSON

Code

qsv stats --select col_a,col_b data.csv
qsv frequency --select category data.csv
qsv validate schema.json data.csv
Browse all components →