Hunterfly

Overview

Hunterfly is a women-centric editorial platform that celebrates contemporary fashion, beauty, and lifestyle through a distinctly high-contrast, monochrome-forward aesthetic. The design language—termed 'Editorial Maximalism'—pairs stark black (#000000) and crisp white (#ffffff) foundations with strategic hot-pink accents (#ff1fa9) that command attention on CTAs, highlights, and key interactive moments. This creates visual tension that mirrors the bold, unapologetic voice of modern women's media: confident, trend-aware, and uncompromising.

The brand personality is authoritative yet approachable, speaking in the cadence of a trusted fashion editor who knows the difference between a trend and a timeless piece. Hunterfly's tone avoids breathless hyperbole; instead, it delivers precise, actionable insights. Example voice: 'Nayanthara's monochrome micro-check saree proves that restraint in color is the ultimate luxury—pair it with gold jhumkas and let the tailoring speak.' The UI reinforces this editorial authority through generous typography (Playfair Display for headlines at 900 weight, Georgia serif for body), clean negative space, and a deliberate color hierarchy that treats pink not as decoration but as editorial emphasis.

Colors

The Hunterfly color system operates on a principle of 'Monochromatic Discipline with Chromatic Punctuation.' The primary surface stack is anchored in pure white (#ffffff) and near-black (#191c20 for dark mode), creating maximum contrast for readability and visual clarity—essential for a content-heavy editorial platform. The on-surface text is pure black (#000000) on white, with secondary text in mid-gray (#555555) for metadata and captions.

The primary accent color is hot pink (#ff1fa9), used exclusively for call-to-action buttons, active states, and key interactive elements. This color appears at full saturation on white backgrounds and at 90% opacity (#ff1fa9e6) for layered or glass-effect surfaces. Secondary accent is a deep red (#dd3333), reserved for links, error states, and editoria

Typography

The typography system reflects a 'Serif-Sans Hybrid' approach: Playfair Display (900 weight, -0.03333em letter-spacing) anchors headlines and display text, commanding attention with its high-contrast serifs and dramatic weight. Body copy uses Georgia serif at 18px / 28px line-height (400 weight), providing warmth and readability for long-form editorial content. Utility typography—labels, buttons, metadata—switches to Outfit sans-serif (500–600 weight, 12–15px), creating a clear visual distinction between narrative and interface. The display level (60px, 900 weight, -0.03333em spacing) is reserved for hero headlines; headline-lg (40px, 900 weight) for article titles; headline-md (28px, 700 weight) for section breaks. Body-lg (18px, 400 weight) is the default article text; body-md (16px) for

Layout

Hunterfly uses a 12-column fluid grid with a maximum container width of 1240px, maintaining a 24px gutter between columns. The layout philosophy prioritizes 'breathing room'—generous margins and section gaps (40px) separate editorial blocks, allowing the eye to rest between content clusters. The content max-width is 1024px for article bodies, narrower than the full container to optimize line length (~65–75 characters) for serif body text. Spacing is semantic: use lg spacing (40px) for section separation, md spacing (24px) for card padding and component margins, sm spacing (12px) for internal component spacing, and xs spacing (4px) for micro-interactions. The grid is responsive: at 1024px breakpoint, font sizes reduce by 1–2 steps (h1 from 40px to 34px), and gutters compress to 16px. At 767

Elevation & Depth

Elevation in Hunterfly is achieved through subtle shadow and border layering rather than dramatic depth. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, content containers) uses a soft shadow: 0 1px 4px rgba(0, 0, 0, 0.349), paired with a 1px border in outline-variant (#abb8c3). Level 3 (modals, overlays, elevated cards on hover) applies a medium shadow: 0 4px 12px rgba(0, 0, 0, 0.08), with the same border treatment. On hover, cards transition to Level 3 shadow over 200ms, creating a subtle lift effect. Dark mode (inverse-surface #191c20) inverts the sha

Shapes

The shape philosophy is 'Architectural Clarity'—a blend of sharp modernism and subtle softness. Buttons and primary CTAs use full-radius (border-radius: 9999px) to signal interactivity and approachability; this rounded pill shape contrasts with the sharp, serif headlines and creates a visual 'soft spot' in an otherwise angular layout. Cards and containers use md radius (0.75rem / 12px) for a refined, contemporary feel—not too sharp, not too soft. Input fields use DEFAULT radius (0.5rem / 8px), a compromise that feels both functional and polished. Tags and badges use full-radius (9999px) to ech

Components

Action Elements Buttons follow a two-tier system: primary buttons use hot pink (#ff1fa9) background with white text, 44px height, 12px vertical / 24px horizontal padding, full-radius, and 600-weight Outfit label typography. On hover, the background shifts to #ff0a8a (darker pink) with a 200ms ease-in-out transition. Secondary buttons invert this: black (#000000) background with white text, 1px outline-variant border, and the same dimensions. On hover, secondary buttons shift to surface-container-high (#dddddd) with black text, maintaining the 200ms transition. Both button types use cursor: pointer and disable opacity: 0.6 when in a disabled state.

Containers & Surfaces Cards are the primary content container: white background (#ffffff), 24px padding, 12px border-radius, and a 1px

Do's and Don'ts

**Do**

• Do use Playfair Display 900 weight for all headlines and display text—its high contrast and dramatic serifs are the visual signature of the brand.
• Do apply hot pink (#ff1fa9) exclusively to primary CTAs, active states, and key interactive moments; never use it for backgrounds or decorative elements.
• Do maintain a minimum 24px gutter between grid columns and 40px section gaps to preserve the editorial breathing room that defines the layout.
• Do transition all interactive elements (buttons, cards, links) over 200ms with ease-in-out timing to maintain the measured, editorial pace.
• Do use Georgia serif for body text at 18px / 28px line-height to ensure warmth and readability in long-form content.
• Do layer shadows with 1px outline-variant borders on cards and containers; never use shadow alone without a border.

**Don't**

• Don't use primary pink (#ff1fa9) for body text, backgrounds, or decorative fills—it is reserved for interactive and emphasis-only moments.
• Don't mix Playfair Display with sans-serif body text; use Georgia serif for all narrative content to maintain the serif-forward editorial voice.
• Don't apply border-radius greater than 12px to cards or containers; the 'Architectural Clarity' philosophy favors sharp, defined edges over soft, rounded forms.
• Don't use shadows without accompanying 1px borders; the system relies on both shadow and border to define elevation and surface separation.
• Don't reduce line-height below 1.4x (e.g., 18px text should have minimum 25px line-height) for body copy; readability is non-negotiable in editorial content.
• Don't animate transitions faster than 150ms or slower than 300ms; the brand pace is measured and deliberate, never rushed or sluggish.