# Space DS

> Open source design system by José Flores: the bridge between design and development. Same token names in Figma and in code, for plain CSS and Tailwind CSS v4, with light and dark mode. Components are styled only with tokens; semantic color tokens switch automatically between light and dark.

Key facts:
- Font: IBM Plex Sans (400, 600, 700, italic).
- Every token is a CSS variable. Figma name `primary/500` = `--color-primary-500` = Tailwind `bg-primary-500`.
- Use semantic colors in components: `--color-bg-*`, `--color-text-*`, `--color-icon-*`, `--color-border-*`, `--color-action-*`. Never hard-code hex values.
- Control heights: `h-control-sm` 32, `h-control-md` 40 (default), `h-control-lg` 48. Radius `rounded-control`. Focus: `focus-visible:shadow-focus-ring`.
- Dark mode: automatic with the system, or force it with `<html data-theme="dark">`. No `dark:` classes needed.

## Getting started

- [README](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/README.md): install for plain CSS and Tailwind v4
- [Token reference](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/tokens.md): every variable with its light and dark value
- [tokens.json](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/tokens/tokens.json): all tokens in DTCG format

## Foundations

- [Color](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/foundations/color.md): primitives, semantic tokens, dark mode
- [Typography](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/foundations/typography.md): type ramp from caption to display
- [Space and sizing](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/foundations/space-and-sizing.md): 4px scale, control, icon and avatar sizes
- [Radius, shadow and effects](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/foundations/radius-shadow-effects.md): radius, elevation, focus ring, opacity, blur
- [Motion and layout](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/foundations/motion-layout.md): durations, easing, z-index, breakpoints, responsive grid

## Components

- [Button](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/button.md): actions; also icon button
- [Input](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/input.md): single-line field
- [Text area](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/text-area.md): multi-line field
- [Checkbox](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/checkbox.md): one or more options
- [Radio](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/radio.md): exactly one option
- [Switch](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/switch.md): on/off setting applied immediately
- [Chip](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/chip.md): filters, tags, entered values
- [Avatar](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/avatar.md): person or entity
- [Menu](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/menu.md): floating list of actions
- [Tabs](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/tabs.md): switch between views
- [Tooltip](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/tooltip.md): short explanation on hover or focus
- [Snackbar](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/docs/components/snackbar.md): brief confirmation

## Optional

- [Figma file](https://www.figma.com/design/P5KYJrEA2XqhVvwvI0IFgZ/Space-Design-System): source of truth
- [Raw Figma export](https://raw.githubusercontent.com/josefloresdesign/space-ds/main/tokens/figma/variables.json)