Jessica Klutch - Design System

A profile sketch of a woman with glasses smiling.

Clean, Legible, Inquisitive

The design system in this website is intended for personal use only for the author's portfolio site. The design for this system was inspired by a mind map and the adjectives, "Clean", "Legible", and "Inquisitive".

The foundations of the design system shares styles for the typography, color, and logo of the site. Key components are featured, including the Buttons, Cards, and Navigation Menu with code snippets for easy replication. Accessibility and Usage are described for each component.

Foundation

The foundations consist of three pages: Typography, Color, and Logo. A typographical hierarchy describes the correct use of font-family, sizes, weights, and colors used in the system. The color page outlines color hexedecimals and their correct usage. Lastly, the Logo page shares multiple logos and their respective usage.

Components

This design system shares guidelines for three components: Buttons, Cards, and the Navigation Menu. The intended use, accessibility and HTML code is described for all.

Patterns

Page patterns are shown for two pages in the portfolio site: Home and Work. Patterns contain screen layouts and Bootstrap-5 grids for various device sizes.