Portfolio utility · Production system

Portfolio Design System

This page documents the visual language and interaction rules actually used across prakharux.com. The system prioritizes legibility, authentic product evidence, consistent responsive behavior, and project identity without sacrificing accessibility.

Base unit: 4 px
Primary type: Inter + Instrument Serif
Nav height: 60 px · 58 px mobile
Modes: Light + Dark

01 · Foundations

Semantic before decorative.

The production system separates semantic page roles from project accents. Global surfaces, text, borders, focus, motion, and presentation typography are shared. Project colors remain scoped to their case studies.

Color model

Semantic Light and Dark tokens drive page, surface, text, border, interaction, feedback, and focus roles.

Typography model

Instrument Serif carries display hierarchy. Inter carries body, metadata, navigation, controls, and presentation labels. JetBrains Mono is reserved for literal technical content.

Evidence rule

Product screenshots, videos, prototypes, and captured UI keep their original internal typography and geometry.

02 · Color

Light mode tokens

These are the canonical semantic values used by production routes in Light Mode.

--ds-page#FAFAF8

Page background

--ds-surface#FFFFFF

Elevated surface

--ds-surface-2#F1F0EC

Secondary surface

--ds-surface-3#E3E2DC

Tertiary surface

--ds-text#0A0A09

Primary text

--ds-text-2#343430

Secondary text

--ds-text-3#555550

Supporting text

--ds-muted#696965

Muted presentation text

--ds-border#A6A49C

Strong border

--ds-divider#D7D5CF

Divider and subtle border

--ds-focus#2563EB

Focus outline

--ds-success#14633A

Success

--ds-warning#7A4A00

Warning

--ds-error#9F1D20

Error

--ds-link#173B63

Link

03 · Color

Dark mode tokens

Dark Mode is not a simple inversion. Surfaces, text levels, borders, focus, and feedback colors are tuned independently.

--ds-page#11110F

Page background

--ds-surface#181816

Elevated surface

--ds-surface-2#20201D

Secondary surface

--ds-surface-3#2A2925

Tertiary surface

--ds-text#F4F1EA

Primary text

--ds-text-2#DDD9D0

Secondary text

--ds-text-3#C0BCB3

Supporting text

--ds-muted#A29E95

Muted presentation text

--ds-border#77736B

Strong border

--ds-divider#3A3934

Divider and subtle border

--ds-focus#79A8FF

Focus outline

--ds-success#79D9A0

Success

--ds-warning#F7C46C

Warning

--ds-error#FF9A9D

Error

--ds-link#A9CCFF

Link

04 · Project accents

Identity with accessible text.

Each public case study has a vivid divider accent plus accessible Light and Dark eyebrow text accents. These values are the same tokens used by the production case studies.

Lilly Health

Light text#B5120D

Dark text#FF716B

SamePage

Light text#49604C

Dark text#A8C0AA

Light text#8A5200

Dark text#FFB548

ContextOS

Light text#5141C0

Dark text#9A8CF2

Klariq

Light text#745A1B

Dark text#E4C779

Aster

Light text#3D4FC4

Dark text#8F9AF4

Aurelia

Light text#4C1D95

Dark text#F4C7FF

AccessScope

Light text#173B63

Dark text#8AB8E8

GlucoGuide

Light text#065F46

Dark text#6BCBBB

Hermony

Light text#14675C

Dark text#8FE0D3

AZ Water Chatbot

Light text#1E3A8A

Dark text#FFC627

Chutneys

Light text#92400E

Dark text#FFC8A6

Tripling

Light text#0D4864

Dark text#74D9E6

Support Portal

Light text#1F4C6B

Dark text#9CC6E4

CleanUp

Light text#14532D

Dark text#A4E8BC

05 · Typography

Readable at normal zoom.

The V128 presentation scale removes unnecessary 8 to 11 px labels while keeping display and body hierarchy stable. Product UI inside evidence remains untouched.

Token	Family	Size	Weight	Line height	Tracking
`display XL`	Instrument Serif	46 to 98 px fluid	400	.96	negative optical
`display L`	Instrument Serif	44 to 76 px fluid	400	.96	negative optical
`heading XL`	Instrument Serif	34 to 52 px fluid	400	1.08	negative optical
`heading M`	Inter	24 px	600	1.2	0
`body L`	Inter	17 px	400	1.7	0
`body`	Inter	15 px	400	1.7	0
`body S`	Inter	14 px	400	1.55	0
`micro label`	Inter	12.5 px desktop · 12 mobile	600 to 650	1.35	.055em
`meta`	Inter	12 px desktop · 11.5 mobile	500 to 650	1.4	.04em
`caption`	Inter	12.5 px desktop · 12 mobile	400 to 600	1.45	.04em
`navigation`	Inter	13 px · 12.5 mobile	500	1	0
`control`	Inter	13 px · 12 mobile	600	1	0

06 · Spacing

4 px base scale.

The shared scale covers common inline, card, grid, and section rhythm. Existing optical exceptions remain where they are visually justified.

07 · Layout

Production geometry.

Layouts use a 1280 px page cap, a 1176 px Work content width at desktop, responsive gutters, constrained editorial measure, and route specific grids that collapse before content becomes cramped.

Page max

1280 px
Primary portfolio content cap.

Work max

1176 px
Observed Work filter and grid width at 1440.

Gutters

52 · 28 · 20 px
Desktop, tablet, and mobile system gutters.

Editorial measure

~720 px
Narrative text remains readable rather than full width.

Grid gap

16 px
Default Work and utility grid rhythm.

Nav height

60 · 58 px
Desktop and compact navigation heights. Sticky Work filters reference this token.

08 · Breakpoints

Actual source thresholds.

The portfolio has accumulated route specific media thresholds over time. V128 documents them instead of pretending the codebase uses a generic framework scale. Primary layout transitions remain concentrated around 1100, 1024, 900, 820, 768, 700, 640, 520, and 480 px.

220px340px350px360px380px390px391px420px430px480px520px540px560px600px620px640px700px701px720px760px761px767px768px769px780px800px820px821px860px861px900px901px960px961px980px981px999px1000px1024px1025px1050px1051px1080px1100px1101px1180px1181px1200px1280px1300px1400px1439px1440px

09 · Radius, borders, surfaces

Quiet structure.

Cards and controls use modest radii and restrained borders. Surfaces create hierarchy without adding decorative depth that the portfolio does not otherwise use.

Radii

3 · 10 · 16 · 999 px
Small, medium, card, and pill roles.

Borders

1 px
Standard, strong, divider, and focus roles use semantic color tokens.

Surfaces

page · elevated · secondary · tertiary
Each role has independent Light and Dark values.

Shadows

0 20px 44px
Reserved for true elevation such as overlay navigation surfaces. Cards remain mostly border defined.

Focus

2 px outline · 3 px offset
Shared across links, buttons, filters, and form controls.

Sticky divider

0 1px 0 divider
Appears when the Work filter controller is pinned.

10 · Motion

State, not spectacle.

Motion is used to explain hover, media playback, state change, and navigation. Reduced Motion removes nonessential animation while preserving content and controls.

Role	Value	Use
Fast	`160 ms`	Filter, hover, small control feedback
Standard	`220 ms`	Shared UI transitions
Slow	`500 ms`	Card media and larger visual transitions
Easing	`cubic-bezier(.22,1,.36,1)`	Primary portfolio easing
Reduced motion	`prefers-reduced-motion`	Disables nonessential animation and media motion

11 · Interactive components

Production states.

These examples use the same semantic tokens, type sizes, borders, focus treatment, and radii as the portfolio. They are documentation examples, not a parallel component library.

Actions

Primary CTA Secondary link

Filters

Status

Available for product design roles

Form field

Your name

Navigation link

Work

Focus state

12 · Cards and filters

Information first.

Home cards privilege editorial sequence. Work cards privilege scanability and consistent metadata. Case study media frames preserve source fidelity. Work filters remain one sticky controller in normal document flow, pinned directly below navigation.

HOME SELECTED CARD

Question led hierarchy

Project identity, question, statement, metadata, and action stay distinct without requiring miniature type.

WORK CARD

Comparable scan pattern

Category, year, title, description, and CTA keep consistent rhythm across selected and filtered results.

STICKY FILTER

One controller

Wrapped pills remain in document flow, become sticky under the nav, keep an opaque page surface, and release before the footer.

13 · Accessibility

Readable before decorative.

Presentation text targets at least 12 px on desktop and 11.5 px on mobile, normal text targets 4.5 to 1 contrast, focus remains visible, keyboard controls preserve semantics, Dark Mode has explicit values, and product evidence is never globally scaled to fake readability.

Text contrast

Normal presentation text uses a minimum 4.5 to 1 target against its rendered surface.

Focus

2 px semantic focus color with a 3 px offset across links, buttons, filters, and fields.

Keyboard

Native links and buttons remain semantic. Work filters preserve aria pressed state and history behavior.

Reduced motion

Motion is suppressed when the platform preference requests it, without hiding content.

Responsive text

Presentation labels retain readable minimum sizes through tablet and mobile layouts.

Evidence fidelity

Text embedded inside screenshots, recordings, and prototypes remains authentic to the product source.

14 · Responsive rules

Reflow before compression.

Desktop uses the full editorial grid. Tablet collapses dense two column structures before metadata becomes cramped. Mobile wraps filters and cards into one column while preserving readable labels and the 58 px navigation offset.

Range	Behavior
Desktop · above 900 px	Full card grids, 60 px navigation, 12.5 px micro labels, 13 px controls.
Tablet · 701 to 900 px	Reduced gutters, wrapped filter group, 12 px micro labels, card grids collapse where required.
Mobile · 700 px and below	Single column structures, wrapped sticky filters, 58 px navigation, 11.5 px minimum metadata, static hover media where touch behavior applies.

15 · Design principles

Five working rules.

These rules are intentionally specific to this portfolio and its evidence heavy product design work.

Readable before decorative.

Evidence remains authentic.

Project identity without accessibility loss.

Dense information needs hierarchy.

Motion should explain state.