Ashish Gogula

Overview

Ashish Gogula's design system embodies Architectural Minimalism—a discipline-driven aesthetic that prioritizes precision, systems thinking, and the invisible craft of interaction design. The brand serves design engineers and technically-minded creators who value the marriage of form and function, where every pixel serves a purpose and every interaction tells a story. The visual language is deliberately austere: pure white backgrounds (lab(100 0 0)), near-black text (lab(6.19571 0 0)), and surgical use of accent colors (emerald #00c758 for status, near-black #0a0a0a for primary actions). The emotional response is one of clarity and confidence—the interface recedes, allowing the work and ideas to dominate.

The brand voice is direct, technically literate, and unapologetically opinionated. Ashish speaks in the language of systems, taste, and craftsmanship—never breathless, never generic. Vocabulary patterns include terms like 'responsiveness', 'architecture', 'feel right', 'systems', and 'taste'. The tone is conversational yet authoritative, as in: 'I make products where design and engineering actually feel connected.' This is a designer-engineer speaking to peers, not a marketer speaking to an audience.

Colors

The color palette operates on a principle of radical restraint: the surface stack is anchored in pure white (#ffffff) and near-black (#0a0a0a), with a carefully curated neutral progression (surface-container-highest #d9d9d9, surface-container-high #e5e5e5, surface-container #f1f1f1) used for subtle depth without visual noise. Primary (#0a0a0a) is the near-black used for all text, buttons, and primary interactive elements—it is not a true black, allowing for a 1-2% luminance lift that prevents harsh contrast fatigue on extended reading. On-primary is pure white (#ffffff) for maximum legibility on dark backgrounds. Secondary (#595959) is a mid-gray reserved for supporting text, disabled states, and secondary navigation; secondary-container (#bfbfbf) provides a light gray for subtle backgroun

Typography

The type system uses GeistSans exclusively—a geometric, humanist sans-serif that balances technical precision with approachability. The hierarchy is built on six levels: display (60px, 700 weight, -0.035em tracking) for hero statements; headline-lg (48px, 620 weight, -0.035em tracking) for page titles; headline-md (32px, 620 weight, -0.028em tracking) for section breaks; title-lg (20px, 620 weight, -0.02em tracking) for card titles; body-lg (18px, 400 weight) for long-form content; body-md (16px, 400 weight) for standard body text; label-md (14px, 520 weight, 0.01em tracking) for buttons and interactive labels; label-sm (12px, 500 weight, 0.02em tracking) for metadata and captions. All headings use text-wrap: balance and letter-spacing: -0.02em to -0.035em, creating a tight, confident appe

Layout

The layout operates on a 12-column grid with a max-width of 1280px, using a fluid-to-fixed breakpoint strategy. The spacing scale is semantic: unit (4px) is the atomic increment; xs (4px), sm (12px), md (24px), lg (40px), xl (64px) provide a Fibonacci-like progression for margins, padding, and gaps. Gutter spacing is consistently 24px (md) for horizontal padding on the container, creating a 48px total margin on desktop. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections. The design favors generous whitespace—no element should feel cramped. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. Vertical rhythm is maintained through consistent line-height multiples: headlines use 1.04–1.3x multi

Elevation & Depth

Elevation is conveyed through a restrained shadow system rather than color shifts or borders. The shadow palette consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.05)) for subtle depth on hover states and small components; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating panels and overlays. The shadow spread is always 0px (no blur expansion), and the y-offset increases with elevation (1px, 3px, 8px respectively), creating a directional light source from above. No component uses multiple shadow layers—each level is a singl

Shapes

The shape philosophy is Soft-Technical: radii are minimal and purposeful, never organic or rounded for its own sake. The rounded scale uses sm (2px) for subtle softening on inputs and small UI elements; DEFAULT (4px) for cards and standard containers; md (6px) for medium components like badges; lg (8px) for larger interactive elements like buttons; xl (12px) for modals and floating panels; full (9999px) for pill-shaped buttons and fully rounded badges. Buttons use lg (8px) to signal interactivity without appearing playful. Cards use DEFAULT (4px) to maintain architectural crispness. Input fiel

Components

Action Elements Buttons are the primary interactive affordance. The button-primary component uses {colors.primary} (#0a0a0a) background with {colors.on-primary} (#ffffff) text, {typography.label-md} (14px, 520 weight), {rounded.lg} (8px), and padding of 12px 24px, resulting in a 40px height. On hover, the background transitions to {colors.primary-container} (#262626) over 150ms with cubic-bezier(0.4, 0, 0.2, 1) easing. The button-secondary component uses a transparent background with a 1px border in {colors.outline-variant} (#bfbfbf), {rounded.full} (9999px) for a pill shape, and padding of 8px 16px for a 36px height. On hover, the background becomes {colors.surface-container-high} (#e5e5e5). All buttons must have a minimum 40px touch target height and 44px recommended for mobile.

###

Do's and Don'ts

**Do**

• Do use near-black (#0a0a0a) for all primary text and interactive elements—it is the signature color of the system and must appear on every page.
• Do maintain 24px (md) gutter spacing on all sides of the container to create breathing room and prevent content from feeling cramped.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces—this is the canonical shadow and must not be modified.
• Do use GeistSans exclusively for all typography—no fallbacks to system fonts or serif typefaces.
• Do reserve the emerald tertiary color (#00c758) for status indicators and success states only—it should appear sparingly to maintain impact.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on white backgrounds—use {colors.on-surface} (#0a0a0a) for text and {colors.surface} (#ffffff) for backgrounds.
• Don't apply border-radius larger than 12px except for full-circle badges and pill buttons—larger radii dilute the architectural precision of the system.
• Don't stack multiple shadows on a single element—use only one shadow from the elevation scale (sm, md, or lg).
• Don't use secondary colors (#595959) for primary interactive elements—secondary is reserved for supporting text, disabled states, and metadata.