Skip to content
@abhishekshankar/ds · 0.1.0

Quiet, typographic, warm-neutral.

Tokens, components, motion and guardrails for everything Abhishek Shankar builds, in any stack.

Install

Set up a project (adds imports, lint configs, a CI step and DS_CANDIDATES.md):

npx @abhishekshankar/ds init

Or wire it by hand. See Using the package for Tailwind v4, frameworks and native.

@import "@abhishekshankar/ds/tokens.css";
@import "@abhishekshankar/ds/fonts.css";
@import "@abhishekshankar/ds/components.css";
Color · light · dark
text-primary#0a0a0a · #f8f7f5
text-secondary#717182 · #a09f9b
text-danger#a43a30 · #e0786d
surface-0#ffffff · #171615
surface-10#fbf9f8 · #1f1e1d
surface-inverse#1f1e1d · #f8f7f5
text-on-inverse#f8f7f5 · #0a0a0a
text-on-inverse-secondaryrgba(255, 255, 255, 0.6) · rgba(0, 0, 0, 0.6)
borderrgba(0, 0, 0, 0.06) · rgba(255, 255, 255, 0.08)
border-strongrgba(0, 0, 0, 0.24) · rgba(255, 255, 255, 0.28)
border-inversergba(255, 255, 255, 0.08) · rgba(0, 0, 0, 0.06)
dividerrgba(0, 0, 0, 0.05) · rgba(255, 255, 255, 0.06)
fill-hoverrgba(0, 0, 0, 0.03) · rgba(255, 255, 255, 0.04)
focus-halorgba(0, 0, 0, 0.05) · rgba(255, 255, 255, 0.08)
accent#6fb0c0
accent-subtlergba(111, 176, 192, 0.08)
accent-borderrgba(111, 176, 192, 0.24)
accent-glowrgba(111, 176, 192, 0.2)
caption-on-inversergba(255, 255, 255, 0.9)
caption-on-inverse-bgrgba(38, 38, 41, 0.94)
caption-on-inverse-borderrgba(255, 255, 255, 0.12)
Type
text-display
Display 450
text-subtitle
Subtitle deck
text-h2
Editorial heading
text-title
Section title
text-h3
Card title
text-body
Body text in secondary
text-eyebrow
Eyebrow label
text-prose
Long-form reading in Newsreader.
Radius
xs · 4px
sm · 6px
md · 10px
lg · 16px
xl · 20px
pill · 999px
Motion
--motion-duration-fast
150ms · hover, focus, tooltips
--motion-duration-moderate
200ms · toggles, menus, control state
--motion-duration-page
280ms · page / view enter
--motion-duration-page-exit
180ms · exit, always shorter than enter
--motion-duration-reveal
450ms · image and media fade-in (the one token over 300ms)
--motion-ease-standard
cubic-bezier(0.4, 0, 0.2, 1) · in-place state change
--motion-ease-enter
cubic-bezier(0.22, 1, 0.36, 1) · decelerate into place
--motion-ease-exit
cubic-bezier(0.4, 0, 1, 1) · accelerate away
--motion-ease-spring
cubic-bezier(0.34, 1.56, 0.64, 1) · small overshoot, rare
--motion-shift-page
4vw · page slide distance
--motion-shift-small
4px · caption rise, nudges