Christopher Indrawan

Overview

Christopher Indrawan's portfolio embodies **Warm Minimalism with Technical Precision**—a design philosophy that marries the tactile warmth of paper textures (#f5f1e5 surface, #faf7ec raised) with the clarity demanded by production engineering. The aesthetic rejects cold, corporate sterility in favor of an approachable, human-scaled interface that communicates expertise without arrogance. The brand serves senior engineers, CTOs, and technical founders who value substance over flash: every pixel choice reflects architectural thinking. The voice is direct, measured, and evidence-based—no hyperbole, no jargon for its own sake. Example: "I architect and ship production software end to end" (not "I build amazing things"). The teal accent (#4a7c6f) appears sparingly on CTAs and key metrics, functioning as a visual anchor that draws the eye to action without dominating the composition.

Colors

The color system centers on a warm, paper-like foundation (surface #f5f1e5, surface-raised #faf7ec) that evokes the tactile quality of high-end printed materials—a deliberate choice to ground the digital experience in physical authenticity. The primary accent, teal (#4a7c6f), is deployed exclusively on interactive elements (buttons, hover states, accent text like the pixelated 'Engineer' word) and data highlights (the '3+' years metric). This restraint ensures the accent retains its signal strength: when teal appears, it commands attention. The ink stack (on-surface #1b1813, on-surface-variant #514b40, on-surface-faint #8c8676) provides semantic hierarchy—darkest for primary content, softer for secondary labels and metadata. Borders use a transparent ink overlay (outline #1b18131f, outline

Typography

The type system pairs Source Serif 4 (display, headlines) with Space Grotesk (body, UI labels) and JetBrains Mono (code snippets, metadata). This combination signals both editorial authority (serif for headlines at 84px / 52px / 40px with tight -0.035em to -0.02em letter-spacing) and technical credibility (monospace for the terminal-style 'whoami' block). Body copy in Space Grotesk at 18px / 16px with 500 weight maintains warmth while preserving readability at small sizes. The display scale uses a fluid clamp() function (3rem to 10.5rem depending on viewport) to ensure the hero 'Fullstack Engineer' headline scales elegantly from mobile to desktop without jarring jumps. Accent typography uses Pixelify Sans at 18px for the word 'Engineer' to introduce a playful, retro-technical note that bre

Layout

The layout employs a 12-column grid with 24px gutters (--spacing: 0.25rem base unit, scaled to 24px for section padding). The container max-width is 1440px, allowing breathing room on ultra-wide displays while maintaining focus on content. Page rhythm is driven by full-height sections (min-h-[100svh]) that anchor the viewport, creating a deliberate scroll cadence: hero section, positioning section (rounded-t-[2.75rem] with -mt-[7vh] overlap), work grid, experience timeline. Whitespace is semantic: lg spacing (40px) separates major sections, md spacing (24px) groups related content, sm spacing (12px) tightens UI components. The grid background (84px × 84px repeating lines at rgba(27, 24, 19, 0.06)) provides a subtle texture that reinforces the paper aesthetic without overwhelming content. R

Elevation & Depth

Depth is conveyed through layered shadows and subtle background shifts rather than aggressive z-index stacking. Level 1 (Base): The grid background (background-image with radial-gradient mask) and paper-noise SVG filter (mix-blend-mode: multiply, opacity: 0.55) establish a textured foundation. Level 2 (Cards): box-shadow: 0 8px 24px rgba(27, 24, 19, 0.1) with rounded-[1.75rem] borders at 1px solid rgba(27, 24, 19, 0.12) creates a subtle lift. On hover, cards translate -4px (transform: translateY(-4px)) and shadow expands to 0 12px 32px rgba(27, 24, 19, 0.15), reinforcing interactivity. Level 3

Shapes

The shape language follows **Architectural Softness**—sharp enough to signal precision, rounded enough to feel approachable. Buttons use rounded-full (9999px) to create pill-shaped CTAs that feel modern and clickable; the primary 'See the work' button at 44px height with 12px 28px padding provides ample touch targets. Cards use rounded-[1.75rem] (28px) for the main work showcase and rounded-[1.5rem] (24px) for secondary cards, creating a visual hierarchy through radius scale. Input fields and tags use rounded-md (6px) or rounded-DEFAULT (4px) to signal utility rather than prominence. The grid

Components

Action Elements Buttons are the primary call-to-action mechanism. The primary button uses background: {colors.primary} (#4a7c6f), text: {colors.on-primary} (#f5f1e5), rounded-full, and padding 12px 28px for a 44px height. On hover, background shifts to {colors.primary-container} (#3a6356) with a 150ms transition. The secondary button uses a transparent background with a 1px border (border-color: {colors.outline-variant}) and text-color: {colors.on-surface-variant}; on hover, it fills with {colors.surface-container-high} and the border becomes {colors.primary}, creating a "reveal" effect. Links use text-decoration: underline with text-decoration-color: {colors.outline-variant} and text-underline-offset: 4px; on hover, both text and underline shift to {colors.primary}. All button and lin

Do's and Don'ts

**Do**

• Do use the teal accent (#4a7c6f) exclusively on interactive elements and key metrics—never as a background or filler color.
• Do maintain the warm paper aesthetic by using surface colors (#f5f1e5, #faf7ec) as primary backgrounds and reserving sage/taupe for secondary sections.
• Do apply transitions with cubic-bezier(0.4, 0, 0.2, 1) over 150ms for all interactive state changes to reinforce precision engineering.
• Do use Source Serif 4 for headlines (display, headline-lg, headline-md) and Space Grotesk for body/UI to signal both authority and technical credibility.
• Do employ the full 12-column grid with 24px gutters and maintain the 1440px container max-width for consistent rhythm across viewports.
• Do use the transparent ink overlay (outline: #1b18131f, outline-variant: #1b18130f) for borders instead of hard grays to preserve the paper aesthetic.

**Don't**

• Don't use the primary teal (#4a7c6f) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and accents only.
• Don't apply shadows larger than 0 16px 40px rgba(27, 24, 19, 0.12) or use multiple shadow layers; the system uses single, clean shadows for clarity.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; maintain the Source Serif 4 (display) + Space Grotesk (body) pairing.
• Don't use rounded-full for anything other than buttons and badges; cards and inputs use rounded-[1.75rem] or smaller to maintain visual hierarchy.
• Don't apply animations longer than 500ms for card hovers or 300ms for color transitions; the system prioritizes snappy, responsive feedback.
• Don't introduce new colors outside the defined palette; if a new accent is needed, derive it from the primary/secondary/tertiary stack rather than inventing ad-hoc hexes.