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.