Shelby Kho

Overview

Shelby Kho's design system embodies a 'Neon Playfulness' aesthetic—a bold collision of vibrant digital accents (#1d00ff primary, #fffd61 secondary, #4dfffc tertiary) against a clean white canvas, punctuated by whimsical illustrated elements and interactive micro-interactions. The brand serves creative professionals and design enthusiasts seeking portfolio inspiration, evoking a sense of joy, accessibility, and creative confidence. The UI celebrates color as a communication tool, using neon hues not as mere decoration but as semantic signals: primary blue for primary actions and navigation, electric yellow for secondary options, and cyan for tertiary interactions.

The voice is conversational, warm, and playfully irreverent—think 'step up to my desk' rather than 'welcome to my portfolio.' Shelby's tone avoids corporate formality; instead, it speaks directly to peers with humor and authenticity. Typography pairs Young Serif (headlines, emotional weight) with Nunito Sans (body, clarity) and Instrument Serif (CTAs, precision), creating a hierarchy that feels both contemporary and approachable. Example sentence in brand voice: 'Hi, I'm MINICOM. Shelby's not here right now, so...if you move her stuff around, I won't tell.'

Colors

The color system is built on three primary accent families layered over a white surface, creating maximum contrast and visual pop. Primary (#1d00ff) is the signature electric blue used for all primary CTAs, navigation focus states, and brand-critical interactive elements—it commands attention at 17px font weight 400 on white backgrounds. Secondary (#fffd61) is a neon yellow deployed for secondary actions, highlights, and playful accents; it reads as optimistic and energetic, particularly effective at 12px label sizes. Tertiary (#4dfffc) is a vibrant cyan reserved for tertiary CTAs and accent elements, providing a cool counterpoint to the warm yellow. The surface stack is deliberately minimal: white (#ffffff) as the base, with subtle grays (#f5f5f5 to #d8d8d8) for container hierarchy. On-su

Typography

The type system uses three distinct families to create emotional and functional hierarchy: Young Serif (headlines, 64px display down to 36px headline-md) conveys personality and draws the eye with its distinctive letterforms; Instrument Serif (title-lg at 22px, CTAs at 17px) adds precision and elegance to interactive moments; Nunito Sans (body-lg 18px, body-md 16px, labels 14px–12px) ensures clarity and accessibility in dense content. Display text (64px, 400 weight, -0.02em letter-spacing) is reserved for hero statements like 'Shelby's desk.' Headline-lg (48px) anchors major sections, while headline-md (36px) introduces subsections. Body text uses 400 weight at 16–18px with 24–28px line-height for comfortable reading. Labels (12–14px, 500–600 weight, 0.02–0.03em letter-spacing) are applied

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, centering content on larger screens and collapsing to edge-to-edge on mobile. Horizontal gutter is 24px (md spacing token), applied symmetrically to left and right edges. Vertical rhythm is governed by the lg spacing token (40px) for section separation—hero to first content block, section to section—creating breathing room that prevents visual fatigue. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) for nested elements. The hero section occupies the full viewport height, anchoring the brand's playful tone with large illustration and headline. Navigation is fixed or sticky at the top with 12px vertical padding, maintaining accessibility while staying visually lightweight. Container

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): white surface (#ffffff) with no shadow, establishing the ground plane. Level 2 (Cards, Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) creates a gentle lift, suggesting interactive affordance without visual heaviness. Level 3 (Modals, Popovers, Hover States): box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12) increases depth for modal overlays and card hover states. Transitions between levels use 200ms ease-out timing, allowing users to perceive the motion. Focus states on inputs apply a 3px ins

Shapes

The shape philosophy is 'Soft-Technical Playfulness'—combining rounded corners with precision to balance approachability and professionalism. Buttons and CTAs use full-rounded corners (border-radius: 9999px, or 50% width/height), creating pill-shaped affordances that feel friendly and clickable. Cards and containers use lg radius (1rem / 16px) for a softer, more approachable feel than sharp corners, while maintaining visual clarity. Input fields use DEFAULT radius (0.5rem / 8px) for a slightly more structured appearance, signaling form-like functionality. Badges use full rounding (9999px) to e

Components

Action Elements Buttons are the primary interactive currency. Primary buttons (button-primary) use #1d00ff background with white text, Instrument Serif 17px 400 weight, 11px 20px padding, and 9999px border-radius, creating a distinctive pill shape. On hover (button-primary-hover), background shifts to #4d2dff over 150ms ease-out, providing immediate tactile feedback. Secondary buttons (button-secondary) swap to #fffd61 background with #1d00ff text, Nunito Sans 12px 400 weight, maintaining the same padding and rounding. Tertiary buttons (button-tertiary) use #4dfffc background with black text. All buttons maintain a minimum 44px height for touch accessibility. Links (link) use primary color (#1d00ff) with no underline by default; on hover (link-hover), they shift to #4d2dff and gain an

Do's and Don'ts

**Do**

• Do use primary (#1d00ff) for all primary CTAs, focus states, and brand-critical interactions—it's the signature accent that anchors the visual identity.
• Do pair Young Serif headlines with Nunito Sans body text to create emotional contrast: serif for personality, sans for clarity.
• Do apply full rounding (9999px) to all buttons and badges; it's a core brand gesture that signals playfulness and approachability.
• Do use the lg spacing token (40px) for section separation to create breathing room and prevent visual fatigue.
• Do maintain minimum 44px button heights and touch targets for accessibility, even on desktop.
• Do transition all interactive state changes (hover, focus, active) over 150–200ms ease-out for snappy, predictable feedback.

**Don't**

• Don't use primary blue (#1d00ff) for body text or large text blocks—it's an accent color, not a reading color. Reserve it for CTAs, links, and highlights.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; use them as distinct layers (serif for display, sans for body).
• Don't apply sharp corners (border-radius: 0) to buttons or cards; the brand relies on rounded shapes to signal warmth and playfulness.
• Don't use shadows heavier than 0 8px 16px rgba(0, 0, 0, 0.12); the aesthetic is flat-modern, not skeuomorphic.
• Don't reduce button padding below 11px vertical or 20px horizontal; buttons must remain spacious and easy to tap.
• Don't apply multiple accent colors (primary + secondary + tertiary) to a single component; use one accent per element to maintain clarity and hierarchy.