1.5.1 • Published 5 months ago
rtg-design-web
Web design system for my personal digital properties.
Additional design systems:
Using SASS in your project
Compile your project's CSS from the rtg-design-web source SASS.
@use 'rtg-design-web';
Using design tokens
Color
Use theme color tokens to produce a coherent user experience.
Color theme tokens
| Token | Value |
|---|
'background' | #f9f9f9 |
'border' | #e6e6e6 |
'text' | #1b1b1b |
Using color tokens
| Context | Usage | Example |
|---|
| function | color(token) | color: color('text') |
Font family
Font family tokens make it possible to set font family based on type or role.
Available fonts
The following font stacks are available.
| Token | Value |
|---|
'helvetica' | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif |
'monospace' | ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace |
'system' | -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji |
Type-based theme tokens
| Token | Value |
|---|
'mono' | monospace |
'sans' | helvetica |
'serif' | false |
Role-based theme tokens
| Token | Value |
|---|
'alt' | false |
'body' | helvetica |
'code' | monospace |
'heading' | helvetica |
'ui' | helvetica |
Using font family tokens
| Context | Usage | Example |
|---|
| function | family(token) | font-family: family('body') |
Font weight
There are nine font weight theme tokens drawn from corresponding system tokens.
Font weight theme tokens
Font weight theme tokens use common weight names. Most projects will use only a few of these tokens, with the majority set to false.
| Token | Value |
|---|
'thin' | false |
'light' | false |
'normal' | 400 |
'medium' | 500 |
'semibold' | false |
'bold' | 700 |
'heavy' | false |
Using font weight tokens
| Context | Usage | Example |
|---|
| function | font-weight(token) | font-weight: font-weight('bold') |
Line height
There are four role-based line height tokens to control the amount of space between lines in a block of text.
Line height theme tokens
| Token | Value |
|---|
ui | 1 |
heading | 1.25 |
body | 1.5 |
extended | 1.75 |
Using line height tokens
| Context | Usage | Example |
|---|
| function | line-height(token) | line-height: line-height('body') |
Type scale
The system type scale is based on 16px by default. Custom scale factors and base font sizes can be used to build unique exponential type scales.
Using type scale
| Context | Usage | Example |
|---|
| function | type-scale(exponent[, scaling-factor, base]) | font-size: type-scale(2) |
Spacing units
Spacing unit tokens are based on multiples of 8px.
Spacing unit tokens
Any numeric token is supported.
Using spacing unit tokens
| Context | Usage | Example |
|---|
| function | units(token) | padding: units(2) |
Breakpoints
Breakpoint theme tokens
| Token | Value |
|---|
'phone' | 320px |
'phone-lg' | 480px |
'tablet' | 640px |
'tablet-lg' | 880px |
'desktop' | 1024px |
'desktop-lg' | 1200px |
'widescreen' | 1400px |
Using breakpoint tokens
| Context | Usage | Example |
|---|
| function | breakpoint(token) | max-width: breakpoint('tablet') |
| mixin | at-media(token) | @include at-media('desktop') |
Contributing
Versioning
This design system uses SemVer—Semantic Versioning. The three types of versions are:
- Major versions contain breaking changes.
- Minor versions add new features or deprecate existing features without breaking changes.
- Patch versions fix defects or optimize existing features without breaking changes.