↓ Download MD File

UI Kit & Design System Documentation

ghite.works Design System

---

Table of Contents

• Overview
• Design Tokens
  • Color Palette
  • Typography Scale
  • Spacing Scale
• Components
  • Buttons & CTAs
  • Navigation
  • Forms
  • Cards & Containers
  • Layout Patterns
• Effects & Animations
• Design Principles
• Usage Guidelines
• File Structure

---

Overview

This design system showcases all components, patterns, and design elements used throughout the ghite.works portfolio website. Built with a brutalist aesthetic, desktop-first approach, and strong emphasis on typography and motion.

Access: ui-kit.html (standalone page, not linked in navigation)

Tech Stack:

• HTML5
• CSS3 (Custom properties, Grid, Flexbox)
• Vanilla JavaScript
• Google Fonts (Inter, JetBrains Mono)

---

Design Tokens

Color Palette

Primary Colors

--black: #292b2d;
--white: #f9f7f4;
--pure-white: #ffffff;

Color	Hex	Usage
Black	#292b2d	Primary text, borders, backgrounds
White	#f9f7f4	Background, contrast elements
Pure White	#ffffff	Navigation text, high contrast

Usage Rules:

• Use black (#292b2d) for all text and borders on light backgrounds
• Use off-white (#f9f7f4) for main background sections
• Use pure white (#ffffff) for navigation and high-contrast text
• Alternate sections between light and dark backgrounds
• Avoid gradients - maintain flat, bold colors

---

Typography Scale

Primary Font: Inter (sans-serif)
Secondary Font: JetBrains Mono (monospace)

Type Scale

Level	Size	Weight	Letter Spacing	Usage
Display / Hero	96px	900	-4px	Main hero titles
Section Title	64px	900	-2px	Section headings
Large Text	48px	700	-1px	Featured content
Subtitle / Emphasis	40px	500	3px	Subheadings
Project Title	24px	900	-0.5px	Project names
Body Large	18px	400	0.5px	Intro paragraphs
Body / Paragraph	16px	400	0.5px	Standard text
Navigation / Small	14px	400	0px	Links, labels
Monospace / Code	14px	700	2px	CTAs, technical

---

Spacing Scale

Based on 8px grid system:

Token	Size	Usage
--space-xs	12px	Tight spacing, inline elements
--space-sm	24px	Component padding, small gaps
--space-md	48px	Standard component spacing
--space-lg	96px	Section spacing, large gaps
--space-xl	144px	Extra large sections

Guidelines:

• Section padding: 80px - 120px vertical
• Component gaps: 20px - 60px depending on hierarchy
• Container padding: 40px - 60px horizontal
• Maintain generous whitespace for breathing room

---

Design Principles

1. Brutalist Aesthetic

• Bold typography with extreme weight contrast
• High contrast black/white color scheme
• Geometric shapes and hard edges
• Raw, unpolished design elements
• 3px borders throughout
• No subtle gradients or shadows

2. Desktop-First

• Optimized for 1920x1080 displays
• Generous spacing and large typography
• Min-width: 1280px to prevent layout breaking
• Max-width: 2560px for ultra-wide displays
• Responsive breakpoints for smaller screens

3. Motion & Animation

• Subtle scroll-triggered animations
• Smooth transitions with custom easing
• Bouncing arrows on CTAs
• Deconstruct/reform effects on headings
• Parallax effects on hero sections

4. Mix Blend Modes

• Difference blend ensures navigation visibility
• Works on both light and dark backgrounds
• Fixed navigation remains readable
• Creative use of color inversion

5. Strong Hierarchy

• Dramatic scale differences (96px → 14px)
• Clear weight contrast (900 → 400)
• Negative letter-spacing on display text
• Positive letter-spacing on small text
• Uppercase for emphasis, lowercase for subtlety

6. Custom Cursor

• Glassmorphism effect with blur
• Follows mouse movement smoothly
• Adds unique interactive layer
• Enhances premium feel

---

Usage Guidelines

Typography

Do:

• ✅ Use Inter for all UI elements and body text
• ✅ Use JetBrains Mono for labels, codes, and CTAs
• ✅ Maintain uppercase for titles and emphasis
• ✅ Keep lowercase for navigation and subtle elements
• ✅ Use negative letter-spacing for large display text
• ✅ Use positive letter-spacing for small uppercase text

Don't:

• ❌ Mix too many font weights in one section
• ❌ Use lowercase for section titles
• ❌ Apply letter-spacing inconsistently
• ❌ Use fonts outside the system

---

Color Usage

Do:

• ✅ Primary: #292b2d (black) for text and borders
• ✅ Background: #f9f7f4 (off-white) for main sections
• ✅ Contrast: Pure white (#ffffff) for navigation text
• ✅ Alternate sections between light and dark backgrounds
• ✅ Use highlight-box for emphasis on light backgrounds

Don't:

• ❌ Use gradients or soft shadows
• ❌ Add colors outside the palette
• ❌ Use gray tones for text
• ❌ Mix multiple background colors in one section

---

File Structure

testing/
├── ui-kit.html                          # UI Kit showcase page
├── UI-KIT-DOCUMENTATION.md              # This file
├── assets/
│   ├── css/
│   │   ├── ui-kit-styles.css           # UI Kit specific styles
│   │   ├── desktop-first-global.css    # Desktop-optimized globals
│   │   ├── global-shared.css           # Shared component styles
│   │   ├── glassmorphism-cursor-global.css  # Cursor effect
│   │   └── pages/
│   │       └── index-styles.css        # Homepage styles
│   └── js/
│       ├── glassmorphism-cursor-global.js   # Cursor logic
│       ├── global-shared.js            # Shared interactions
│       └── pages/
│           └── script.js               # Page-specific scripts

---

Credits

Design & Development: Ghite van Tonder
Fonts: Google Fonts (Inter, JetBrains Mono)
Framework: Vanilla HTML/CSS/JS

---

Last Updated: October 2025
Version: 1.0.0