Aulianza

Overview

Aulianza is a personal portfolio and technical blog for a software engineer specializing in full-stack development, AI, and machine learning. The design aesthetic is **Energetic Minimalism**—a high-contrast, vibrant approach that pairs deep blacks and pure whites with bold accent colors (neon green #9be9a8, electric purple #a855f7, and indigo #6366f1) to create visual excitement and draw attention to key interactive elements. The brand personality is approachable yet technically credible: conversational without being casual, confident without arrogance. The UI celebrates the engineer's personality through playful micro-interactions (emoji in headings, confetti animations in modals) while maintaining professional clarity for portfolio work and technical writing.

The voice is direct, warm, and occasionally humorous. Sentences are short and punchy: "I craft digital experiences that people actually love." The brand avoids corporate jargon and instead uses plain language peppered with technical specificity. Example: "Rebuilt from scratch. cleaner design, faster performance, better experience." This tone signals both technical depth and human-centered thinking—the kind of engineer who ships fast but cares about the details.

Colors

The color system is built on a **high-contrast, accent-driven foundation** designed to maximize visual hierarchy and guide user attention. Primary (#000000) is pure black, used for all body text, buttons, and primary interactive elements—it provides maximum legibility and creates a professional anchor. On-primary (#ffffff) is pure white, ensuring 21:1 contrast ratio on all primary CTAs. Secondary (#9be9a8, a vibrant neon green) is the brand's signature accent, appearing on success states, highlights, and secondary CTAs; it conveys energy and forward momentum. Tertiary (#6366f1, a deep indigo) and its companion (#a855f7, electric purple) are used for decorative elements, badges, and tertiary actions—they add visual richness without competing with primary messaging. Error (#fb2c36, a vivid r

Typography

The type system uses two distinct font families to create visual contrast and hierarchy. **Brakle** (fontFamily: Brakle, system-ui, sans-serif) is a distinctive display typeface reserved for headlines and hero copy—its geometric, modern character (fontWeight: 400, fontSize: 48–60px, lineHeight: 56–68px, letterSpacing: -0.04em) immediately signals personality and draws the eye. **Onest** (fontFamily: Onest, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif) is a clean, humanist sans-serif used for all body copy, labels, and UI text—it ensures readability at small sizes (fontSize: 12–18px) and maintains legibility across devices. The weight hierarchy is strict: headlines use fontWeight 400–600 (Brakle), body text uses 400 (Onest), and interactive labels use 600 (Onest) to signa

Layout

The page layout uses a **fluid 12-column grid** with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while adapting gracefully to mobile viewports. The spacing scale is semantic and hierarchical: unit (8px) is the base increment, with sm (12px) for tight grouping, md (24px) for standard section padding and component spacing, lg (40px) for major section separation, and xl (64px) for hero and full-width section margins. Gutter spacing (24px) is applied consistently between grid columns and around container edges. The hero section uses generous vertical padding (lg to xl) to create breathing room and emphasize the primary message. Card-based layouts (portfolio projects, blog posts) use md padding internally and lg spacing between cards. White-spac

Elevation & Depth

Depth in this system is achieved through **subtle shadows and layering**, not through color darkening or blur. The elevation scale has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and subtle containers, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and hover states, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and full-screen overlays. Shadows use a consistent blur radius and spread to create a cohesive, realistic light model—the blur increases with elevation to simulate light diffusion. Modals use a semi-transparent overlay (rgba(0, 0, 0, 0.5)) with a subtle back

Shapes

The shape system follows a **Soft-Technical** philosophy: rounded corners are used to soften the geometric precision of the interface without introducing organic or playful curves. Border-radius values are: sm (0.25rem / 4px) for small, tightly-grouped elements like badges and small buttons; DEFAULT (0.5rem / 8px) for input fields and standard interactive elements; md (0.75rem / 12px) for cards and medium containers; lg (1rem / 16px) for buttons and larger interactive surfaces; xl (1.5rem / 24px) for modals and full-width containers; full (9999px) for pill-shaped badges and circular elements.

Components

Action Elements

**Buttons** are the primary interactive element and come in two variants: primary (backgroundColor: #000000, textColor: #ffffff, padding: 12px 24px, height: 48px, rounded: lg, fontWeight: 600) for affirmative actions like "Let's Go" or "Submit," and secondary (backgroundColor: surface-container-high, textColor: #000000, padding: 12px 24px, height: 48px, rounded: xl, fontWeight: 400) for exploratory or lower-priority actions. Both use typography.label-md (fontSize: 14px, lineHeight: 20px) and apply a transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) on hover. Primary buttons on hover shift to primary-container (#1e1e1e) to signal interactivity without changing shape. Secondary buttons on hover shift to surface-container-highest (#9ca3af). Buttons should never exceed 48

Do's and Don'ts

**Do**

• Do use primary (#000000) for all body text and primary CTAs—it ensures maximum contrast and legibility.
• Do apply secondary (#9be9a8) exclusively for success states, affirmative actions, and highlights—never use it for warnings or errors.
• Do maintain consistent border-radius across component families: all buttons use lg (16px), all cards use md (12px), all inputs use DEFAULT (8px).
• Do use the spacing scale semantically: md (24px) for standard padding, lg (40px) for section separation, xl (64px) for hero margins.
• Do apply transitions (200ms cubic-bezier(0.4, 0, 0.2, 1)) to all interactive elements on hover to signal state change.
• Do use Brakle for headlines and Onest for body text—never reverse these roles or mix them within a single component.
• Do test all color combinations for WCAG AA contrast (minimum 4.5:1 for body text, 3:1 for large text).
• Do use elevation shadows (sm/md/lg) to create depth; never use drop-shadows or inset-shadows.

**Don't**

• Don't use secondary (#9be9a8) or tertiary (#6366f1) for primary CTAs—primary (#000000) must remain the dominant interactive color.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—custom radii break visual consistency.
• Don't use color alone to convey meaning (e.g., red for error without an icon or text label)—always pair color with semantic content.
• Don't exceed 48px button height; use padding to adjust width instead.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12))—excessive shadows create visual clutter.
• Don't mix Brakle and Onest weights arbitrarily; follow the strict weight hierarchy (Brakle: 400–600 for headlines, Onest: 400 for body, 600 for labels).
• Don't use surface-variant (#e9ecef) for text or interactive elements—it's reserved for borders and dividers only.
• Don't apply transitions longer than 300ms to interactive elements; faster feedback feels more responsive.