The 5 Layers of a Design System

The 5 layers

  1. Atoms (in the design system)
  2. Molecules (in the design system)
  3. Organisms (in the design system)
  4. Templates (in the application code)
  5. Pages (in the application code)
This diagram is from the Radius storybook.
  1. Design tokens (in the design system)
  2. Elements (in the design system)
  3. Patterns (in the design system)
  4. Features (in the application code)
  5. Layouts (in the application code)

Design Tokens

const theme = {
colors: {
primary1: "#07005B",
primary2: "#1D35AF",
secondary1: "#E34F30",
secondary2: "#3CA6E0",
secondary3: "#C17259",
secondary4: "#0E78B2",
secondary5: "#00875E",
},
};

Elements

<RadioButton />
  • Link
  • Tab
  • Checkbox
  • Input
  • Grid
  • Box

Patterns

const radioList = [
{
label: 'Specialized Diverge',
value: 'diverge'
},
{
label: 'Specialized Roubaix',
value: 'roubaix'
},
{
label: 'Specialized Allex',
value: 'allez'
}
]
<RadioList data={radioList}/>
  • TabsList
  • Form
  • NavBar

Features

const SurveyQuestion = () => (
<>
<Text>What is the answer to this question</Text>
<RadioList data={radioList} />
<Button>Submit</Button>
</>
);
  • ShippingAddressForm
  • CrossSellModule

Layouts

const Survey = () => {  return (
<>
{questions.map(question => {
return <SurveyQuestion question={question} />
})
</>
)
}
  • Survey
  • CheckoutPage
  • HomePage

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store