Design System
pallavikothapalli.com
The colors, type, space, motion and components behind my portfolio — from the blinds reveal on the hero to the little objects on the desk. Click any swatch or icon to copy it.
CoreUsed across the whole site
Case studyLives inside the case studies
PlaySpecific to Play experiments
Color
Neutral
CoreA paper-like backbone. Ink for words, a warm off-white canvas for everything else.
ink-900Headings, body, statement copy, current nav item
#111011ink-800Primary icons, dark surfaces
#1A1A1Acharcoal-700Footer, long-form case study body, close icon
#2A3132slate-600Secondary copy, metadata
#5F6566gray-500Mono labels, captions, side nav labels
#7E7E7Egray-400Placeholders, muted icons
#9BA1A5gray-300Dividers, hairlines, close button fill
#E5E5E5gray-200Hover fills, segmented thumbs
#EDEDEDgray-150Grid lines, secondary overline, specimen tiles
#F2F2F2canvas-100★ Page canvas, data tags, primary overline
#F7F7F7surface-50Bento cards
#FAFAFAwhiteNav dock, link pills, cards on canvas
#FFFFFFAccent
CoreElectric blue leads; deeper blues carry weight. Green and coral are the supporting accents.
blue-500★ Links, “Hello, I’m” flag, selection
#0080FFblue-700Hero headline, primary button, rail fill
#1554A1blue-800Primary button hover / pressed
#0A4082blue-900Deep ink for dark blocks
#042D5Eblue-glowGrid cursor glow, focus ring
#0080FF · 30%blue-shadowTinted shadow under CTAs
#024D99 · 50%green-600Blinds text reveal, availability dot
#0D9765coral-500Case study kickers, errors
#EC5C68Case studies
Case studyTint + ink pairs saved in Framer but not used on any live page yet. Reserved for case study callouts — use one pair per case study.
mist-tintNot used yet — section background
#DCE4EAmist-inkNot used yet — numbers, highlights on mist
#94A1AAsage-tintNot used yet — section background
#D2E8C8sage-inkNot used yet — numbers, highlights on sage
#6F9954lilac-tintNot used yet — section background
#E5DBEBlilac-inkNot used yet — numbers, highlights on lilac
#987DA5peach-tintNot used yet — section background
#FAE4D0peach-inkNot used yet — numbers, highlights on peach
#C28951Components
Solid
Glass
Playground
SURFACE
VARIANT
SIZE
CONTENT
Data tagHero skills row — radius 8, canvas @ 60%
Section overlinePrimary on white, secondary on surface
Link pill“Meet your designer” — big 56 / small 46
Accent flag“Hello, I’m” label above the name
Filter pillSegmented control — this page, Play filters
TooltipNav dock labels, copy confirmation
Cards
Bento cards sit on surface-50 with a 20px radius. Project cards let the image lead.
Bento cardAbout + process grids — surface-50, radius 20, padding 24
Project cardWorks grid — image radius 12, title + arrow
Floating nav dockFixed bottom-center · white · radius 12 · sound on hover
Close button48px · gray-300 fill · top 24 / left 16 · soft sound on click
Section railCase studies — labels with reading bars
Section indexThis page — same colors, text only, no bars
Dividers
1px gray-300 hairline. Reach for spacing before a line.
HairlineLists, section breaks
Iconography
Size
CoreDrawn on a 24px grid and scaled. Stroke stays 1.5 at every size.
16px
18px
20px
24px
32px
Stroke
Core1.5 stroke, round caps and joins — taken from the arrow in the primary button. Click to copy a name.
Borders
Radius
CoreSmall things get small corners. Anything you press is a pill.
radius-8Images, data tags, tooltips
radius-12Nav dock, icon thumbnails, project images
radius-16Specimen tiles, small cards
radius-20★ Bento cards, stages
radius-24Image scroll container, large media
radius-fullButtons, close button, overlines, pills
Styles
Corehairlineink @ 8% — swatches, light chips
dividergray-300 · 1px
focus-ring1px accent + 3px blue-glow
Motion
Animations
Motion that reveals, never decorates. Tap </> on a card for its timing.
blindsRevealHero headline, statement copy on scroll
fadeSlideUpSection reveal on scroll
shimmerGlowInteractive grid follows the cursor
parallaxFloatImage cloud drifting from cursor
hoverLiftWork cards, bento cards
glassLensBottom lens that bends the page
dockPopFloating nav icon hover + sound
closeSpringInClose button slides in from the left edge
railFillSection bars fill as you read
discSpinMusic player on the home desk
Duration scale
CoreDefault easing: cubic-bezier(0.22, 1, 0.36, 1). Springs (close button) use cubic-bezier(0.175, 0.885, 0.32, 1.275).
duration-100Close icon scale on hover / press, nav text color
100msduration-150Micro — nav dock icons, toggles
150msduration-200★ Default hover / color transitions
200msduration-300Cards, sidebar expand, rail labels
300msduration-400Close button spring-in
400msduration-600Scroll reveals, each blinds line
600msduration-1200Ambient — parallax drift, grid glow easing
1200msShadows
Coreshadow-softChips, tiles at rest
shadow-cardBento + project cards on hover
shadow-floatClose button
shadow-dockFloating nav dock, tooltips
shadow-mediaImages in the scroll cloud
shadow-accentPrimary CTA lift — blue-tinted
Spacing
Gap scale
Corespace-4Rail items, icon + text inside chips
4pxspace-8Nav dock icons, tag rows
8pxspace-10★ Default stack gap, rail bar → label
10pxspace-12Data tag inner gap, swatch cards
12pxspace-16Card internals, grids, rail left edge
16pxspace-20Hero text stack, link pill padding
20pxspace-24Bento card padding, close button top
24pxspace-40Statement block
40pxspace-56Image scroll sections
56pxspace-60Works grid — column gap
60pxspace-80Works grid — row gap
80pxLayout widths
Coreframe-desktopDesktop breakpoints
1500 / 1200pxframe-tabletTablet breakpoint — rail becomes a pill
810pxframe-phonePhone breakpoint
390pxcase-contentCase study content width
1100pxwork-cardWorks grid card, scales 0.3–1.3×
628pxhero-textHero headline block
690pxstatementAbout statement
685px maxgutterSide padding, one column below 760px
24pxTypography
Families
Five families plus a wordmark, each with one job.
Stack Sans HeadlineDisplay · the voice · 400
PoppinsHeadings · structure · 400 · 500 · 600
DM SansBody · UI · 400 · 500
B612 MonoLabels · tokens · 400
TrispacePlay titles · 500
BoldonseWordmark · 400
Properties
CoreBody
Text
mono/labelCaptions, token names, figure labels
11pxText
body/chipChips, tiny metadata, case study rail labels
12pxText
body/tagData tags — 0 → 1, VR/XR, AI-Driven UX
13pxText
body/smallCard descriptions, secondary copy
15pxText
body/baseDefault body copy · 24px leading
16pxHeading
Text
heading/eyebrowCase study kickers — THE PROBLEM
18pxText
heading/h4Case study sub-sections
22pxText
heading/statementStatement / about paragraph
24pxText
heading/h3Case study section titles
26pxText
heading/h2Page section headings
28pxDisplay
Text
display/hero★ Home hero headline
38pxText
display/titlePlay page titles
38pxText
heading/h1-posterCase study cover titles
64pxMaterials
Canvas grid30px tile, gray-150 lines on canvas
Cursor glowBlue glow follows the pointer across the grid
Glass lensBottom lens — blur, bend, slight fringe
Frosted tagCanvas @ 60% over imagery
Blinds stripeGreen bars that sweep off headlines
Text selectionGlobal ::selection — blue glow
ASCII artDog sketch on the home desk
Desk objectsPen, scale, cutting mat, VR headset — hero props
Paper canvascanvas-100 — the page itself