Brand Guidelines · v1.0

One brand. Every touchpoint.

The personal brand system of Rahul Shinde — used across the website, social media, CV, and presentations. Light theme only.

01 · Wordmark

Rahul Shinde.

Rahul Shinde.

  • Set in Space Grotesk Semibold, tight tracking, with a teal full stop.
  • The compact mark is R. — used for the favicon and avatars.
  • Never stretch, outline, or add effects. Clear space = height of the "R" on all sides.

02 · Color

Deep teal is the single brand accent on a light, airy neutral base. Color is used sparingly: ink for voice, teal for action.

Core

Ink

#0E1726 · headings

Body

#46536A · body copy

Muted

#6B7789 · captions

Line

#E6EAF0 · hairlines

Mist

#F6F8FB · surfaces

Paper

#FFFFFF · base

Brand — Deep Teal

50

100

200

300

400

500

600

700 ★

800

900

★ Primary action color: #0F766E. Hover: 800. Tint backgrounds: 50.

Project pastels (work cards & accents)

Mint · #E3FFF9

Lavender · #EDEEFF

Cream · #FFFAE3

Blush · #FFE9E3

03 · Typography

Primary · Display

Space Grotesk

AaBbCcDdEeFfGg 0123456789

Headlines, navigation, stats, kickers, and the wordmark. Weights: 500–700. Always tight tracking on large sizes.

Secondary · Body

Inter

AaBbCcDdEeFfGg 0123456789

Body copy, UI labels, buttons, captions. Weights: 400–600. Relaxed line height (1.6+) for reading comfort.

RoleFont / weightSize (desktop)Sample
Hero H1Space Grotesk 60054–60pxOrder to chaos
Section H2Space Grotesk 60030–36pxOrder to chaos
KickerSpace Grotesk 500 · caps · +0.22em12pxOrder to chaos
BodyInter 40016–18pxOrder to chaos
CaptionInter 40012–14pxOrder to chaos

04 · Iconography

Google Material Symbols — Rounded, weight 300, outlined (never filled). One icon family everywhere: website, decks, CV, social.

arrow_forward arrow_outward mail check menu bolt grid_view center_focus_strong
font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;

05 · Shape & Elevation

Cards · 24px

rounded-3xl

Images, inputs · 16px

rounded-2xl

Buttons, chips · pill

rounded-full

Two shadows only: card (resting) and lift (hover). Soft, low-contrast, never harsh.

06 · Motion

Subtle and professional. Elements fade and rise 18px as they enter the viewport, once. Hovers lift cards 4px. Nothing bounces, spins, or parallaxes.

  • Easing: cubic-bezier(0.22, 1, 0.36, 1) — fast start, gentle landing.
  • Durations: 300ms (hover) · 500ms (cards) · 700ms (reveals).
  • Stagger siblings by 60–100ms. Always respect prefers-reduced-motion.

07 · Components

Chip Text link arrow_forward

Buttons are pills. One primary action per view. Icon sits after the label, never before. Focus rings are always visible for keyboard users.

08 · Applying the Brand

language

Website

This site is the reference implementation — tokens live in assets/css/input.css.

thumb_up

Social media

Paper or Mist backgrounds, Space Grotesk headlines, one teal accent, generous margins, pastel tiles for project posts.

description

CV & documents

Ink on Paper, Space Grotesk for name and section heads, Inter for content, teal only for links and key metrics.