WildlifeThings

Overview

WildlifeThings is an independent nature illustration studio that transforms overlooked species—fungi, marine life, and rare organisms—into meticulously crafted visual narratives. The brand embodies 'Scientific Naturalism': a design philosophy that marries rigorous field observation with contemporary digital craft, resulting in illustrations that feel both authoritative and inviting. The aesthetic is deliberately warm and approachable—cream and warm-gray surfaces anchor the composition, while a bold burnt-orange accent (#E8720C) punctuates key moments, evoking the energy of discovery. The UI evokes a sense of calm curation, as if browsing a naturalist's cabinet of wonders.

The brand voice is precise, curious, and unpretentious. Sentences are direct and conversational—never breathless or overwrought. The vocabulary favors specificity: 'field studies,' 'overlooked species,' 'real reference' rather than generic descriptors. Example sentence in brand voice: 'We design nature illustrations of fungi and marine creatures. Our print partners bring them to life on posters, apparel, and accessories.'

Colors

The color system is rooted in natural materials: warm paper tones (#F5F3EC, #EAE6D9) provide a tactile, museum-quality foundation, while deep forest ink (#16261E) grounds all typography and structural elements. The primary accent—burnt orange (#E8720C)—is the signature brand color, reserved exclusively for interactive CTAs, badges, and moments of emphasis. It appears on 'Explore the designs' buttons, the 'Mushroom Weather' badge, and accent text within headlines. Secondary orange (#FF6900) supports the primary in gradient contexts and secondary actions. The surface stack progresses from the warm paper base (#F5F3EC) through increasingly refined container layers (#EAE6D9 → #E8E4D7 → #DDD9CC), creating subtle visual hierarchy without resorting to darkness. All interactive elements use the pr

Typography

The type system pairs Bricolage Grotesque—a geometric, confident sans-serif—for display and headline work with Manrope, a humanist sans-serif, for body and interface text. This pairing creates visual rhythm: Bricolage's bold, architectural presence (128px at 700 weight for the hero h1) commands attention and conveys authority, while Manrope's warmth (18px body at 400 weight, 28px line-height) ensures readability and approachability. The display level (128px, -0.04em letter-spacing) is reserved for the hero headline 'ONE SPECIES AT A TIME,' where the tight tracking emphasizes the brand's focus and precision. Headlines use 700 weight consistently, creating a clear visual hierarchy. Body text at 18px with 28px line-height (1.56 ratio) provides generous breathing room on the warm background. L

Layout

The page employs a fluid, single-column layout with a max-width of 1000px, centered on the viewport. The grid is 12 columns, though content typically spans full-width or 8-column sections for breathing room. Spacing follows a semantic rhythm: the hero section uses 64px (xl) vertical spacing between the tagline and body copy, 40px (lg) between body copy and CTAs, and 24px (md) for internal card padding. The header maintains 24px horizontal padding (gutter) with 64px top/bottom padding, creating a spacious, uncluttered navigation zone. Section separators use 40px (lg) margins top and bottom, establishing clear visual breaks. The container max-width of 1000px ensures the layout remains intimate and readable, never stretching to overwhelming widths. Horizontal gutters scale to 24px on desktop,

Elevation & Depth

Depth in this system is achieved through subtle, naturalistic layering rather than dramatic shadows. The base layer (Level 1) is the warm paper surface (#F5F3EC) with no shadow. Level 2 (standard cards and containers) uses a 1px solid border at rgba(22, 38, 30, 0.14) with no shadow, maintaining the flat, print-like aesthetic. Level 3 (interactive elements on hover, modals, elevated cards) introduces a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), which lifts the element subtly without creating harsh contrast. The shadow is warm-toned and diffuse, mimicking light falling across a phys

Shapes

The shape philosophy is 'Architectural Minimalism'—clean, right-angled forms with minimal rounding, reflecting the precision of scientific illustration. Buttons and inputs use 0.5rem (8px) border-radius, a subtle softening that prevents harshness without introducing organic curves. Cards and containers also use 0.5rem, maintaining consistency across interactive surfaces. The only exception is badges and tags, which use full (9999px) border-radius to create pill-shaped elements that feel distinct and badge-like. This constraint—sharp corners for structural elements, rounded only for accent badg

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses the burnt-orange primary (#E8720C) background with white text, 13px Manrope at 600 weight, 8px border-radius, and 9px 16px 8px padding (40px height). On hover, the background darkens to #D45F00 with a 200ms ease-out transition. The button-secondary variant uses a transparent background with a 2px solid border in the on-surface color (#16261E), maintaining the same typography and dimensions. On hover, it fills with a light surface container color (#DDD9CC). Ghost buttons (used for tertiary actions) have no border, transparent background, and primary text color; on hover, they gain a subtle 8% opacity background fill of the primary color.

Containers & Surfaces Cards use the surface-contain

Do's and Don'ts

**Do**

• Do use the burnt-orange primary (#E8720C) exclusively on interactive CTAs, badges, and accent text—never on backgrounds or large surface areas.
• Do maintain the warm paper palette (#F5F3EC, #EAE6D9) as the dominant background; it reinforces the naturalist, tactile brand identity.
• Do pair Bricolage Grotesque (700 weight) with Manrope (400 weight) to create visual contrast between headlines and body text; never mix weights within a single typographic level.
• Do apply the 8px border-radius consistently to buttons, inputs, and cards; reserve full (9999px) radius only for badges and pill-shaped elements.
• Do use the subtle outline border (rgba(22, 38, 30, 0.14)) on cards and inputs rather than shadows; it maintains the flat, print-like aesthetic.

**Don't**

• Don't use the primary orange (#E8720C) on large surface areas or backgrounds; it should appear sparingly, only on interactive elements and accents.
• Don't introduce shadows heavier than 0 3px 8px rgba(0, 0, 0, 0.15); the brand avoids dramatic depth in favor of subtle, naturalistic layering.
• Don't mix Bricolage and Manrope weights arbitrarily; maintain clear hierarchy: Bricolage at 700 for headlines, Manrope at 400 for body, 600 for labels.
• Don't round corners beyond 8px on structural elements (buttons, cards, inputs); excessive rounding contradicts the precision-focused brand identity.
• Don't use pure black (#000000) or pure white (#FFFFFF) for text or backgrounds; always use the defined palette (#16261E for text, #F5F3EC for surfaces) to maintain warmth and cohesion.