Design System

Typography

Heading 1 - Display

Font: Vulf Mono, 40px, Light Italic

Heading 2 - Section

Font: Vulf Mono, 32px, Light Italic

Heading 3 - Subsection

Font: Vulf Mono, 24px, Light Italic

Body Large - Hero text and important content

Font: Vulf Mono, 24px, Light Italic

Body - Regular content and readable text

Font: Vulf Mono, 13px, Light Italic

Body Small - Captions and fine print

Font: Vulf Mono, 11px, Light Italic

Label - UI Elements and Controls

Font: Vulf Mono, 12px, Regular Italic, Uppercase

Color System

Primary Palette (100-500)

100

#FFF9F1

Background

200

#F5F0E8

Light accent

300

#E8DDD0

Medium light

400

#E2D0FA

Purple

500

#2F0C07

Primary text

Slider Colors

Bio Length

#BCAA79

Aggression

#E2D0FA

Reality

#EEE89A

Career

#ED9B54

Emojis

#EB8051

Buttons & Interactive Components

Basic Button Variants

Buttons use Vulf Mono italic, rounded corners, and consistent hover states with purple accent.

Slider Components

Reusable slider components with TableContainer wrapper:

Settings icon

SLIDER DEMO

Interactive Setting
Secondary Setting
Tertiary Setting

Usage:

import { Slider } from '@/components/Slider';
import { TableContainer } from '@/components/TableContainer';

<TableContainer title="SETTINGS" icon="/slider_icon.svg">
  <Slider
    label="Length"
    value={bioLength}
    onChange={setBioLength}
    color="bio-length"
  />
  <Slider
    label="Reality"
    value={reality}
    onChange={setReality}
    color="reality"
  />
</TableContainer>

Current values: 75%, 40%, 85%. Each slider component is fully reusable with proper TypeScript interfaces and color variants.

ButtonFlowGroup Component

A reusable component for groups of selectable buttons that wrap naturally:

Usage:

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

const options = [
  { id: 'opt1', label: 'Option 1', isSelected: true },
  { id: 'opt2', label: 'Option 2', isSelected: false },
];

<ButtonFlowGroup 
  options={options}
  onOptionSelect={handleSelect}
/>

PageHeader Component

Reusable page header component without top border stroke:

Example icon

Example Header

Header with Back Link

← back

Usage:

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

<PageHeader 
  title="Page Title"
  subtitle="Optional subtitle"
  icon="/icon.svg"
  iconAlt="Icon description"
  className="mb-8"
/>

Layout Examples

Content Wrapper (Standard Layout)

The ds-content-wrapper provides consistent layout for all pages. It has responsive max-width (36rem on desktop) and proper padding for mobile devices.

Used on: Homepage, Blog pages, Individual posts

Usage:

<div className="ds-content-wrapper">
  <!-- All page content -->
</div>

Three Column Text Layout

This three-column layout is used on the homepage portfolio sections. It creates an elegant reading experience that balances line length with visual hierarchy. The columns automatically collapse to single column on mobile devices.

The layout uses CSS columns which allows text to flow naturally while maintaining consistent spacing. This approach works particularly well for longer-form content that needs to be scannable and engaging.

Typography remains consistent across all column layouts, ensuring readability and maintaining the design system's coherent visual language throughout the experience.

Single Column Text Layout

The single column layout provides optimal reading width for longer-form content like blog posts. It's slightly wider than the standard content wrapper (42rem vs 36rem) to accommodate more text while maintaining readability.

This layout is ideal for articles, blog posts, and any content that benefits from a comfortable reading line length. The responsive design ensures proper spacing on all device sizes.

Usage:

<div className="ds-single-column">
  <!-- Long-form content -->
</div>

Blog Post Preview Layout

1:1 image with heading, meta, and excerpt - perfect for Sanity blog listings:

Sample blog post

The Future of AI Interface Design

By Louise Macfadyen • June 15, 2024

Exploring how artificial intelligence is reshaping the way we think about user experience design, from conversational interfaces to predictive interactions that anticipate user needs.

Sample blog post

Design Systems at Scale

By Louise Macfadyen • June 10, 2024

Building consistent experiences across large organizations requires more than just components—it demands a shared understanding of principles and thoughtful governance.

Usage with Sanity:

<article className="ds-blog-preview">
  <img 
    className="ds-blog-preview-image" 
    src={urlFor(post.mainImage).width(128).height(128).url()}
    alt={post.title}
  />
  <div className="ds-blog-preview-content">
    <h3 className="ds-blog-preview-title">{post.title}</h3>
    <div className="ds-blog-preview-meta">
      By {post.author.name} • {formatDate(post.publishedAt)}
    </div>
    <p className="ds-blog-preview-excerpt">{post.excerpt}</p>
  </div>
</article>

Card Component (No Side Borders)

This demonstrates how typography and colors work together in a typical card layout.

Secondary information uses smaller text to maintain hierarchy.

Color Applications

Background (100)

Purple Accent (400)

Text on Dark (500)

References & Links

Example text with footnotes1 and inline links to external resources that demonstrate proper styling2.

Usage:

<div className="ds-references">
  <ul className="ds-references-list">
    <li className="ds-references-item">
      <sup>1</sup> Citation text with 
      <a href="url" className="ds-link">link</a>.
    </li>
  </ul>
</div>

CSS Variables Reference

Color Variables

/* Primary Colors */
--color-100: #FFF9F1;
--color-200: #F5F0E8;
--color-300: #E8DDD0;
--color-400: #E2D0FA;
--color-500: #2F0C07;

/* Semantic Colors */
--bg-color: var(--color-100);
--text-color: var(--color-500);
--border-color: var(--color-500);
--accent-color: var(--color-400);

Typography Classes

.ds-h1, .ds-h2, .ds-h3
.ds-body-large, .ds-body, .ds-body-small
.ds-label

Component Classes

.ds-button, .ds-button-primary, .ds-button-secondary
.ds-content-wrapper, .ds-single-column, .ds-three-columns
.ds-blog-preview, .ds-blog-preview-image, .ds-blog-preview-content
.ds-blog-preview-title, .ds-blog-preview-meta, .ds-blog-preview-excerpt
.ds-border, .ds-border-full
.ds-references, .ds-references-list, .ds-references-item
.ds-link

Reusable Components

// Import all components from single index
import { 
  Slider, TableContainer, ButtonFlowGroup, ModelSelector 
} from '@/components';

// Or import individually
import { Slider } from '@/components/Slider';
import { TableContainer } from '@/components/TableContainer';