Specimen

A framework and ecosystem for building custom design systems without reinventing the wheel. Built on Emotion, inspired by Chakra UI and Styled System.

Getting started

Specimen provides a variety of helpful utilities that lets you define a theme with a few lines of code. You can always come back and tweak or define these later in more detail.

import { flow } from "lodash";
import { tShirts, goldenRatioSize, linearSize, triadic, materialShadows, createThemeProvider, combine, grayscale } from "@specimen/foundation";

// import ThemeProvider in your client code
export const ThemeProvider = createThemeProvider({
  color: combine(grayscale, complementary(275, "indigo", "forest"), { primary: '#4287f5' }), // create a color palette with colors such as black, grey.500, indigo.300 and primary
  space: flow(tShirts, goldenRatioSize), // will map 'md' to 16px, 'lg' to 26px etc. according to the golden ratio
  fontSize: flow(tShirts, linearSize(12, 2)), // will map 'md' to 12px, 'lg' to 14px etc
  shadow: materialShadows // creates sm md and lg shadows
})

Re-export specimen components as required

export * from "@specimen/foundation/components";
export * from "@specimen/button/components";
export * from "@specimen/select/components";

Create your custom components

export const MyCoolComponent = () => <Box p="md" bg={({color}) => color("primary").rgba(2)}>
    <Text>Hi from component!</Text>
</Box>

Congrats! You now have a powerful and highly customizable design system at your fingertips.

Why not start from scratch?

• Hit the ground running and focus on custom components that really matter
• Start building earlier without getting hung up on the details
• Avoid the pain of depending on custom components that later turn out to be flawed
• Take advantage of an ecosystem that's built on a shared language
• Stop reinventing the wheel

Philosophy

Make the common case as simple as possible

Much like Chakra UI, Specimen makes common things like spacing between elements, centering divs, padding and border radius trivially easy. You'll rarely need to write CSS, but when you do, the css prop is always available to you.

Functions over design tokens

Most design tokens follow some mathematical rule, so why not use functions instead? Functions can be composed, tweaked and interchanged much more easily

Visual first

Specimen decouples visual presentation from semantics, so next time you need a link that looks like a button or vice versa, start with the visuals and go from there