Skip to content

Instantly share code, notes, and snippets.

@namjul
Last active March 18, 2020 14:52
Show Gist options
  • Save namjul/4f8f51b56348db93b21b265aeb234b1a to your computer and use it in GitHub Desktop.
Save namjul/4f8f51b56348db93b21b265aeb234b1a to your computer and use it in GitHub Desktop.

The styleguide could be roughly structured in the following way.

Introduction/Gettings started

Section which introduces the design-system and contains links to the most looked for resources

Values

Section which contains informations about principles/values/goals

Foundation

Colors

Icons/Iconography

Font/Typography

Architecture

Section explaining the core architectural patterns the design-system is build on

Theming

Section which contains informations about our theme structure (tokens) and how to use it in code

Design patterns

Spacing

Section which anwers questions about vertical and horizontal spacing

Primitives/Pattern components

Section explaining what primitives and pattern components are

Sizes

Section explaining what the size prop is about

system-props/css prop

Section explaining system/global props

Components

Global Rules

Getting started

  • The getting started section can include how a basic usage of the DS
  • An overview of core concepts (primitives/patterns, system-props/css prop, theme, )

Concepts

CSS-in-JS

css props

primitives/pattern components

The styleguide could be roughly structured in the following way.

Introduction

Section which introduces the design-system and contains links to the most looked for resources

Values

Section which contains informations about principles/values/goals

Foundation

Colors

Icons/Iconography

Font/Typography

Architecture

Section explaining the core architectural patterns the design-system is build on

Theming

Section which contains informations about our theme structure (tokens) and how to use it in code

Design patterns

Spacing

Section which anwers questions about vertical and horizontal spacing

Primitives/Pattern components

Section explaining what primitives and pattern components are

Sizes

Section explaining what the size prop is about

css prop

Section explaining the css prop and when/how to use it

Global Rules

here we could add global rules (e.g data entry, data display, data format, etc.)

Components

here we could rules specific to components

Introduction

Section which introduces the design-system and contains links to the most looked for resources

Values

Section which contains informations about principles/values/goals

Foundation

Colors

Icons/Iconography

Font/Typography

Architecture

Section explaining the core architectural patterns the design-system is build on

Theming

Section which contains informations about our theme structure (tokens) and how to use it in code

Design patterns

Spacing

Section which anwers questions about vertical and horizontal spacing

Primitives/Pattern components

Section explaining what primitives and pattern components are

Sizes

Section explaining what the size prop is about

css prop

Section explaining the css prop and when/how to use it

Global Rules

here we could add global rules (e.g data entry, data display, data format, etc.)

Components

here we could rules specific to components

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment