Garry Audie

Overview

Garry Audie is a personal brand for an Indonesia-based AI creator, tool reviewer, and technology strategist. The design system embodies 'Warm Minimalism with Bold Accents'—a philosophy that pairs a serene cream-to-charcoal palette (#fcfbfa to #1c1c1e) with unexpected pops of neon cyan (#00ffc4) and coral (#ff5f57) to signal innovation and energy. The aesthetic serves a creator-first audience: tech-savvy, fast-moving, and hungry for authentic storytelling. The UI feels approachable yet authoritative, never sterile—every interaction invites engagement rather than demanding it.

The brand voice is conversational, precise, and unafraid of technical depth. Garry speaks to creators and brands with the confidence of someone who has tested every tool mentioned and the humility of someone still learning. Vocabulary leans into creator economy language ('repurposing,' 'workflow,' 'creator-led'), AI terminology ('models,' 'tokens,' 'inference'), and Indonesian cultural context. Example sentence in brand voice: 'I tested Claude, GPT-4, and Gemini on 50 Indonesian YouTube scripts—here's what actually works for your audience.'

Colors

The color system is built on a 'light-first, accent-driven' foundation. Primary (#1c1c1e, near-black) anchors all interactive elements—buttons, links, and focus states—providing maximum contrast against the cream surface (#fcfbfa). Secondary (#00ffc4, neon cyan) is reserved for highlights, badges, and moments of delight; it appears sparingly but memorably, evoking the future-facing nature of AI technology. Tertiary (#ff5f57, coral-red) signals warnings, errors, and calls-to-action that demand urgency. The surface stack progresses from #fcfbfa (brightest) through #efefed (container) to #e0dfdd (highest), providing subtle visual separation without harsh contrast. On-surface text (#1c1c1e) maintains 7:1 WCAG AAA contrast on all surfaces. Use secondary (#00ffc4) for accent badges and hover sta

Typography

The type system balances personality with legibility through a three-tier approach: Display (Inter, 160px, 600 weight, -0.04em tracking) commands hero moments and page titles with geometric precision; Headline (Bebas Neue for display headlines, Bricolage Grotesque for section heads) introduces warmth and character at 56px and 40px respectively; Body (Inter, 16–18px, 400 weight) ensures readability across all content. The pairing of geometric sans-serif (Inter) with the expressive, slightly quirky Bebas Neue creates visual tension that mirrors the brand's dual nature: technical rigor meets creative storytelling. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm, 12px) when placed over busy hero backgrounds to ensure legibility. Use letter-spacing: -0.04em on display

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed breakpoint at 768px (md). The hero section spans full viewport height (100svh) with a radial gradient overlay (rgba(255, 235, 185, 0.5) at center, transparent at 70%) that softens the background without obscuring the portrait. Content sections use lg spacing (40px) for vertical rhythm between major sections, md spacing (24px) for component grouping, and sm spacing (12px) for internal element separation. The gutter (24px) is applied consistently on mobile and desktop, with container padding increasing to 32px on screens above 1024px. White-space philosophy: generous margins around hero content create breathing room; card-based sections use negative space to establish hierarchy rather than border

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): the surface (#fcfbfa) with no shadow, establishing the ground plane. Level 2 (Cards & Containers): box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08), creating a soft, diffuse shadow that suggests a card floating 4–8px above the surface. Level 3 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a more pronounced shadow indicating elevation of 12–16px. The navigation bar uses a custom shadow: 0 2px 24px rgba(0, 0, 0, 0.08), paired with backdrop-filter: blur(20px) and a border: 1px sol

Shapes

The shape philosophy is 'Geometric Precision with Organic Warmth.' Buttons use rounded-full (9999px border-radius) to create pill-shaped CTAs that feel approachable and modern; this applies to primary buttons (Subscribe, Inquiry/Collab) and secondary buttons alike. Cards and containers use rounded-lg (1rem / 16px) for a slightly softer, more refined appearance than sharp corners but less extreme than full-pill shapes. Input fields use rounded-DEFAULT (0.5rem / 8px) for a subtle, functional look that doesn't draw attention. The hero section portrait uses no border-radius (sharp edges), allowing

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (bg-[#1c1c1e], text-white, rounded-full, padding: 8px 16px, height: 40px) use Inter label-md typography with 600 weight and 0.01em tracking. On hover, the background shifts to #333335 (a slightly lighter near-black) over 200ms ease-in-out; on active/press, it darkens to #0d0d0f. The 'Inquiry/Collab' button in the header exemplifies this: it's a pill-shaped, high-contrast CTA that stands out against the frosted-glass navigation bar. Secondary buttons use a transparent background with a 1px solid border (outline-variant, #cac7d0) and text color matching primary (#1c1c1e). On hover, the background fills with surface-container-high (#e8e7e5), creating a subtle press effect. Both button types include a transition

Do's and Don'ts

**Do**

• Do use primary (#1c1c1e) for all CTAs and interactive elements—it's the brand's signature anchor color and ensures maximum contrast and clarity.
• Do apply secondary (#00ffc4) sparingly as accent badges, highlights, or micro-interactions to signal innovation and energy without overwhelming the layout.
• Do maintain the cream surface (#fcfbfa) as the default background; it's warm, approachable, and reduces eye strain for long-form content consumption.
• Do use Inter for all body and label text; it's the workhorse font that ensures legibility and consistency across all screen sizes.
• Do apply lg spacing (40px) between major sections to create visual breathing room and establish clear hierarchy.
• Do use rounded-full (9999px) exclusively for primary buttons and navigation pills to create a distinctive, approachable CTA style.

**Don't**

• Don't use secondary (#00ffc4) or tertiary (#ff5f57) as primary button backgrounds; they lack sufficient contrast and dilute the brand's visual hierarchy.
• Don't apply shadows stronger than 0 8px 24px rgba(0, 0, 0, 0.12); the brand favors subtle elevation over dramatic depth.
• Don't mix rounded-full with card containers; reserve full-pill shapes for buttons and interactive elements only.
• Don't use system fonts (system-ui, -apple-system) for display or headline text; always specify Inter, Bebas Neue, or Bricolage Grotesque to maintain brand personality.
• Don't reduce letter-spacing below -0.04em on display text or increase it above 0.05em on labels; these extremes break the geometric precision of the type system.
• Don't place small text (label-sm, 12px) over busy hero backgrounds without applying text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) to ensure legibility.