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

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

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

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.

Hogg.io

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

Preshape Style Guide

Preshape Style Guide for guidance and component API documentation.