🥽 Spectacles

🚧 This is just an idea being sketched out at the moment 🚧

Spectacles is an opinionated design system built on-top of Alembic. It tries to be a clean white-labelled system so that it can fit as many projects as possible. It builds on top of Layouts & Forms and adds:

• A system of CSS design tokens
• Custom HTML Elements
• Guidelines
• Icons
• Best practises and patterns for using all of the above

Design Tokens

Design tokens are a way to store variables so they can be used in different systems and contexts. Codifying them helps bring consistency to the overall design and creates more pleasing interfaces.

Colour

???

Spacing

• --space-0 - smallest spacing
• --space-1
• --space-2
• --space-3
• --space-4
• --space-5 — the default space
• --space-6
• --space-7
• --space-8
• --space-9
• --space-10 - largest spacing

Line height

• --line-height-body: 1.4
• --line-height-heading: 1.1

Font size

Maybe generated from something like typescale.com?

• --font-size-xxl
• --font-size-xl
• --font-size-l
• --font-size
• --font-size-s
• --font-size-xs
• --font-size-xxs

Font family

• --font-family-body
• --font-family-heading
• --font-family-code

Font weight

• --font-weight-body
• --font-weight-heading
• --font-weight-code
• --font-weight-strong

Border radius

• --border-radius-sharp
• --border-radius-small
• --border-radius
• --border-radius-large
• --border-radius-circle
• --border-radius-pill

Border thickness

• --border-width-thin

• --border-width-thick

• ???