# styled-system/styled-system

⬢ Style props for rapid UI development

Repository: https://github.com/styled-system/styled-system
Canonical: https://ross.abutalabs.com/products/styled-system
Homepage: https://styled-system.com
Language: JavaScript
License: MIT
License Family: permissive
Topics: react, css-in-js, design-systems, styled-components, typography, layout, emotion, responsive, style-props, theming, tokens, colors, css, styling
Last push: 2024-01-12T19:55:49+00:00

## Health v2 (maintenance only)
Score: 23/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 0, release rhythm 8, longevity 100
- inputs: {"age_days": 3367, "days_push": 964, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 7865, forks 493 (observed 2026-08-28T04:10:08.096002+00:00)

## What it is
Styled System is a JavaScript library that provides utility style props for rapidly building UI components with CSS-in-JS libraries like styled-components and Emotion. It maps style props to design tokens, enabling consistent theming, typography, layout, and responsive styling in React design systems.

## Use cases
- build a design system with consistent spacing and color tokens
- style React components with props instead of writing CSS
- create responsive layouts with breakpoint-based props
- apply theming and dark mode to component libraries
- enforce typography scales across an app
- use style props with styled-components or Emotion

## When to choose
- you're building a React component library or design system on styled-components or Emotion
- you want token-driven, consistent styling with minimal CSS
- you need responsive style props out of the box

## When to avoid
- you use plain CSS, Tailwind, or a CSS-in-JS library without React
- you need a full component library rather than styling utilities
- you want a project with frequent updates and active development

## Facets
- artifact type: library
- maturity: maintenance
- function: ui-components, css-framework, state-management
- domain: frontend, web-development, web-design
- platform: browser, cross-platform
- tags: css-in-js, design-systems, style-props, theming, design-tokens, react, responsive-design, nodejs

## Member repositories
- styled-system/styled-system (main) score 23

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:10:08.096002+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:33:45.654227+00:00, confidence not recorded.
  - readme: https://github.com/styled-system/styled-system (fetched 2026-08-28T04:10:08.096002+00:00, sha 62fdfac1016e)
  - homepage: https://styled-system.com (fetched 2026-08-29T08:30:33.449148+00:00, sha 44136fa355b3)
- Data as of 2026-08-30T08:39:29.467469+00:00.