Style Guide | Pankaj Bhagwat

Color Palette

A warm, muted palette built for high contrast and readability. Background tones are off-white to reduce eye strain. The accent green is used sparingly for labels and interactive cues.

Backgrounds

Background

--color-bg

#FAFAF8

Background Alt

--color-bg-alt

#F2F1ED

Card Background

--color-bg-card

#FFFFFF

Background Dark

--color-bg-dark

#1A1A1A

Text

Primary Text

--color-text

#1A1A1A

Secondary Text

--color-text-secondary

#5C5C5C

Tertiary Text

--color-text-tertiary

#8A8A8A

Muted Text

--color-text-muted

#8A8A8A

Inverse Text

--color-text-inverse

#FAFAF8

Accent

--color-accent

#2D5A27

Accent Light

--color-accent-light

#3A7233

Accent Subtle

--color-accent-subtle

rgba(45, 90, 39, 0.08)

Borders

Border

--color-border

#E5E4E0

Border Light

--color-border-light

#EEEDEA

Typography

Two typefaces form the typographic system. Space Grotesk provides geometric character for headings, while IBM Plex Sans offers clear readability for body text.

Headings

Space Grotesk

Weights: 400, 500, 600, 700
Usage: Page titles, section headings, card titles, stat numbers
Variable: --font-heading

Body

IBM Plex Sans

Weights: 400, 500, 600
Usage: Body copy, descriptions, labels, navigation, buttons
Variable: --font-sans

Type Scale

Hero Heading

--text-5xl 4rem / 64px Weight: 700 Line-height: 1.1 Tracking: -0.02em

Section Title (h2)

--text-4xl 3rem / 48px Weight: 700 Line-height: 1.1 Tracking: -0.02em

Card Heading (h3)

--text-3xl 2.25rem / 36px Weight: 400 Line-height: 1.25 Tracking: -0.02em

Subsection Title

--text-2xl 1.5rem / 24px Weight: 600 Line-height: 1.25 Tracking: -0.02em

Card Title

--text-xl 1.25rem / 20px Weight: 400 Line-height: 1.25

Body text large. Used for hero descriptions and section introductions where slightly more visual weight is needed.

--text-lg 1.125rem / 18px Weight: 400 Line-height: 1.6

Body text base. The default text size used across the site for paragraphs and general content. Optimized for comfortable reading at normal distances.

--text-base 1rem / 16px Weight: 400 Line-height: 1.6

Small text. Used for card descriptions, button labels, metadata, and supporting content that complements the primary copy.

--text-sm 0.875rem / 14px Weight: 400 Line-height: 1.6

Section Label / Tag

--text-xs 0.75rem / 12px Weight: 600 Tracking: 0.06em Uppercase

Spacing Scale

A geometric spacing scale based on a 4px / 0.25rem base unit. Used consistently for padding, margins, and gaps throughout the layout.

--space-xs

0.25rem / 4px

--space-sm

0.5rem / 8px

--space-md

1rem / 16px

--space-lg

1.5rem / 24px

--space-xl

2rem / 32px

--space-2xl

3rem / 48px

--space-3xl

4rem / 64px

--space-4xl

6rem / 96px

--space-5xl

8rem / 128px

--space-6xl

12rem / 192px

Components

Reusable patterns used across the portfolio. Buttons use pill-shaped borders for a modern feel. Cards follow a consistent structure with image, tag, title, and description.

Buttons

Primary View selected work Let's talk

Ghost View all projects → Read my approach →

Inverse (dark bg)

Let's talk View all projects →

Tags & Labels

Section Label

Selected Work

Outcome Tags 48 core components 12 teams aligned WCAG 2.1 AA compliant

Card Category Design System Cloud Platform · Energy

Work Card

Cards use a 16/10 aspect ratio image area, 16px border radius, and a subtle border. On hover they lift with a shadow transition.

Design System

Building a Unified Design System for Enterprise

Led the creation of a cross-product component library and governance model that replaced fragmented team libraries.

48 components 12 teams

Border Radius

sm

--radius-sm / 4px

md

--radius-md / 8px

lg

--radius-lg / 12px

xl

--radius-xl / 16px

pill

100px (buttons)

Shadows

sm

--shadow-sm

md

--shadow-md

lg

--shadow-lg

card

--shadow-card

card hover

--shadow-card-hover

Layout

Layout is constrained by container widths and uses consistent section padding. The work grid uses CSS grid with auto-fill columns for responsive card layouts.

Max Width

1200px

--container-max

Narrow Width

800px

--container-narrow (text blocks)

Container Padding

1.5rem

--container-padding (24px)

Section Padding

8rem

--space-5xl top and bottom

Grid Patterns

Featured Work

2-column grid

repeat(2, 1fr) with --space-xl gap. Stacks to single column on mobile.

Work Grid

Auto-fill columns

repeat(auto-fill, minmax(340px, 1fr)). Responsive without breakpoints.

Approach Cards

2-column layout

Content + stat cards side by side. Flexbox with wrap.

Transitions

Duration Fast

150ms

Hover states, micro-interactions

Duration Normal

300ms

Card transitions, button hovers

Duration Slow

500ms

Background changes, scroll animations

Easing

ease-out

cubic-bezier(0.22, 1, 0.36, 1)