Brand experience · v1.0

Design System

Everything that makes this site feel like Ramesh Reddy, from a 4px spacing step to the way a button fills with colour on hover. Every sample on this page is the real component, running the same code as the rest of the site.

Colours
17
Type sizes
9
Components
14
Mascot poses
18

01

Principles

Four ideas sit behind every decision. When a choice is unclear, the one that serves these wins.

A

Human first

Start with the person, not the pixel. Warm words, real faces, a mascot who waves back.

B

Useful over clever

Motion and play earn their place by making things clearer. If it only shows off, cut it.

C

Joy in the details

Buttons that fill with colour, a fringe that moves in the wind, pills you can throw. Small, and never in the way.

D

Honest & simple

One blue, one typeface, plain sentences. Say what it is, show the work, skip the jargon.

03

Colour

One confident blue on lots of white, with bluish neutrals for text. Accents are rare and always mean something. Click any swatch to copy its token.

Brand

Neutrals

Accents

Proportion

Roughly how much of a typical screen each colour should cover.

Pairings that pass

Text and background pairs used on the site, with their WCAG contrast.

04

Typography

DM Sans, everywhere. Geometric but friendly, with open counters that stay readable from 13px captions to 168px heroes.

Aa

DM Sans

Google Fonts · Colophon Foundry · optical size 9–40

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ₹$€ &@?!→·“”

Regular 400 Medium 500 Bold 700

Type scale

Tracking: three steps only

--track-displayBig and tight−0.035em · 64px+

--track-headingSection heading−0.025em · 28–63px

--track-titleCard title−0.01em · 18–27px

Rules

  • Headings are Medium 500. Hero lines can drop to Regular 400.
  • Bold 700 is for numbers, prices and tags, not sentences.
  • Body copy: 16–21px, line height 1.5–1.6, max 28–44em wide.
  • One accent word per heading, in blue. Never a full line.
  • Sentence case everywhere. Tags may be uppercase with +0.08em.
  • Use text-wrap: balance on headings.

Let's build something human.

Type to try your own words.

05

Layout

A 4px base, generous whitespace and soft corners. Content sits in a 1180px column with fluid gutters.

Spacing

Corner radius

--r-sm 12 · bars, tiles
--r-md 16 · inputs, images
--r-lg 24 · cards, panels
--r-xl 32 · big media
--r-pill · buttons, chips

Container & grid

  • --max1180px content width
  • --gutterclamp(20px, 5vw, 64px)
  • .section140px between sections
  • --header-h110px · 84px under 860px

Breakpoints

  • 1440+Wide · cap giant type
  • ≤1100Laptop · 4 columns → 3
  • ≤960Small laptop · 3 → 2
  • ≤860Tablet · single column, no pinning
  • ≤600Phone · tighter type
  • ≤420Small phone

You're viewing at —.

Elevation

0 · FlatDefault. Use colour, not shadow.
1 · LiftedSmall floating UI, tooltips
2 · HoverCards on hover
3 · FeaturePortraits, hero media

06

Iconography

Inline SVG on a 24px box, 2px round strokes, currentColor. Icons support a label; they rarely replace one.

07

Components

The building blocks, live. Hover, click and tab through them.

Buttons

.btn .btn--{primary|soft|line|ghost} .magnetic
Schedule a Call See all projects Send a Message
See Casestudy Book a free call
  • Primary One per view, for the main action.
  • Soft Secondary actions next to a primary.
  • Line Neutral actions on light backgrounds.
  • Ghost Only on dark or image backgrounds.
  • Hover Fill sweeps up and the text colour changes; the label itself stays still. The cursor gently pulls the whole button (magnetic).
  • Label 1–3 words, sentence case, a verb first.

Filter chips

.chips > .chip.is-active[aria-pressed]

Pills & stickers

.pill .pill--{blue|ink|teal|orange|red|ball}
Research Figma Empathy Design Systems ☕ Coffee first Usability ☺

Decorative skill labels in the hero and the footer pit. Drag them here. They're not buttons, so they never carry an action.

Eyebrows, badges & status

.page-hero__eyebrow · .hire__badge · .footer__status

Selected work

Booking from Dec 2026

Open to new projects

Most popular

Section head

.section-head

Writing

Notes on design, research and people.

Kicker, then title, then an optional aside on the right that wraps below on mobile.

Form fields

.field · .field.is-invalid · .field__error

Add the full email, like name@company.com

  • Label Always visible, above the field. Never placeholder-only.
  • Focus Blue border plus a 3px soft-blue ring.
  • Error Red border, a message that says how to fix it.
  • Optional Mark optional fields, not required ones.

Plan cards

.plan · .plan--featured

Freelance

Project-based

For teams with a clear, defined project.

From $2,500

  • Discovery & UX research
  • Wireframes to polished UI
Start a project

Most popular

Part-time

Design partner

Steady design without a full-time hire.

From $1,800

  • Up to 4 hrs a day
  • Weekly design reviews
Book a call

Project card

.projects__head · .card · .card__tags · .card__media
01
  • Mobile App
  • 2023

CEO App · Bharat Carbon

Complex metrics turned into clear, engaging stats for C‑suite leaders.

UX research, user interviews, visual design, prototyping

See case study
CEO App mockup
  • Panel Blue-wash, 32px radius, 16px inset. Image sits in its own 24px frame.
  • Top row Number in a white circle, then white tags for type and year.
  • Tint --tint is the project colour. Only the dot and a 16% image backdrop use it.
  • Text Name in blue, client in grey, a sentence-case title, then the role line.
  • Hover Hovering anywhere on the card fills the outline button. The label stays still.
  • Scroll On the home page, cards stack; the one underneath dims 10% and scales to 0.9.

Art placeholders

Page.art(seed, kind, colours)

Same seed, same art, every time. Use until real imagery exists. Click a tile for a new seed.

08

Mini Ramesh

The mascot is the brand's warmest voice. Drawn in code from Ramesh's portrait: long silky hair that moves in the breeze, rimless glasses, a brand-blue overshirt.

Front
Three-quarter
Side
Back

Try a pose

<div class="mascot" data-mascot="wave" data-full></div>
  • One mascot per view. He guides; he never decorates every card.
  • Match the pose to the moment: wave to greet, laptop for work, shrug for errors.
  • Waist-up crops (no data-full) for heroes, plans and the footer.
  • Never recolour him, stretch him or swap his outfit.
Full mascot sheet

09

Motion

Fast in, soft landing. Things arrive with a confident expo ease, then settle. Press play on each curve.

Durations

  • 0.3–0.5sHover: colour, button fill, chip
  • 0.8–1.1sReveals: fade-up, line rise
  • 1.2–1.4sHero title, clip reveals, curtain
  • 2sCounters
  • 0.025–0.1sStagger between siblings

Rules

  • GSAP owns transform. CSS uses translate for hover lifts.
  • Reveals run once. Nothing re-animates on scroll back.
  • Respect prefers-reduced-motion: no loops, instant reveals.
  • Pause off-screen loops (the mascot does this itself).
  • Never animate layout properties like width or top.

Reveal attributes

data-reveal
data-lines

Headings rise
line by line

data-clip
data-count

40+

10

Voice & tone

Write like Ramesh talks across a table over coffee: warm, direct and a little playful. First person, short sentences, real examples.

Warmnot gushing
Clearnot clinical
Confidentnot boastful
Playfulnot silly

Let's build something human.

Leveraging synergies to deliver best-in-class experiences.

This page doesn't exist, or it moved.

ERROR 404: The requested resource could not be located.

Add the full email, like name@company.com

Invalid input.

Schedule a Call

Click here to learn more about scheduling

  • Sentence case for headings and buttons. Title Case only for proper nouns and the two main CTAs.
  • Use "I" for Ramesh and "you" for the reader. Avoid "we" unless it's a team.
  • Numbers as digits: 2–8 weeks, 40+ projects, $2,500.
  • No exclamation marks in UI. One is fine in a friendly aside.
  • Indian context is welcome: IST, ₹ next to $ where it helps.
  • Cut filler: "very", "really", "just", "simply".

11

Accessibility

Delight is never a barrier. Everything playful has a plain path around it.

4.5:1

Contrast

Body text meets AA. Blue on white is 8.7:1, so blue text is safe at any size.

Tab

Keyboard

Every action is a real link or button with a visible focus ring. Try tabbing through this page.

44px

Touch targets

Buttons are 50–56px tall, chips 40px with spacing. Icon buttons stay 44px or more.

Calm

Reduced motion

With reduced motion on, loops stop, reveals show instantly and smooth scroll turns off.

alt

Text alternatives

Decorative art and the mascot are aria-hidden. Meaningful images describe what they show.

Aa

Readable

No text under 13px, lines under 75 characters, and zooming to 200% never hides content.

12

Before you ship

Tick through this for every new page or section. Your ticks stay in this browser.