pranathiperi.com — Design System

1. Visual Theme & Atmosphere

Pranathi Peri’s portfolio opens with a bold typographic statement that almost defies navigation — a 166px Instrument Serif heading rendered in deep indigo-violet against a matching page background. The design is high-contrast, bold-yet-refined, and structured around an unusual combination: expressive serif display set in a rich purple brand color, with monospaced body text that evokes terminal precision. The contrast between the expressive headline voice and the mono body creates a portrait of a designer who codes — or a coder with taste. A deep teal panel (rgb(21,33,36)) provides the second visual anchor, while a soft mint green offers relief.

2. Color Palette & Roles

Brand / Primary

• rgb(67, 51, 182) — Page/HTML background; deep indigo-violet (hero zone)
• rgb(59, 44, 162) — H1 heading color; slightly darker violet (renders on top of brand bg)

Dark Panel

• rgb(21, 33, 36) — Deep teal-black panel; used for a featured section or footer

Light / Content Surfaces

• rgb(255, 255, 255) → rgb(245, 245, 245) — A cascade of near-white surfaces; content sections built on light backgrounds
• rgb(235, 247, 232) — Soft mint green; accent surface, likely for a skills or highlight section

Text

• rgb(255, 255, 255) — Primary text on dark/brand backgrounds; all links use white
• rgb(0, 0, 0) — Base body color on light sections

Supporting

• rgb(167, 168, 167) — Mid-grey; likely used for subtle dividers or de-emphasized text

3. Typography Rules

A three-voice typographic system: massive Instrument Serif for the hero, system sans-serif for general body, and a custom mono typeface for body copy and links. The mono choice is the most distinctive decision — it brings a code-aesthetic to prose, intentionally blurring the line between designer and developer.

The 166.4px hero heading is essentially a typographic poster — it occupies most of the viewport, likely cropped or overflowing intentionally. Line height equals font size (1:1 ratio), creating a dense, stacked display block. Mono body text at 14px/24px has generous line height (1.71×) for readability.

4. Component Styling

Links: White text, transparent background. The group class pattern on links (e.g., a.group "Email ↗") suggests arrow-appended link components with group-hover animations in Tailwind.

Panels: The dark teal panel (rgb(21,33,36)) and the brand violet (rgb(67,51,182)) serve as the two featured surface types — both dark, high-contrast, used for hero or feature sections.

Mint card: rgb(235,247,232) as a surface likely wraps a skills list or highlighted content block.

No borders, no shadows, no border-radius detected. The design relies entirely on color and typographic scale for structure.

5. Layout Principles

Built with Next.js and Tailwind CSS. No breakpoints were detected in the extracted CSS, which suggests either a single-column layout throughout, or responsive behavior driven by Tailwind utility classes rather than media query breakpoints captured by the extractor.

Tailwind’s default spacing scale governs layout. The surface cascade (multiple near-white values from #FFFFFF to #F5F5F5) suggests a card-stacking layout where sections sit on progressively grounded white-to-light backgrounds.

6. Depth & Elevation

No shadows detected. No border-radius detected. Elevation is implied entirely through color transitions: from the vivid violet brand zone to the light near-white content sections to the dark teal feature panel. The design layers moods, not surfaces.

The transparency of links and CTAs (rgba(0,0,0,0) backgrounds) reinforces the flat, layered-color approach.

7. Do’s and Don’ts

Do:

• Use the hero heading at 166px+ — scale is the entire point of the opening section
• Pair Instrument Serif (display) with mono (body); this pairing is the design’s personality
• Apply the indigo-violet (rgb(67,51,182)) as a background zone, not just a text color
• Use white text exclusively on the violet and teal panels
• Use the mint green rgb(235,247,232) as a single accent surface — it should appear once

Don’t:

• Don’t reduce the hero heading below 100px — the poster scale is non-negotiable
• Don’t substitute a sans-serif for the mono body copy — it changes the persona entirely
• Don’t add border-radius or shadows; this system is deliberately flat
• Don’t introduce warm colors — the palette is cool-violet, teal, and mint
• Don’t use rgb(59,44,162) on a white background; it’s calibrated for the violet surface only

8. Responsive Behavior

No breakpoints detected in the CSS extraction. This is consistent with a Tailwind-built layout using responsive utility classes (sm:, md:, lg:) that aren’t captured as explicit media queries. The hero heading at 166.4px would need a significant text-[clamp(...)] or responsive size reduction for mobile — likely handled via Tailwind responsive prefixes. The layout is presumed single-column throughout.

9. Agent Prompt Guide

Recreate the pranathiperi.com visual style. Page background is rgb(67,51,182) (deep violet) for the hero zone. H1 uses Instrument Serif at 160–170px, weight 400, color rgb(59,44,162) — slightly darker than the background for subtle contrast. Body paragraphs and links use a custom mono typeface at 14px/24px, white text on dark backgrounds. Content sections transition to near-white backgrounds (#F9F9F9 to #FFFFFF). A deep teal panel rgb(21,33,36) anchors a featured section. One mint-green surface rgb(235,247,232) provides accent relief. No shadows, no border-radius, no hover color changes. The design is flat, poster-like, and typographically aggressive.

Generated by Sparkbites — extracted from live CSS analysis