OSKRHQ.DS

This is a Design System created for both Designers and Developers. The system makes use of a CSS architecture based on a shared anatomy (Color, Typography, Space, Depth, and Motion), and a variety of React Presentational Components built from this shared anatomy. The system also has a UI Kit with available Sketch Symbols matching these React Components so Designers and Developers are always in sync. 🤙🏽

Installation

npm i --save oskrhq-design-system

Usage

Include the CSS Architecture in your SCSS files:

@import "node_modules/oskrhq-design-system/styles/styles.scss";

Include any of the provided components in your project:

import { DSAvatar, DSButton, DSRadio } from "oskrhq-design-system";

Tell React to render the element in the DOM:

ReactDOM.render(
  <DSButton type="primary" onClick={() => alert("Button clicked!")}>
    Press Me
  </DSButton>,
  document.querySelector("#app")
);

Theming

It is very easy to theme the Design System to your Brand Guidelines. Just override the values on the ./lib/styles/1-themes/theme-default.scss, or create your own following the same schema.

Color

OSKRHQ.DS groups color into 3 types; Brand, Neutral, and Feedback Colors.

Brand Colors: These establish the personality of the brand. They should be used for accent elements such as primary buttons, CTA's and links.
Neutral Colors: These are used for things like text, borders, shadows, background colors, etc.
Feedback Colors: These are used to communicate status to the user and provide them with feedback.

A color palette is all of these colors put together. OSKRHQ.DS offers a default palette that contains all of these types of colors.

Color System

Color follows a predictable scale driven by type and a range. Each heu or color has a Base (400) and from this base, I extract shades and tints of that heu. Each variation of this color is given a three-digit rage number. This provides a predictable color scale of "allowed" colors in the system; the higher a number is, the darker the color.

Usage

OSKRHQ.DS makes use of Sass Functions to extract colors from each type in a consistent way.

`ds-color($type, $range)`

Applies a color from our palette to a CSS property. $type refers to the type of color you would like to use (brand, neutral, feedback). $range refers to the scale or how dark you would like to color to be. If $range is not specified, the color will default to the base color for that type.

.div-container {
    background-color: ds-color(primary, 700); // returns a hex value for that type of color and its range
}

`ds-color-contrast($background-color, $dark-color: ds-color(neutral, 700), $light-color: ds-color(neutral, 000))`

Applies a color from the palette to a CSS property based on a given background color in accordance with accessibility standards. $background-color refers to the background color in which the foreground color is going to sit. $dark-color (Optional) refers to the dark color you wish to display if there is enough contrast. $light-color (Optional) refers to the light color you wish to display if there is enough contrast. If neither $dark-color or $light-colorare specified, the colors will default tods-color(neutral, 700)andds-color(neutral, 000)` respectively.

$button-background-color: ds-color(primary, 400);
$button-text-color-dark: ds-color(primary, 600);
$button-text-color-light: ds-color(primary, 200);

.button {
    background-color: $button-background-color;
    color: ds-color-contrast($button-background-color, $button-text-color-dark, $button-text-color-light); // returns a hex value with enough contrast for its background
}

Supporting Material

Typography

OSKRHQ.DS uses Lato as it Font Family with specific typographic styles that define a hierarchy for both mobile and web.

H1
H2
H3
H4
H5
H6
Subtitle1
Subtitle2
Body2
Body1
Caption
Button
Overline
Link
List

Type System

Font size, font weight, and line-height have their own predictive scales.

$ds-theme-base-font-size: 16px;

$ds-font-size-data: (
  H1: $ds-theme-base-font-size * 6,
  H2: $ds-theme-base-font-size * 3.75,
  H3: $ds-theme-base-font-size * 3,
  H4: $ds-theme-base-font-size * 2.125,
  H5: $ds-theme-base-font-size * 1.5,
  H6: $ds-theme-base-font-size * 1.25,
  subtitle2: $ds-theme-base-font-size * 0.875,
  subtitle1: $ds-theme-base-font-size,
  body2: $ds-theme-base-font-size * 0.875,
  body1: $ds-theme-base-font-size,
  caption: $ds-theme-base-font-size * 0.857,
  button: $ds-theme-base-font-size * 0.857,
  overline: $ds-theme-base-font-size,
  link: $ds-theme-base-font-size,
  list: $ds-theme-base-font-size
);

Font Weight

For font-weight I use words.

$ds-font-weight-data: (
  bold: 900,
  semibold: 600,
  normal: 400,
  light: 300
);

Line Height

I use three digits to convey in line-height. The higher the range number, the higher the line-height.

$ds-line-height-data: (
  H1: normal,
  H2: normal,
  H3: normal,
  H4: normal,
  H5: normal,
  H6: normal,
  subtitle2: 1.6,
  subtitle1: 1.6,
  body2: 1.5,
  body1: 1.5,
  caption: 1.5,
  button: 1.5,
  overline: 1.5,
  link: 1.5,
  list: 1.5
);

Usage

I make use of Sass functions and mixins to use in our mark up.

Functions

`ds-font-size($range)`

Applies a font size from the allowed sizes in the system to a CSS property. $range refers to the scale of how big you would like the font-size to be. The higher the number, the bigger the font-size.

.div-container {
    font-size: ds-font-size(500); // returns a pixel value for that range
}

`ds-font-weight($weight)`

Applies a font weight from the allowed weights in the system to a CSS property. $weight refers to either bold, semibold, base, light, etc.

.div-container {
    font-size: ds-font-weight(bold); // returns a weight value for that range (300 - 900)
}

`ds-line-height($range)`

Applies a line height from the allowed line heights in the system to a CSS property. $range refers to how high you would like the line-height to be. The higher the number, the higher the line-height.

.div-container {
    font-size: ds-font-weight(bold); // returns a weight value for that range (300 - 900)
}