Shreyas Kothakonda
Webflow, GSAP
Personal portfolio
May 2026
A wordmark in Instrument Serif italic, paired with a small red dot. Built to feel editorial, calm, and a little bit serious. The dot is the only ornament.
A small palette built around midnight blue and a single warm red. White and body text carry information, the blues hold structure, and red gets used sparingly for accent and intent.
One accent per screen, ideally one per fold. Reserve it for primary CTAs, italic hero accents, and active state indicators.
Use --body-text for paragraphs. Reserve white for headings, key callouts, and the highest tier of emphasis. Body type at white tires the eye.
Use it as a secondary surface, in gradients with midnight, and in subtle backgrounds. Not for type. Not for buttons.
All hairlines, table borders, card outlines, and dividers use --grid-line at 1px. Never thicker. Stronger separation comes from spacing.
Instrument Serif for everything that wants to be looked at. Instrument Sans for everything that wants to be read. JetBrains Mono shows up only in labels, code, and metadata.
| Token | Px | Line height | Use |
|---|---|---|---|
| display-xl | 180 | 0.92 | Hero, contact |
| display-lg | 96 | 0.95 | Section titles |
| display-md | 64 | 1.0 | Card titles, work rows |
| h3 | 34 | 1.05 | Service headings |
| h4 | 22 | 1.3 | Subheads |
| lead | 21 | 1.5 | Hero subcopy |
| body | 18 | 1.55 | Paragraphs |
| small | 14 | 1.5 | Captions, helpers |
| mono-label | 12 | 1.5 | Eyebrows, tags |
A 4px base scale. Sections breathe at 120px on desktop, content blocks at 32 to 64. Radii are mostly soft corners and full pills, nothing in between.
A small set of components carries most of the work. Buttons, tags, cards, inputs, and section headers. Anything more specialized lives inside the page that uses it.
Pill shape, three variants. Primary is red on white text for CTAs. Ghost is a 1px stroke for secondary actions. Ink uses white for inverse contexts.
Used for tech stack, categories, and metadata. Mono caps, 1px outline, pill shape. Three variants for hierarchy.
Underline-only inputs. No box. Label sits above in mono caps. Active state animates the underline to red.
Surface card on a midnight background. Eyebrow in mono, title in serif, body in sans. Used for testimonials, services, and stack cells.
Start with a Figma file. End with a fast, semantic, CMS driven Webflow site. Usually in 2 to 4 weeks.
A two-column header pattern. Number and serif title on the left, supporting copy on the right. Used to open every major section.
Across Webflow, Wized, and Shopify. For founders, agencies, and small teams shipping fast.
Conversational, plain. Short sentences. No em dashes, no marketing speak, no hype. Italics carry the warmth, humor lives in the qualifiers.
Read every sentence out loud. If it sounds like a press release, rewrite it. The site sounds like Shreyas, not a deck.
Say “40 sites in 6 years,” not “extensive experience.” Numbers and tools, not adjectives. Let the work do the bragging.
Italic serif is the warmth in the system. Use it for one phrase per heading, never two. Same rule applies to the red accent.
Use a comma, a period, or split the sentence. Em dashes look like a draft. Commas and periods read like prose.
Asides and qualifiers do the heavy comedic lifting. “(usually in 2 to 4 weeks)” is more honest than “fast turnaround.”
“I leaned in.” “Webflow felt like cheating.” Strong verbs at the end of sentences read better than soft adjectives.
“Leveraging cutting-edge technologies and an extensive portfolio of successful projects, I deliver world-class web experiences.”
“I'm a Webflow Certified Partner with 6+ years and 40+ sites. I help startups ship Figma files.”