Proximity
Distance communicates relationship before decoration does.
Project cardsBackCase studies
Brand system · 2026
A system for warm, structured storytelling
The portfolio pairs editorial warmth with interface discipline: cream paper, sage ink, serif expression, mono structure, and motion that explains where an interaction leads.
01 / 08
Foundation
Warmth with structure.
Warm editorial expression on a small semantic stack—tokens, type roles, borders, and shared primitives.
UVExpression × structure
A quiet framework leaves room for the work to speak.
Consistency
- Semantic tokens first
- Type has a role
- Borders before shadows
- Spacing carries meaning
02 / 08
Color
Purpose first, then theme.
Color is named by purpose. Themes swap values; components keep the same roles.
Local light / dark specimen
Surfaces
Page
#FCFAF3
Raised
#FFFDF8
Sunken
#EFEBDE
Ink
Primary
#5E7361
Secondary
#6F8272
Muted
#8A9A8C
Structure
Border
#E0D8C8
Strong border
#CFC4B0
Accent
Accent
#5E7361
Accent field
#E4EBE4
Contrast
#FCFAF3
Atmosphere
Clay
#8C6A5A
Scrim
sage / 40%
Grain
multiply / 45%
03 / 08
Typography
Hierarchy you can feel.
Hierarchy is felt first. Specs sit quietly beside the live scale.
Case-study title
clamp(3rem, 8vw, 7.5rem)A system for warm storytelling
Page title
clamp(2.5rem, 6vw, 5rem)Selected work
Section title
2.25rem / 3remTypography
Description
1.125rem / 1.5remExpression leads; structure makes the narrative scannable.
Body
1rem / 1.25remA bounded measure keeps long-form explanation calm and readable.
Metadata
0.6875rem / 0.75remSYSTEM / PRINCIPLE / 01
04 / 08
Rhythm
Spacing names the relationship.
Exact increments—not decorative proportions. Spacing names the relationship.
Spacing → utility
8px
gap-2
Icon and inline-label gaps
12px
gap-3
Compact controls and chips
20px
gap-5
Work and tool card grids
24px
p-6
Card padding and paragraph groups
32px
gap-8
Related component clusters
64px
py-16
Major narrative transitions
80 / 96px
py-20 / py-24
Mobile / desktop chapter separation
Container · gap-5 · 20px radius
max-w-7xlpx-5 → lg:px-8gap-5rounded-[20px]
05 / 08
Gestalt
Perception as a product tool.
Each principle maps to a real surface on the site—cards, rails, dialogs, testimonials.
Similarity
Repeated visual grammar teaches the interface.
Work gridContinuity
Alignment creates a path through dense information.
Case-study contentsCommon region
A subtle boundary can group without isolating.
About contact cardFigure and ground
Contrast is reserved for hierarchy, not decoration.
Command CenterClosure
A partial cue can imply a complete structure.
Work sectionsCommon fate
Elements moving together are perceived as one group.
Testimonials carouselPrägnanz
Prefer the simplest shape that preserves meaning.
Navigation system06 / 08
Components
The real building blocks.
The same card, pills, theme control, and icons used elsewhere on the site—not redrawn for documentation.
Real project card
Pills · theme · focus
AvailableComing soonCurrent
NavigationIcon
Forward
Back
External
Previous
Next
Expand
Collapse
07 / 08
Motion
State, not decoration.
Three timings already in the codebase. Motion clarifies state; it never carries meaning alone.
Micro feedback
200–300ms
ease-out / standardContent shift
380ms
[0.32, 0.72, 0, 1]Editorial entrance
450ms
[0.22, 1, 0.36, 1]Content shift · 380ms
08 / 08
Conclusion
Frameworks before one-offs.
I like building frameworks that make consistency the easy path—patterns, tokens, and reusable pieces so a brand doesn’t have to be reinvented on every surface.
When I’m designing a product surface, I’m usually thinking one layer above the screen in front of me. What is the pattern here? What decision should become a shared rule so the next page, card, or interaction doesn’t start from scratch?
That’s how this site came together: color with a job, type with a role, spacing that names relationships, components that already know how to behave. The goal isn’t a rigid brand bible—it’s a system people can lean on without losing warmth or judgment.
I care most when design intent survives into the shipped product. Frameworks are how that happens: they encode the thinking once, then let every new surface inherit it.
— Uday Vatti