Skip to content

Abhishek Shankar design system: docs

These files ship inside @abhishekshankar/ds, so the copy in node_modules/@abhishekshankar/ds/docs always matches the installed version. Read them before building UI.

File Read when
foundations.md Choosing color, type, spacing, radius, elevation, layout
interaction-motion.md Any hover/focus/transition/animation work, or anything interactive
components.md Building any component: anatomy, variants, states, rules
adapters.md Wiring the package into a stack: plain CSS, Tailwind v4, JS frameworks, native, Figma
contributing.md You built something the DS doesn't have yet

The look in ten rules:

  1. Two text tones: --color-text-primary and --color-text-secondary, paired.
  2. Switzer. Display 450 with −0.055em tracking, titles 500, eyebrows 600 uppercase +0.09em. Never bold 700.
  3. Warm neutrals: page #fff, raised #fbf9f8, inverse #1f1e1d. No cool greys or pure black surfaces. Light by default; dark only when the user chooses it.
  4. Flat surfaces split by 1px 6% borders. Shadows only on floating layers.
  5. Radius by size: 4 / 6 / 10 / 16 / 20 / pill.
  6. Teal accent only as a tint, border, glow or small text on dark. Never filled buttons.
  7. Generous whitespace: section padding clamp(88px, 11vw, 152px), 700–900px center column.
  8. Hover changes color (secondary → primary) and arrows nudge 3px. No underline, scale, lift or glow.
  9. Motion: 150 hover, 200 controls, 280 enter, 180 exit, token easings, transform/opacity only.
  10. Accessibility is style: 2px focus ring, 44px touch targets, hover content also on focus/touch, reduced motion honored.