Vignesh Jeyaraman

Style Guide

Visual reference for every design token used across vignesh.ai. This page is a developer tool — not linked from the public navigation.

1. Color Palette

Background

var: (--background)hex: #0A0A0A

Surface

var: (--surface)hex: #141414

Surface-hover

var: (--surface-hover)hex: #1A1A1A

Border

var: (--border)hex: #222222

Text-primary

var: (--text-primary)hex: #EDEDED

Text-secondary

var: (--text-secondary)hex: #888888

Text-muted

var: (--text-muted)hex: #555555

Accent

var: (--accent)hex: #4AE5A0

Accent-muted

var: (--accent-muted)hex: rgba(74, 229, 160, 0.6)

Accent-glow

var: (--accent-glow)hex: rgba(74, 229, 160, 0.15)

2. Accent Color Options

Muted Blue

#4A9EE5

Sample accent text

Bordered element

Glow background

Warm Amber

#E5A04A

Sample accent text

Bordered element

Glow background

Soft Green (current)

#4AE5A0

Sample accent text

Bordered element

Glow background

3. Typography Scale

Hero text36-48px / weight 500

The quick brown fox jumps over the lazy dog

Section headings24-28px / weight 600

The quick brown fox jumps over the lazy dog

Card titles20px / weight 600

The quick brown fox jumps over the lazy dog

Body17-18px / weight 400

The quick brown fox jumps over the lazy dog

Metadata14px / weight 400

The quick brown fox jumps over the lazy dog

4. Spacing Scale

4px

1 units

8px

2 units

16px

4 units

24px

6 units

32px

8 units

40px

10 units

64px

16 units

96px

24 units

128px

32 units

5. Card Component Demo

Surface background · 1px border · 12px radius

Hover to see: accent border, scale(1.015), glow shadow

Example Project

Demo

A sample card to preview the default and hover states

Problem

Developers need a quick visual way to verify card styling without navigating to the real portfolio.

Built

A self-contained card component with hover glow, scale, and border transitions driven entirely by CSS custom properties.

Screenshot coming soon

GitHub Live Demo

Hero Variant

This card uses the isHero prop for full-width treatment

Problem

Some projects deserve more visual weight in the grid layout.

Building

Expanded layout support for featured projects, including larger image regions and richer metadata.

Screenshot coming soon

Property	Default	Hover
background	var(--surface)	var(--surface-hover)
border-color	var(--border)	var(--border-hover)
transform	none	scale(1.015)
box-shadow	none	0 0 40px var(--accent-glow)

6. Animation Demo

Scroll down to trigger the entrance animations. Each card staggers by var(--stagger-delay) (100ms).

Animation: translateY(24px) → 0, opacity 0 → 1, var(--duration-reveal) 600ms, var(--ease-out-expo)

ScrollReveal Component

This block uses <ScrollReveal> with default settings. It fades and slides up once it enters the viewport.

ScrollReveal with 200ms delay

Same component, but with a delay={200} prop so it enters after the block above.

StaggerGroup Demo

The <StaggerGroup> component wraps multiple children and staggers their reveal by staggerDelay (default 100ms). Scroll to see the cards animate in sequence.

Stagger Card 1

Delays by 0ms from the group trigger.

Stagger Card 2

Delays by 120ms from the group trigger.

Stagger Card 3

Delays by 240ms from the group trigger.

Stagger Card 4

Delays by 360ms from the group trigger.

Stagger Card 5

Delays by 480ms from the group trigger.

Stagger Card 6

Delays by 600ms from the group trigger.

CSS Custom Properties Reference

:root {
  /* Backgrounds */
  --background: #0A0A0A;
  --surface: #141414;
  --surface-hover: #1A1A1A;

  /* Borders */
  --border: #222222;
  --border-hover: rgba(74, 229, 160, 0.4);

  /* Text */
  --text-primary: #EDEDED;
  --text-secondary: #888888;
  --text-muted: #555555;

  /* Accent */
  --accent: #4AE5A0;
  --accent-muted: rgba(74, 229, 160, 0.6);
  --accent-glow: rgba(74, 229, 160, 0.15);

  /* Animation */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-reveal: 600ms;
  --duration-hover: 220ms;
  --stagger-delay: 100ms;
}