rtg-design-web

Web design system for my personal digital properties.

Additional design systems:

• rtg-design: Core design system

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.