rtg-design-web

1.5.1 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i rtg-design-web

Weekly Downloads

1

Version

1.5.1

License

MIT

Unpacked Size

20.1 kB

Total Files

31

Last publish

Collaborators

  • ryantoddgarza