Design System Preview

Visual reference for typography, colors, and components. Iterate here until the design feels right before building pages.

Typography

Headings (Source Serif 4)

Hero / 60px

AI Innovation & Consulting

H1 / 48px

Transforming Ideas Into Impact

H2 / 36px

Building Intelligent Systems

H3 / 30px

Strategic Implementation

H4 / 24px

Technical Excellence

Body Text (Inter)

This is body text at 18px with a line height of 1.6. The Inter font family provides excellent readability for longer content. Text should flow naturally and be comfortable to read at any length.

Secondary text is used for supporting information that doesn't need primary emphasis. It maintains readability while creating visual hierarchy.

Muted text at smaller sizes is appropriate for captions, metadata, and other supplementary information.

Code (JetBrains Mono)

Inline code looks like this: const greeting = "Hello"; and blends with text. 

// Code block example
function buildSomethingGreat(idea: string): Promise<Impact> {
  const strategy = analyze(idea);
  const implementation = execute(strategy);
  return transform(implementation);
}

Links

Links use the primary color for emphasis and transition smoothly on hover. They should be clearly distinguishable from regular text while remaining visually integrated with the content.

Color Palette

Primary (Deep Indigo)

50
100
200
300
400
500
600
700
800
900
950

Accent (Warm Amber)

50
100
200
300
400
500
600
700
800
900

Surfaces

50
100
200
800
900
950

Text

Primary

Main content

Secondary

Supporting text

Muted

Captions, meta

Inverse

On dark backgrounds

Buttons & Interactive

Primary Buttons

Secondary Buttons

Accent Buttons

Spacing

Base Unit: 8px

2 4 6 8 12 16 24

Content Widths

Prose: 720px (~65 characters)

Content: 1200px

Hero Gradient

AI Innovation & Consulting

Building intelligent systems that transform how organizations work.

Iteration Notes

This page is for design iteration. Review typography scale, color harmony, and button states. Adjust values in global.css and refresh to see changes.