Library
The design system this site runs on.
Every colour, type size, spacing step and radius used across the site, pulled directly from the live tokens in globals.css. Nothing here is hardcoded separately. If a token changes, this page and the site update together.
Typography
One typeface, ten sizes
Google Sans carries every word across the site, from display headlines to long-form reading.
I’m Mani Teja.
Complex systems, made usable
What I decided, and why
Add your first experiment title
Enterprise platform, cloud infrastructure, critical care and inclusive design.
I’m a Senior Product Designer at Honeywell.
The default paragraph size used across case studies.
Question · What were you trying to find out or build?
SELECTED WORK
Colour
Off-white paper, near-black ink, one accent
Pink is reserved for the single primary action and inline links, never scattered across incidental UI.
Surface
paper
--color-paper
paper-raised
--color-paper-raised
paper-sunken
--color-paper-sunken
paper-tint
--color-paper-tint
Ink
ink
--color-ink
ink-secondary
--color-ink-secondary
ink-tertiary
--color-ink-tertiary
ink-quaternary
--color-ink-quaternary
ink-deep
--color-ink-deep
Rule
rule
--color-rule
rule-strong
--color-rule-strong
Accent (the only colour)
accent
--color-accent
accent-hover
--color-accent-hover
accent-soft
--color-accent-soft
Functional (category coding only — never decorative)
spectrum-blue
--color-spectrum-blue
spectrum-red
--color-spectrum-red
spectrum-yellow
--color-spectrum-yellow
spectrum-green
--color-spectrum-green
Spacing
4px base, 8px rhythm
Every gap, padding and margin in the site is a multiple of 4px, generated from a single --spacing token. A few finer values (2px, 6px, 10px) exist for optical icon/label alignment only.
Radii
Three shapes, borrowed and blended
A tighter card radius for content tiles, a larger tile radius for the images and blocks that read as tactile objects, and a full pill for every pointer target.
radius-card
1.25rem / 20px
radius-tile
2rem / 32px
radius-pill
980px
Iconography
Phosphor, used with restraint
Regular weight is the default for controls and arrows. Icons stay functional, inherit the surrounding ink colour and use the smallest size that remains clear.
Micro
8px
Inline arrow inside compact circular links
Small
14px
Carets and inline directional links
Standard
16px
Image affordances and media actions
Control
20px
Navigation menu and close controls
Motion
Short, quiet, explanatory
Motion clarifies state and origin rather than decorating the page. Entrances use the shared decelerating curve; exits accelerate; reduced-motion settings fall back to a near-instant cross-fade.
Micro
120ms
Small state changes
Component
240ms
Menus and compact controls
Page
500ms
Section and viewport reveals
Hero
800ms
Primary page introduction
Assets
Image gallery
First-party images that ship with the site. Case-study photography is sourced from Unsplash via a custom loader and isn't duplicated here.
MT monogram — final
Final supplied mark. Four solid black bars with the exact dimensions from the approved SVG.
/Mani Logo/Mani Monogram Logo.svg
Original stamp
First-party reference asset retained from the earlier identity.
/Mani Logo/logo.png
Hero portrait
Primary homepage portrait, presented in the rounded-tile format.
/Profile Pics/Mani_HQ.png
Sources
Tools and references
A categorized record of the external systems and references used to shape this site.
Foundations