Ratnesh

Overview

Ratnesh is a portfolio and personal brand system for a full-stack developer, built on the principle of 'Refined Minimalism'—a design philosophy that strips away visual noise while maintaining sophisticated interaction. The aesthetic is rooted in a clean, monochromatic foundation (whites, grays, near-blacks) punctuated by a vibrant cobalt blue (#3080ff) that serves as the signature accent for all interactive elements. The brand personality is precise, direct, and unpretentious: it speaks to technical depth without jargon, celebrates shipping over perfection, and treats the interface as a tool for clarity rather than decoration. The UI evokes a sense of calm professionalism—like a well-organized desk where every object has a purpose.

The voice is conversational yet authoritative, favoring active verbs and concrete outcomes. Example: 'I'm building draftlogo—a SaaS that helps founders generate professional, minimal logos in seconds.' The brand avoids hyperbole, embraces technical specificity, and prioritizes the reader's time. Typography is set in Geist, a modern geometric sans-serif that balances warmth with precision, reinforcing the developer-first ethos while remaining approachable to non-technical audiences.

Colors

The color system operates on a principle of 'Functional Hierarchy': the vast majority of the interface is neutral (surface: #ffffff, on-surface: #171717), allowing the primary blue (#3080ff) to command attention as the sole accent. This creates a high-contrast, low-distraction environment where interactive elements (buttons, links, focus states) are unmistakable. The primary color (#3080ff) is used exclusively for call-to-action buttons ('Book a call'), primary links, focus rings (0 0 0 3px rgba(48, 128, 255, 0.1)), and active navigation states. Secondary colors (grays: #6c757d for muted text, #3f3f46 for borders) establish visual hierarchy without competing for attention. The error state uses #d32f2f on a light background (#ffebee) for accessibility and clarity. Surface containers (surfac

Typography

The type system is built on a single typeface family—Geist (with ui-sans-serif, system-ui fallbacks)—to reinforce visual cohesion and reduce cognitive load. Display (60px, 700 weight, -0.04em tracking) is reserved for hero moments; Headline-lg (40px, 600 weight) anchors major sections; Body-md (16px, 400 weight, 24px line-height) is the workhorse for content, set at a comfortable 1.5 line-height ratio for readability. Label-md (14px, 500 weight, 0.01em tracking) is applied to buttons and UI labels to signal interactivity through weight and subtle letter-spacing. The hierarchy is reinforced through weight rather than size—a 600-weight headline at 28px (headline-md) reads as more prominent than 400-weight body text at 18px. On small labels over busy backgrounds or in dense lists, apply text-

Layout

The layout follows a fluid 12-column grid with a max-width of 1280px, centered on the viewport. The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero, projects, footer), md (24px) separates cards and subsections within a section, and sm (12px) provides breathing room within components. The gutter (24px) is applied consistently to left/right margins on mobile and tablet, scaling to 40px on desktop. White-space is treated as a first-class design element—negative space around text and components is never less than 12px (sm) to prevent visual crowding. The container-max-width of 1280px ensures that content remains scannable on ultra-wide displays without forcing the eye to travel excessively. Header padding is 40px vertical, 8px horizontal (from comp

Elevation & Depth

Depth is conveyed through subtle layering rather than dramatic shadows, aligning with the minimalist aesthetic. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for base cards and input fields, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards on hover, and lg (0 8px 32px rgba(0, 0, 0, 0.1)) for modals or floating elements. Cards default to sm elevation with a 1px border at rgba(0, 0, 0, 0.06) (surface-container-high: #d1d5dc); on hover, they transition to md elevation and a slightly darker border (outline-variant: #a0a0a0) over 200ms. Interactive elements like b

Shapes

The shape philosophy is 'Geometric Precision'—a balance between sharp, technical edges and approachable softness. Buttons use full border-radius (9999px) to signal their interactive nature and create a friendly, inviting appearance; this is applied to primary CTAs like 'Book a call' and secondary buttons alike. Cards and containers use md (0.75rem / 12px) border-radius, providing enough rounding to feel modern without appearing overly playful. Input fields and search boxes use DEFAULT (0.5rem / 8px) for a more utilitarian feel, signaling their functional purpose. Badges and pills use full (999

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the brand blue (#3080ff) background with white text, full rounding (9999px), and 10px horizontal / 16px vertical padding for a 40px total height. On hover (button-primary-hover), the background shifts to #1447e6 with a soft shadow (0 4px 12px rgba(48, 128, 255, 0.2)) and a 200ms ease transition. On active/pressed (button-primary-active), the background darkens to #0d2fa8 with a tighter shadow (0 2px 8px rgba(48, 128, 255, 0.15)). Secondary buttons (button-secondary) use a transparent background with a 1px border at outline-variant (#a0a0a0), md rounding (12px), and the same padding. On hover, they shift to surface-container-low (#eeeeee) with a darker border (outline: #3f3f46). All butto

Do's and Don'ts

**Do**

• Do use the primary blue (#3080ff) exclusively for interactive elements—buttons, links, focus states—to create a clear visual hierarchy and reduce cognitive load.
• Do maintain generous white-space (minimum 12px / sm spacing) around text and components to prevent visual crowding and support scanning.
• Do apply smooth 200ms ease transitions to all interactive state changes (hover, focus, active) to create a polished, responsive feel.
• Do use Geist typography at the specified weights and sizes; avoid mixing typefaces or deviating from the hierarchy to maintain visual cohesion.
• Do apply subtle shadows (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.06)) to cards and containers rather than heavy shadows to preserve the minimalist aesthetic.

**Don't**

• Don't use multiple accent colors or secondary blues; the system relies on a single primary accent to maintain clarity and prevent visual noise.
• Don't apply heavy shadows (lg elevation) to standard cards or buttons; reserve lg shadows for modals or truly elevated surfaces.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the geometric precision of the system.
• Don't set line-height below 1.4 for body text or below 1.2 for headlines; tighter leading reduces readability and creates visual tension.
• Don't mix Geist with system fonts or serif typefaces in the main interface; the single-typeface approach is core to the brand's refined minimalism.