DESIGN SYSTEM

Component Library & UI Kit

A comprehensive showcase of all design elements, components, and patterns used throughout ghite.works

✱ All components are fully interactive — hover and click to test

DESIGN TOKENS

Color Palette

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

Typography Scale

Display / Hero Title
GHITE.WORKS
Inter, 96px, 900, -4px letter-spacing
Section Title
SECTION TITLE
Inter, 64px, 900, -2px letter-spacing
Large Text
Creating intuitive user experiences
Inter, 48px, 700, -1px letter-spacing
Subtitle / Emphasis
MULTI-MEDIA DESIGNER
Inter, 40px, 500, 3px letter-spacing
Project Title
THE WARREN
Inter, 24px, 900, uppercase
Body Large
I'm a concept-driven multimedia designer who thinks visually and works iteratively. My strength lies in translating complex ideas into structured, tangible experiences.
Inter, 18px, 400, 0.5px letter-spacing
Body / Paragraph
Standard body text for longer form content. Used throughout the site for descriptions and detailed information.
Inter, 16px, 400, 0.5px letter-spacing
Navigation / Small
about / work / contact
Inter, 14px, 400, lowercase
Monospace / Code
VIEW WORK
JetBrains Mono, 14px, 700, 2px letter-spacing

Spacing Scale

XS - 12px
SM - 24px
MD - 48px
LG - 96px
XL - 144px

BUTTONS & CALLS TO ACTION

Primary CTA Box

VIEW WORK
↓
HTML
<div class="cta-box">
    <span class="cta-text">VIEW WORK</span>
    <div class="cta-arrow">↓</div>
</div>

Project CTA Button

VIEW WORK
Used on project cards with hover overlay effect

Form Submit Button

Highlight Box

Creating INTUITIVE experiences
Inline highlight for emphasis in large text

FORM ELEMENTS

Contact Form

Form States

CARDS & CONTAINERS

Project Card

[Project Image]
VIEW WORK

THE WARREN

EXPERIMENTAL WEBSITE

Stat Card

3+
YEARS INTERNSHIP EXPERIENCE
5+
DESIGN TOOLS PROFICIENCY
4+
CREATIVE TEAMS WORKED ACROSS

Skills Category

DESIGN TOOLS
FIGMA ADOBE PHOTOSHOP ILLUSTRATOR AFTER EFFECTS

LAYOUT PATTERNS

Section Header

SECTION TITLE

Used at the top of each major section

Large Text Block

I AM A MULTIMEDIA DESIGNER WHO CREATES INTUITIVE USER EXPERIENCES

Two-Column Layout

Left Column

Content area for images, media, or featured content

Right Column

Content area for text, descriptions, or supporting information

Grid Layout (3 Columns)

Column 1
Column 2
Column 3
Used for stats, skills, and repeating content

EFFECTS & ANIMATIONS

Glassmorphism Cursor

Custom cursor follows mouse movement with glassmorphism effect

Active throughout the site

Mix Blend Mode

BLEND MODE TEXT
Used for navigation to maintain visibility on all backgrounds

Heading Deconstruct Effect

ANIMATED HEADING

Letters deconstruct and reform on scroll

Scroll-Triggered Animations

Fade in from bottom
Staggered animation
Smooth transitions

Hover States

Box Translate + Shadow

CTA boxes move diagonally with offset shadow

Color Inversion

Background and text colors swap on hover

Opacity Change

Links and interactive elements fade

Transitions

Standard Transition
all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
Scroll Animations
opacity 0.8s ease, transform 0.8s ease
Page Transitions
opacity 0.4s ease

DESIGN PRINCIPLES

01

Brutalist Aesthetic

Bold typography, high contrast, geometric shapes, and raw design elements

02

Desktop-First

Optimized for 1920x1080 displays with generous spacing and large typography

03

Motion & Animation

Subtle scroll-triggered animations and smooth transitions enhance the experience

04

Mix Blend Modes

Difference blend mode ensures navigation visibility across all backgrounds

05

Strong Hierarchy

Clear visual hierarchy with dramatic scale differences and weight contrast

06

Custom Cursor

Glassmorphism cursor effect adds unique interactive layer to the experience

USAGE GUIDELINES

Typography

  • 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

Color Usage

  • 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
  • Avoid gradients - maintain flat, bold colors

Spacing

  • Use 8px base unit for all spacing
  • Section padding: 80px - 120px vertical
  • Component gaps: 20px - 60px depending on hierarchy
  • Generous whitespace for breathing room
  • 40px minimum padding for containers

Interactions

  • Use cursor: none with custom glassmorphism cursor
  • Hover states should be subtle but noticeable
  • CTA boxes translate diagonally with shadow offset
  • Navigation links use opacity changes
  • Form inputs have 3px solid borders
  • All transitions use custom easing function

Layout

  • Max content width: 1000px - 1200px
  • Use CSS Grid for card layouts
  • Use Flexbox for navigation and simple layouts
  • Sections should be full viewport height minimum
  • Maintain consistent horizontal padding (40px - 60px)

Accessibility

  • Maintain WCAG AA contrast ratios
  • Use semantic HTML elements
  • Ensure form labels are properly associated
  • Provide visible focus states
  • Use descriptive alt text for images
  • Test with keyboard navigation