Iza Mahendra Portfolio

Overview

Iza Mahendra's portfolio embodies a **Soft Minimalism** aesthetic—a design philosophy that prioritizes clarity and breathing room while introducing warmth through a carefully curated blue accent palette. The brand serves creative professionals and businesses seeking graphic design, branding, and social media content creation. The visual language is intentionally understated: a clean white canvas (rgb(255, 255, 255)), deep charcoal text (rgb(10, 10, 10)), and a signature soft blue (#b8d2f0) that appears on CTAs, hero sections, and interactive elements. This restraint creates an atmosphere of professionalism and approachability—the UI feels like a conversation with a thoughtful designer, not a sales pitch.

The brand voice is conversational yet authoritative. Iza speaks directly to clients with specificity: "I help brands turn ideas into visuals that speak from branding to social media content that makes people stop scrolling." The tone avoids jargon; instead, it uses concrete outcomes ("stop scrolling," "turn ideas into visuals"). Personality emerges through emoji use (the waving hand in the hero), a friendly greeting ("Hey 👋 I'm Izamhn"), and a willingness to show personality alongside professionalism. Example sentence in brand voice: "Your brand deserves visuals that don't just sit there—they make people lean in."

Colors

The color system is built on a **light-first, accent-driven** model. The primary surface is pure white (#ffffff), creating maximum contrast and legibility for a portfolio context where imagery and typography must shine. The on-surface text is near-black (#0a0a0a)—not pure black, which would feel harsh, but dark enough to maintain 15:1 WCAG AAA contrast on white backgrounds.

The signature accent is **Soft Blue (#b8d2f0)**, which appears on the hero background, secondary CTAs, badges, and hover states. This color is neither corporate nor playful—it sits in the "approachable professional" zone. It's used at full opacity for large surfaces (hero section: background-color: #b8d2f0) and at reduced opacity (rgba(184, 210, 240, 0.3)) for subtle backgrounds and overlays. The primary CTA button inv

Typography

The type system uses **Onest** as the primary typeface—a geometric sans-serif that balances friendliness with professionalism. Display text (58px, fontWeight 500) anchors the hero with the greeting "Hey 👋 I'm Izamhn"; headline-lg (40px, fontWeight 600) is reserved for section titles like "What I Do"; body-md (16px, fontWeight 400, lineHeight 24px) carries the narrative copy and maintains readability at standard viewing distances. The system includes a monospace fallback (JetBrains Mono) for code snippets and technical content, though it appears minimally in the current design.

Typographic hierarchy is enforced through size and weight, not color—all text uses on-surface (#0a0a0a) or on-surface-variant (#6b6b6b) to maintain the minimalist aesthetic. Letter-spacing is tight on display sizes

Layout

The layout follows a **fluid 12-column grid** with a max-width of 1280px, centering content on larger screens and expanding to full-width minus 24px gutters on mobile. The hero section spans full-width with 96px vertical padding (top and bottom) and 24px horizontal padding, creating a breathing room that emphasizes the designer's portrait and headline. Section separation uses lg spacing (40px) between major blocks, with md spacing (24px) between subsections and components.

Container padding is consistent: 24px on desktop, 16px on tablet, 12px on mobile. The grid uses a 24px gutter between columns, maintaining visual rhythm. White-space is treated as a design element—empty space around the hero image, breathing room between navigation items, and generous padding inside cards (24px) prevent

Elevation & Depth

Depth is conveyed through **subtle shadows and layering**, not dramatic drops. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields) uses a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), which creates gentle separation without visual weight. Level 3 (modals, dropdowns, hover states) escalates to box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), providing clear depth hierarchy.

The hero section (#b8d2f0 background) sits at Level 2 with rounded corners (1rem) and subtle shadow, making it feel like a card floating on the white page. Interactive

Shapes

The design system employs **Soft Geometric Precision**—a philosophy that uses rounded corners to soften technical elements while maintaining clarity. Buttons use full rounding (border-radius: 9999px), creating pill-shaped affordances that feel approachable and modern. Cards and containers use lg rounding (1rem / 16px), which is rounded enough to feel friendly but not so extreme as to appear playful or childish. Input fields use DEFAULT rounding (0.5rem / 8px), a subtle curve that distinguishes them from buttons without visual competition.

The hero section uses lg rounding (1rem), matching car

Components

Action Elements Buttons follow a two-tier system: **Primary buttons** use a dark background (backgroundColor: rgb(10, 10, 10), textColor: rgb(255, 255, 255), fontWeight: 600, fontSize: 15px, borderRadius: 9999px, padding: 8px 26px, height: 44px) for high-priority CTAs like "View Portfolio." On hover, the background shifts to #1a1a1a (slightly lighter) with a 200ms transition, maintaining contrast while signaling interactivity. **Secondary buttons** use the soft blue background (backgroundColor: #b8d2f0, textColor: #0a0a0a, fontWeight: 500, fontSize: 14px, borderRadius: 9999px, padding: 0px 20px, height: 40px) for lower-priority actions like "Contact Me," with a hover state that darkens to #a0c0e0. Both button types include a subtle box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) on hover, cr

Do's and Don'ts

**Do**

• Do use the soft blue (#b8d2f0) as an accent on CTAs, hero sections, and interactive hover states—it's the brand's signature and should appear on every page.
• Do maintain generous white-space around imagery and text; the portfolio is about the work, not the UI, so let breathing room guide the eye.
• Do use Onest for all body and display text; it's the brand typeface and ensures consistency across all touchpoints.
• Do apply the 200ms ease-out transition to all interactive elements (buttons, links, cards) to create a cohesive, polished feel.
• Do use the full-rounded button style (border-radius: 9999px) exclusively for clickable elements to signal affordance clearly.
• Do layer shadows subtly: Level 2 for cards (0 3px 8px), Level 3 for hover states (0 8px 24px), never exceeding these to maintain minimalism.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) in isolation; always use #0a0a0a for text and #ffffff for surfaces to maintain the soft aesthetic.
• Don't introduce new accent colors beyond the blue palette (#b8d2f0, #4a78b0, #31a8ff); the system is intentionally limited to maintain focus on the designer's work.
• Don't apply rounded corners to text or typography; rounding is reserved for containers, buttons, and interactive elements.
• Don't use shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12); the design is minimalist and should feel light, not weighed down.
• Don't mix typefaces; Onest is the primary, JetBrains Mono is monospace-only, and system fonts should never appear in the UI.
• Don't apply color to body text; keep it #0a0a0a or #6b6b6b (on-surface-variant) to maintain readability and hierarchy through size and weight alone.