AnuWork
Available
Ask me anything

Ask anything about Anu —
his work, skills, or experience.

Ask me anything
Back

Design System

Tokens, components, and interaction patterns that unify every experience across this portfolio. This is the single source of truth — every value documented here is the actual value used in production.

ColorsTypographySpacingButtonsFormsCardsIconsAnimationAI ChatAccessibility

Color Palette

Typography

Font Families

Google Sans

400 · 900

The quick brown fox jumps over the lazy dog

Primary typeface — headings, body, UI · Google Sans

Type Scale

h1

Page Title

h2

Section Heading

h3

Sub-section Label

h4

Card Title

body

Body text used for descriptions and content blocks across the portfolio.

caption

Labels, tags, metadata

overline

SECTION LABEL

Spacing & Layout

Spacing Scale

2px
0.5
4px
1
8px
2
12px
3
16px
4
24px
6
32px
8
48px
12
64px
16

Container

px-4max-w-2xl (672px)px-4
Content area
16px16px

Section Spacing

Major sectionsmt-14 (56px)
Sub-sectionsmt-8 (32px)
Content blocksmb-10 (40px)
Inline itemsgap-3 or gap-4
Animation stagger60ms increments
Page paddingpt-20 pb-16

Buttons & Interactions

Pill Button

Border radiusrounded-full
Paddingpx-3 py-1
Active feedbackscale-95

Brand Pill

GitHub↗LinkedIn↗Figma↗Vercel↗Supabase↗

Hover to see --brand-color glow effect. Border, background, and text shift toward the brand color on hover.

Tag Pill

Design SystemsAccessibilityData VizAI/MLCross-Platform
Borderborder-[#c7cad8]/15
Opacity60%

Ghost & Link

Back navigation
Case study link↗
→Inline arrow (cards, list items)

Form Elements

Focus ringring-1 ring-emerald-400/20
Focus borderborder-emerald-400/30
Backgroundrgba(199,202,216,0.05)
Borderrgba(199,202,216,0.1)
Border radius8px

Cards & Containers

Case Study Card

DS

Card Title

Description text with up to two lines of content before truncating

Company Name
Borderborder-[#c7cad8]/10
Hover borderborder-[#c7cad8]/20
Media effecttranslateY(-2px) scale(1.02)
Border tracegradient sweep on ::before

List Item

Product Name↗

Platform or description

Stat label

Glass Card

Glassmorphic overlay

Used for sticky headers, modals, and overlays. Blur + semi-transparent background.

Backgroundrgba(11,13,20,0.85)
Blurbackdrop-filter: blur(12px)
Borderrgba(199,202,216,0.08)

Icons & Iconography

Back
Copy
Check
Close
Expand
External
Arrow Right
Sparkle
Chevron Down
Info
Search
Menu
StyleStroke-based, rounded caps/joins
Stroke width1.2 – 1.5
ColorcurrentColor (adaptive)
Inline size10px
Navigation size14px
Button size16–19px

Animation & Motion

Fade Up (Entrance)

Staggered entrance with 60ms delay increments

0ms
60ms
120ms
180ms
Duration0.55s
Easingcubic-bezier(0.16, 1, 0.3, 1)
TransformtranslateY(10px) → 0
Reduced motionanimation: none; opacity: 1

Ping (Availability)

Available for work
Duration1.8s infinite
Glowbox-shadow pulse 2.8s

Marquee (Auto-scroll)

TokenComponentPatternSystemDesignBuildTokenComponentPatternSystemDesignBuild
Duration28s linear infinite
Pausehover: animation-play-state: paused
Edge masklinear-gradient transparency

Tick (Clock Colon)

14:30 GMT
Animationopacity 1→0.15 ease-in-out 1s infinite

Border Trace (Card Hover)

Hover the card below to see the gradient border sweep

Hover me

Gradient border trace

Animationborder-trace 0.6s ease-out
Gradientlinear-gradient masked to border

AI Chat

Floating Button

Ask me anything
Button size46px circle
Backgroundrgba(199,202,216,0.07)
Borderrgba(199,202,216,0.16)
Pulse ring 12.6s ease-out infinite
Pulse ring 22.6s ease-out 1.1s infinite
Positionfixed, bottom-right, inside max-w-2xl

Chat Window

Ask me anything
✕
What tools does Anu use?
Figma, VS Code, Supabase, Vercel, and Next.js are core to his workflow.
Ask a question…
↑
Widthmin(340px, calc(100vw - 48px))
Max height440px
Background#12141E
Border radius16px
Shadow0 8px 40px rgba(0,0,0,0.5)
EntrytranslateY(10px) scale(0.97) → identity, 0.2s ease

Message Bubbles

User message
← tail bottom-right
Assistant message
← tail bottom-left
User bgrgba(199,202,216,0.1)
Assistant bgrgba(199,202,216,0.05)
User radius11px 11px 3px 11px
Assistant radius11px 11px 11px 3px
Font size12px / line-height 1.55
Max width84%

Typing Indicator

Shown while streaming response
Dot size5px circles
Dot colorrgba(199,202,216,0.45)
Animationchat-dot-bounce 1.2s ease-in-out infinite
Stagger0s, 0.2s, 0.4s
BouncetranslateY(-5px) at 30%

Streaming & Features

The chat assistant uses Server-Sent Events (SSE) to stream responses from GPT-4o-mini in real time. Messages persist to sessionStorage so conversation history survives page navigations within a session.

Assistant responses support inline **bold** text and auto-linked route references — typing /sun-moon renders as a clickable link to the case study.

Modelgpt-4o-mini
Temperature0.65
Max tokens350
TransportSSE streaming
PersistencesessionStorage
Input font16px (prevents iOS zoom)
KeyboardEnter to send, Esc to close

Accessibility

Color Contrast

on
Foreground17.4:1AAA
on
Secondary10.2:1AAA
on
Accent8.5:1AAA
on
Secondary 50%5.1:1AA

Focus States

Tab through these elements to see focus indicators

Link
Focus ringring-2 ring-emerald-400/50
Methodfocus-visible (keyboard only)

Reduced Motion

Every animation in this system respects prefers-reduced-motion: reduce. When enabled, all CSS animations resolve to their final state instantly and transitions are disabled.

14+ reduced-motion media queries across the stylesheet covering: fade-up, ping, marquee, gradient-breathe, tick, border-trace, cursor particles, changelog scroll, lightbox transitions, and availability glow.

Keyboard Navigation

EscClose modals, lightbox, chat
EnterSubmit actions, send messages
TabNavigate interactive elements
SpaceToggle checkboxes, buttons

Semantic Conventions

Buttons<button> for actions, never <div>
Links<a> for navigation, <Link> for routes
Icon buttonsaria-label on all icon-only buttons
Decorativearia-hidden on purely visual elements
ImagesDescriptive alt text, '' for decorative
Touchcursor: none disabled on touch devices
Back home