Preshape

A minimal design system and library of composable React components, primarily for my personal projects.

Colours

A minimal set of colours to provide clear contrast across the Day and Night themes. All colours are from the optimised open source Open Color scheme.
ColourCSS VariableValue
Dark (Shade 1)var(--color-dark--shade-1)#212529
Dark (Shade 2)var(--color-dark--shade-2)#343a40
Dark (Shade 3)var(--color-dark--shade-3)#495057
Light (Shade 1)var(--color-light--shade-1)#f8f9fa
Light (Shade 2)var(--color-light--shade-2)#f1f3f5
Light (Shade 3)var(--color-light--shade-3)#e9ecef
Accent 1 (Shade 1)var(--color-accent-1--shade-1)#4dabf7
Accent 1 (Shade 2)var(--color-accent-1--shade-2)#339af0
Accent 1 (Shade 3)var(--color-accent-1--shade-3)#228be6
Accent 2 (Shade 1)var(--color-accent-2--shade-1)#9775fa
Accent 2 (Shade 2)var(--color-accent-2--shade-2)#845ef7
Accent 2 (Shade 3)var(--color-accent-2--shade-3)#7950f2
Positive (Shade 1)var(--color-positive--shade-1)#69db7c
Positive (Shade 2)var(--color-positive--shade-2)#51cf66
Positive (Shade 3)var(--color-positive--shade-3)#40c057
Negative (Shade 1)var(--color-negative--shade-1)#ff8787
Negative (Shade 2)var(--color-negative--shade-2)#ff6b6b
Negative (Shade 3)var(--color-negative--shade-3)#fa5252

Themes

Day Theme
theme="day"
Night Theme
theme="night"
Themes give a UI a unique appearance, while still retaining an overal consitent feel of the design system. The right theme choice depends on factors such as the UI's focal point, the target audience or what time the majority of activty occurs.
The Day theme may be better used for websites where the main focus is the text, that are being looked at for a short duration.
The Night theme may be better for a UI where users spend long periods of time concentrating on the content.

Animations & Transitions

cubic-bezier(0.25, 0.46, 0.45, 0.94)

var(--transition-timing-function)

Slow (800ms)
var(--transition-time--slow)
Base (400ms)
var(--transition-time--base)
Fast (200ms)
var(--transition-time--fast)
Animations, when used functionally, are a great way to visually ease from one state to another and subtley provide an extended form of feedback that a state has changed.
The human brain is adept to idenitifying subtle inconsistencies (like noticing outo of sync audio on the TV), so a consistent approach to animations and transitions is important otherwise there is the risk of presenting chaos.

Sizing

The sizing and spacing of a UI defines section relationships and can instantly affect how an UI is received. Too little space and a UI can feel cluttered and chaotic, too much space and it can feel empty or unrelated.
General Sizing
NameCSS Custom Property
x1
var(--size--x1)
x2
var(--size--x2)
x3
var(--size--x3)
x4
var(--size--x4)
x6
var(--size--x6)
x8
var(--size--x8)
x10
var(--size--x10)
x12
var(--size--x12)
x16
var(--size--x16)
Border Sizing
NameCSS Custom Property
x1
var(--border-size--x1)
x2
var(--border-size--x2)

Components

A collection of React Components to provide the building blocks for UIs.
Alert
Useful for bringing attention to a message.
View Component
Appear
Adds some subtle animations to the entrance and exit of sections of the UI.
View Component
Application
High level application components for common layouts and functionality.
View Component
Base
The core component that is the end of the chain for all other components. It provides general utility behaviour and styling.
View Component
BlockQuote
A visually indented way of representing quoted text.
View Component
Bounds
A behaviour component that uses the Resize Observer API to observe width and height of an element.
View Component
BulletPoints
A vertical list component for listing your todos.
View Component
Button
A standard clickable button to trigger some sort of action.
View Component
CheckBox
Standard input for selecting multiple choices.
View Component
CodeBlock
A syntax highlighting code block component, which uses PrismJS under the hood.
View Component
Flex
Simple, all purpose flexing component to achieve common UI layouts and placements.
View Component
Grid
A use case driven grid system (using display: grid;) for auto flowing, flexible and fixed column layouts.
View Component
Icon
Unambiguous icons to give more visual meaning to text. Icons are selected from the Feather Icon set.
View Component
Input
Standard single line text input for collection user feedback data.
View Component
Label
Keyword highlighting component, useful for giving specific data emphasis.
View Component
Link
Clearly styled links to indicate an interaction. React Router compatible when provided with a "to" destination.
View Component
List
Inline listing component, useful for separating out UI actions and a short list of options.
View Component
Menu
Top level navigational component. React Router compatible, when provided with a "to" destination it will also be used to apply the active state when that path is active.
View Component
RadioButton
Standard input for selecting a single choice.
View Component
Responsive
A behavioural component that provides a way to dynamically render components and set props depending on the viewport size.
View Component
SwitchTransition
A React Router Switch component that subtley transitions route changes.
View Component
Tab
Tab organisational components, useful for laying out related by nonconcurrent parts of the UI.
View Component
Table
Standard table layout components. Useful for presenting, comparing and sorting raw tabular data
View Component
Text
The core component for styling text. Instead of specifying various elements, a suitable and semantic element will be determined from the props.
View Component
TextArea
Standard multiple line text area input for collection user feedback data.
View Component
Toolbar
A contextual multi-purpose toolbar. Useful for editors that require inline actions.
View Component

Guides

A brief selections of guides to Preshape and its patterns.
Getting Started
Preshape is designed to rapidly build the basics of interfaces, with flexibility from a deliberately minimal design.
Responsive Design
Guidance around Preshapes Responsive component, and responsive design with the Javascript matchMedia API.
Composition
Guidance around composing multiple Preshape components and the underlying behaviour of the Base component.
Themeing
Guidance around Preshapes themeing requirements and capabilities with CSS Custom properties and accompanying Components.

Built With Preshape

I built Preshape as a way of shortcutting the repetitive development of common UI patterns for my own side projects. Here's a list of stuff built with it.
Snake Heuristics

A game for developers to write an optimal heuristic function for the perfect game of snake.

Check it out
Hogg.io

My personal website to list my professional experience, personal experiments and side projects.

Check it out
Preshape Style Guide

Preshape Style Guide for guidance and component API documentation.

Check it out

  • Check out this project on Github