DESIGN SYSTEM

TYPOGRAPHY

Heading 1 — Display

Louize Display, 40px, Regular

Heading 2 — Section

Louize Display, 32px, Regular

Heading 3 — Subsection

Louize Display, 24px, Regular

Body Large — Hero text and important content

Louize Display, 24px, Regular

Bio Copy — The main bio display text on the homepage

Louize Display, 26px, Regular, line-height 45px

WELCOME HEADER

Louize Display, 14px, Regular, Uppercase, letter-spacing 0.4em

SETTINGS HEADER

Louize Display, 11px, Regular, Uppercase, letter-spacing 0.3em, opacity 0.7

Body — Regular content and readable text

Vulf Mono, 13px, Light Italic

Body Small — Captions and fine print

Vulf Mono, 11px, Light Italic

Label — UI Elements and Controls

Vulf Mono, 12px, Regular Italic, Uppercase

COLOR SYSTEM

100

#FFFFFF

Background

200

#D4E5C9

Accent / slider

300

#F5F0E8

Light accent

400

#E8DDD0

Medium light

500

#5C2626

Primary text

TRIANGLE SLIDERS

The homepage uses diamond-handle sliders with directional arrow tracks. Each slider is fully interactive with mouse, touch, and keyboard support.

Length

Reality

Aggression

Current values: 75%, 40%, 85%

Usage:

import { TriangleSlider } from '@/components/TriangleSlider';

<TriangleSlider
  label="Length"
  value={bioLength}
  onChange={setBioLength}
/>

BUTTONS

Vulf Mono italic, 1px border in --text-color. Hover uses --accent-color (#D4E5C9).

LAYOUT

Content Wrapper

The ds-content-wrapper provides consistent layout. Responsive max-width (36rem desktop) with padding on mobile.

Homepage uses 700px max-width with margin: 0 auto.

Three Column Text

This three-column layout creates an elegant reading experience. Columns automatically collapse to single column on mobile.

CSS columns allow text to flow naturally while maintaining consistent spacing throughout.

Typography remains consistent across all column layouts, ensuring readability.

CSS REFERENCE

Color Variables

--color-100: #FFFFFF;  /* Background */
--color-200: #D4E5C9;  /* Accent / slider */
--color-300: #F5F0E8;  /* Light accent */
--color-400: #E8DDD0;  /* Medium light */
--color-500: #5C2626;  /* Primary text */

--text-color: #5C2626;
--slider-color: #D4E5C9;
--bg-color: #FFFFFF;

Typography Classes

/* Louize Display */
.ds-h1, .ds-h2, .ds-h3, .ds-body-large
.welcome-header, .settings-header
.bio_copy

/* Vulf Mono */
.ds-body, .ds-body-small, .ds-label
.label_text, .contact-link

Component Classes

.ds-button, .ds-button-primary, .ds-button-secondary
.ds-content-wrapper, .ds-single-column, .ds-three-columns
.ds-border, .ds-border-full
.triangle-slider-row, .triangle-slider-label
.mememe-textarea, .mememe-button, .mememe-question