Web design system for my personal digital properties.
Additional design systems:
Compile your project's CSS from the rtg-design-web source SASS.
@use 'rtg-design-web';
Use theme color tokens to produce a coherent user experience.
| Token |
Value |
'background' |
#f9f9f9 |
'border' |
#e6e6e6 |
'text' |
#1b1b1b |
| Context |
Usage |
Example |
| function |
color(token) |
color: color('text') |
Font family tokens make it possible to set font family based on type or role.
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 |
| Token |
Value |
'mono' |
monospace |
'sans' |
helvetica |
'serif' |
false |
| Token |
Value |
'alt' |
false |
'body' |
helvetica |
'code' |
monospace |
'heading' |
helvetica |
'ui' |
helvetica |
| Context |
Usage |
Example |
| function |
family(token) |
font-family: family('body') |
There are nine font weight theme tokens drawn from corresponding system 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 |
| Context |
Usage |
Example |
| function |
font-weight(token) |
font-weight: font-weight('bold') |
There are four role-based line height tokens to control the amount of space between lines in a block of text.
| Token |
Value |
ui |
1 |
heading |
1.25 |
body |
1.5 |
extended |
1.75 |
| Context |
Usage |
Example |
| function |
line-height(token) |
line-height: line-height('body') |
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.
| Context |
Usage |
Example |
| function |
type-scale(exponent[, scaling-factor, base]) |
font-size: type-scale(2) |
Spacing unit tokens are based on multiples of 8px.
Any numeric token is supported.
| Context |
Usage |
Example |
| function |
units(token) |
padding: units(2) |
| Token |
Value |
'phone' |
320px |
'phone-lg' |
480px |
'tablet' |
640px |
'tablet-lg' |
880px |
'desktop' |
1024px |
'desktop-lg' |
1200px |
'widescreen' |
1400px |
| Context |
Usage |
Example |
| function |
breakpoint(token) |
max-width: breakpoint('tablet') |
| mixin |
at-media(token) |
@include at-media('desktop') |
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.
