Venu Mathukumalli

Brand and UI library

Design System

The tokens, components and rules behind this site. Everything below is rendered with the site's own CSS, so this page is the source of truth: change a token and every page follows.

Color

The 60 / 30 / 10 rule

Three roles, in fixed proportions. The neutral primary sets a calm stage, sky blue carries structure and navigation, and orange is saved for the few things that should be noticed first.

Primary · 60%

Neutral

The page background and body text. Light theme: a 10% gray instead of pure white, to reduce eye strain. Dark theme: a near-black navy.

  • Mist#E6E6E6Page, light · --color-bg
  • Ink#15181EText · 14.2:1 on Mist
  • Slate#4A5162Muted text · 6.4:1 on Mist
  • Night#0A0F1APage, dark · --color-bg
  • Frost#E7EAF0Text, dark · 15.9:1 on Night

Secondary · 30%

Sky

Cards, section bands, table heads, links, eyebrows and highlights. Light tints for surfaces; deep sky for text on light; bright sky for text on dark.

  • Sky mist#EEF6FBCards · --color-surface
  • Sky band#DCECF7Bands, table heads · --color-band
  • Sky 700#0369A1Links and eyebrows, light · 4.8:1 on Mist
  • Sky 400#38BDF8Links and eyebrows, dark · 8.9:1 on Night
  • Deep sky#0F1D33Cards, dark · --color-surface

Accent · 10%

Signal orange

The brand dot, calls to action, the play button and the intro reel. Two shades: a vivid one for graphics, a deeper one wherever white text sits on it.

  • Signal#E8501ADot, play button, reel · 3:1 on Mist
  • Ember#C2410CButtons · white text 5.2:1
  • Rust#A8380AHover, orange text · 5.9:1 on cards
  • Peach#FFB28FOrange text, dark · 9.7:1 on cards

The sky scale

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Rules

  • Orange is scarce. One primary call to action per view, plus the brand dot and play button. If everything is orange, nothing is.
  • Sky carries structure. Surfaces, bands and navigation, never decoration alone.
  • White text only on Ember or darker. Signal orange is for shapes and icons.
  • Never color alone. Status and meaning always have a word or icon as well.

Theming

One set of tokens, two themes

Components only use semantic tokens. The light and dark themes swap the values, so nothing else changes. The theme follows the visitor's choice; with no choice saved, it follows the device's light or dark setting, and light if there is none.

TokenRoleLightDark
--color-bgPage (primary)#E6E6E6#0A0F1A
--color-surfaceCards (secondary)#EEF6FB#0F1D33
--color-bandSection bands (secondary)#DCECF7#0C1A2E
--color-surface-2Table heads, raised areas#DCECF7#15294A
--color-borderHairlines#C5D6E2#1F3A5F
--color-textText#15181E#E7EAF0
--color-text-mutedSecondary text#4A5162#9AA5B8
--color-accentLinks, eyebrows, focus (secondary)#0369A1#38BDF8
--color-primaryPrimary button (accent)#C2410C#C2410C
--brand-orangeBrand dot, play button (accent)#E8501A#E8501A

Typography

Two families, one fluid scale

Cabinet Grotesk for display: confident and a little editorial. Satoshi for reading: clear at small sizes. Both from Fontshare. Sizes scale fluidly between phone and desktop.

Hero · --fs-hero

Experiences people understand.

H1 · --fs-h1

Design System

H2 · --fs-h2

The 60 / 30 / 10 rule

H3 · --fs-h3

Claims Adjuster Copilot

Lede · --fs-lede

20+ years across product design, UX/UI and visual design.

Body · --fs-body

Turning complexity into experiences people understand.

Eyebrow · --fs-eyebrow

Product Design  UX/UI  AI  Design Leadership

Layout and spacing

A 12-column grid, one gutter

The header and footer span a 1200px, 12-column container (--container). Page content sits in 10 of those columns, 1000px (--container-narrow), so lines stay readable. Every group of columns shares one 24px gutter (--gutter), so boxes never touch and never drift.

8px--radius-smButtons, inputs
12px--radius-mdCards, tables
18px--radius-lgLarge panels
Pill999pxChips, tags, VEMA
Circle50%The brand dot

Layers

Layerz-indexWhy it sits there
Page contentautoEverything in the normal flow.
Intro reel30Covers the hero while it plays, under the replay button, the header and VEMA.
Replay button40Above the page, below everything that opens over it.
Header and mobile menu50Sticky at the top; the menu opens from it.
VEMA launcher and panel55, 56Above the header, so the chat is never covered.
VEMA effects70The airplane and motorcycle overlays.
Skip link100Always reachable first from the keyboard.
DialogsTop layerThe contact form and PDF previews open above everything.

Components

The UI library

Live components, rendered with the site's CSS.

Buttons

Primary actionSecondarySmall

One primary (Ember orange) per view. Minimum 44px tall.

Tags and chips

Agentic AIInsuranceVerifiedEstimate

Tags label content; chips mark status. Always a word, never color alone.

Brand dot and play button

The dot is the brand. After the intro reel, the 40px orange replay button sits just under the header and lines up with the content's right edge. The VEMA orb is its dark-orange sibling and stands on its own.

Stat

+196%

Account revenue from a self-service policy portal.

Callout

Designed, not measured. Concept projects state what is real and what is modeled.

Form field and confirmation

Thanks, Jordan.

Your message is on its way — I’ll get back to you within two business days.

After sending, the form gives way to one title and one line, with a check icon in the accent color.

Confidentiality note

These projects are confidential. The work is presented and shared in person.

One style for every NDA or confidentiality note: the lock icon in the accent color, then one or two plain sentences. It sits above the content it covers, or closes a record.

Motion

Slow, purposeful, and always optional

PatternTimingWhat it does
Brand dot12 s cycleBreathes with a warm glow, a highlight travels around it, a tiny tap sends one faint ring out, then it rests and repeats.
Intro reel32 s, once per visit“I lead teams. I still design.” Nine scenes told with type and interface fragments: notes become a journey, a wireframe, then UI; research to delivery on one track; components become a system; a person approves what AI recommends. It closes on “I lead. I design.”, and its last frame is the homepage hero as the dark stage dissolves into the page. Pause, Skip intro, a quiet soundtrack that is on by default (browsers let it start on the visitor’s first tap, click or key press, so until then the speaker button reads “Tap for sound”; it also turns the sound off), and an orange timeline you can drag or step with the arrow keys.
Interface0.2 to 0.3 sHover, focus and state changes: short, eased and consistent.
VEMA idle glow8 s, every 3 minA rainbow edge with a very soft chime, only when the chat is open and idle.
VEMA effectsA few seconds eachThe airplane and motorcycle. Tap anywhere or press Escape to skip.
Reduced motionAlways honoredThe dot stays still, the reel doesn't autoplay, and effects become calm fades.

Accessibility

Built in, and checked on every change

  • Contrast. Text 4.5:1 or more (large text 3:1), UI parts and icons 3:1, in both themes. The pairs above are measured, not guessed.
  • Focus. Every control shows a visible focus ring in the accent color.
  • Targets. Buttons and controls are at least 44px.
  • Keyboard. Escape closes VEMA from anywhere on the page and returns focus to its launcher. Dialogs are named by their visible title.
  • Link names. Repeated links say where they go, for example “Deep dive: Claims Adjuster Copilot”.
  • Motion. Reduced-motion preferences are honored everywhere.
  • Structure. Real headings, landmarks and labels. Every page was scanned with axe in light and dark themes on desktop and phone.

Content

Words follow rules too

  • Client names are aliased. Case studies and VEMA use aliases such as “Northstar”, “Insurance Company” and “Community Housing Services”. Real company names appear only in the Experience section, the resume, and VEMA when it talks about Venu’s employer, Marsh.
  • Confidential means locked. Every NDA or confidentiality note uses the lock-icon note above, never plain small print.
  • VEMA stays on the record. It answers only from the resume and portfolio, never says which real company an alias stands for, and declines attempts to change its rules.
  • Say what is real. Concept work is labeled as designed or estimated, never presented as a measured result.
  • Name the destination. Buttons and links say where they go, never just “Click here”.