# Design Language for hil.st ## Aesthetics and Tone hil.st draws its visual identity from the world of illustrated tide pool field guides -- the kind of hand-drawn naturalist notebooks that marine biologists kept during coastal research expeditions in the mid-20th century, where every anemone tendril and kelp frond was rendered with meticulous pen strokes and annotated in soft pencil. The aesthetic is **hand-drawn coastal naturalism**: a fusion of scientific illustration's precision with the looseness of sketching on damp paper at the water's edge. Every element on the page feels as though it was drawn by hand onto slightly textured watercolor stock, with visible pencil underdrawing peeking through finished ink lines. The mood is warm but unhurried, like sitting on a sun-bleached dock with a sketchbook and watching the tide come in. There is no urgency, no sales pitch, no corporate sheen. The tone is **friendly** in the way a knowledgeable naturalist guide is friendly -- approachable, genuinely enthusiastic about sharing discoveries, never condescending. Information is presented as invitation rather than instruction. The visual atmosphere evokes the specific light quality of overcast coastal mornings where the sea and sky are separated by only the thinnest line of silver, and the colors of everything -- rocks, shells, seagrass -- appear richer and more saturated against the diffused gray. The hand-drawn quality is not decorative affectation; it is the fundamental rendering mode. Borders are sketched lines with slight wobble. Dividers are brushstroke washes. Icons are pen-and-ink illustrations rather than SVG geometric shapes. Even interactive states (hover, focus, active) are expressed through illustration logic: a button on hover might gain additional cross-hatching, or a link might sprout a tiny drawn wave underneath. ## Layout Motifs and Structure The layout follows an **organic-flow** paradigm -- content does not sit in rigid grid cells but rather flows like water around rocks on a shore. Elements are positioned with deliberate irregularity: a text block might sit slightly off-axis, an illustration might overlap the edge of its containing area by 12-20px, margins vary subtly between sections (not randomly, but with the kind of intentional asymmetry found in hand-composed book layouts). The overall reading direction is vertical, but within each viewport-height section, the eye is guided along curved, organic paths rather than straight horizontal scan lines. **Section Architecture:** - **Section 1 (Shore Approach):** Full-viewport. A large hand-drawn coastal illustration fills 70% of the viewport -- rocky shoreline with tide pools rendered in pen-and-ink with watercolor washes. The site name "hil.st" is lettered by hand at roughly 6rem equivalent, positioned organically within the illustration as if it were a label on a naturalist's map. A single line of humanist body text floats below, slightly off-center to the left. The entire composition drifts upward gently on load with a bounce-enter animation (overshoot by 8px, settle back). - **Section 2 (Tide Pool Close-Up):** Content flows in a loose, meandering column that shifts between 50-70% viewport width. Paragraphs of text are interspersed with small inline illustrations (drawn creatures, shells, wave patterns) that sit in the text flow like marginalia in an illuminated manuscript. The column itself is not centered but positioned with a 60/40 bias to the right, leaving a generous left margin where small annotative drawings and labels appear. - **Section 3 (Rocky Outcrop):** An illustration-dominant spread where 3-4 custom illustrations of varying sizes are arranged in an organic scatter pattern -- not a grid, not a masonry layout, but positioned as if someone laid out prints on a table and nudged them into a pleasing arrangement. Each illustration has a slight paper-shadow (not a box-shadow, but an illustrated shadow with visible pencil strokes). Text captions sit beneath each illustration in a smaller humanist face, hand-aligned rather than machine-precise. - **Section 4 (Horizon Line):** A return to open space. A single long horizontal brushstroke divider spans the viewport at roughly 40% height, representing the horizon where sea meets sky. Below it, a final text passage in larger type, a closing thought. The brushstroke is drawn via SVG path animation on scroll entry, taking 1.2 seconds to complete from left to right. - **Negative Space:** The layout breathes. Sections are separated by at least 20vh of open space filled only with a faint, barely-visible paper texture. This emptiness is not wasted space; it is the visual equivalent of silence between waves. ## Typography and Palette **Typography:** - **Display / Headings:** "Caveat" (Google Fonts) -- a clean, natural handwriting face with consistent baseline and open letterforms that reads clearly at large sizes (4rem-7rem) while maintaining the hand-drawn character of the site. Weight: 400-700. All headings are set with `letter-spacing: 0.01em` and `line-height: 1.1`. Headings never appear in uppercase; they use sentence case to preserve the handwritten informality. - **Body / Reading Text:** "Nunito Sans" (Google Fonts) -- a humanist sans-serif with rounded terminals and generous x-height that pairs naturally with handwritten display type. Weight: 300 for body text, 600 for emphasis. Set at 1.125rem / 1.75 line-height for comfortable reading. The rounded forms echo the organic shapes throughout the design without competing with the hand-drawn headlines. - **Annotations / Labels:** "Caveat" at 0.875rem, weight 400 -- the same handwriting face used for display, but at caption size, creating visual continuity between headlines and the small marginalia notes scattered throughout the layout. Used for image captions, inline annotations, and navigational labels. - **Monospace (code/data):** "IBM Plex Mono" (Google Fonts) at weight 300, 0.875rem. Used sparingly -- only for technical content if any appears. Its geometric clarity contrasts with the organic typography elsewhere, functioning like a typewritten label stuck onto a hand-drawn page. **Palette:** The palette is **coastal-blend** -- drawn from the specific color relationships found in Pacific Northwest tidal zones during overcast weather, where blues are muted by fog, greens are deepened by wet surfaces, and warm sand tones glow against cool surroundings. | Swatch | Hex | Usage | |--------|-----|-------| | Driftwood Sand | `#E8DCC8` | Primary background, page surface -- the color of sun-bleached paper | | Fog Silver | `#C4CDD4` | Secondary background, section separators, muted containers | | Tidal Slate | `#3A5568` | Primary text color, ink strokes, major illustration outlines | | Kelp Deep | `#2D6B5A` | Accent, links, interactive states -- the dark green of submerged seagrass | | Anemone Coral | `#D4836A` | Warm accent, highlights, hover states -- the pink-orange of sea anemones | | Storm Charcoal | `#2B2F33` | Deep contrast text for headings against light backgrounds | | Seafoam Wash | `#A8CFC0` | Illustration fills, decorative washes, progress indicators | | Shell White | `#F5F0E8` | Lightest tone, card backgrounds, elevated surfaces | | Barnacle Gray | `#7A8B8F` | Tertiary text, disabled states, subtle borders | The palette is applied with watercolor logic: colors are never flat fills but always have subtle variation, achieved through CSS gradients with near-identical stops (e.g., `linear-gradient(180deg, #E8DCC8 0%, #E5D9C4 50%, #E8DCC8 100%)`) that simulate the uneven wash of pigment on textured paper. ## Imagery and Motifs **Custom Illustration System:** All imagery on hil.st is **custom-illustration** -- no photographs, no stock icons, no geometric abstractions. Every visual element is rendered in a consistent pen-and-ink style with selective watercolor wash fills. The illustration style references the tradition of scientific naturalist drawing: precise outlines with variable stroke weight (thinner for detail, thicker for structural edges), selective cross-hatching for shadow areas, and transparent watercolor washes that let the paper texture show through. **Specific Illustration Subjects:** - **Tide pool organisms:** Sea anemones with radiating tentacles, starfish with textured surfaces, small crabs with detailed carapace patterns, kelp fronds with translucent quality - **Coastal landscape elements:** Rock formations with geological layering visible, driftwood logs with grain detail, wave patterns at various scales (from ocean swells to tide pool ripples) - **Atmospheric elements:** Fog banks rendered as soft horizontal wash bands, rain as fine diagonal hatching, overcast sky as graduated pencil shading from `#C4CDD4` to `#E8DCC8` **Organic Blob Motifs:** The primary decorative motif is **organic-blobs** -- amorphous, rounded shapes inspired by tide pool silhouettes, sea creature forms, and water droplet shapes. These blobs serve as: 1. **Background decorations:** Large (200-400px) blobs in `#A8CFC0` at 15-20% opacity, positioned behind content sections, drifting very slowly (CSS animation, 30-second cycle) in subtle circular paths 2. **Container shapes:** Instead of rectangular cards, content containers use blob-shaped clip-paths generated from smooth bezier curves. Each container has a unique blob shape -- no two are identical 3. **Transition elements:** Between sections, small blob shapes (50-80px) in various coastal palette colors serve as visual stepping stones, guiding the eye downward 4. **Interactive blobs:** On hover, blob shapes subtly morph (CSS `transition: clip-path 0.6s ease`) to a slightly different organic form, as if the shape is breathing or responding to touch **Decorative Patterns:** - Hand-drawn wave lines (SVG `` with sinusoidal curves and slight irregularity) used as section dividers - Stipple dots in `#3A5568` at low density to simulate sand texture in background areas - Concentric ripple circles (drawn with visible stroke variation) radiating from interactive elements on click - Cross-hatch fills in `#7A8B8F` used as shading on hover for buttons and cards ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must feel like paging through a naturalist's coastal field journal. Each viewport-height section is a complete illustration spread with text woven into and around the drawings. There is no traditional navigation bar; instead, small hand-drawn anchor icons (a shell, a starfish, a wave) in the left margin serve as section indicators, appearing at fixed position when the user scrolls past their section. The overall scroll is a continuous journey from shore to horizon. **Bounce-Enter Animations:** All content elements enter the viewport with a **bounce-enter** animation: elements translate upward from 40px below their final position, overshoot by 8-12px above the target, then settle back with a spring-like ease. The CSS timing function is `cubic-bezier(0.34, 1.56, 0.64, 1)` -- the 1.56 value creates the overshoot bounce. Stagger delays of 80-120ms between sequential elements create a wave-like entrance pattern, as if content is washing ashore. **Illustration Animation:** Key illustrations are drawn as multi-layer SVGs where individual elements (tentacles, waves, leaves) can be animated independently: - Sea anemone tentacles sway gently with a CSS animation using `transform: rotate()` with varying amplitudes (2-5deg) and periods (3-7 seconds) per tentacle - Wave patterns undulate using SVG path morphing between two slightly different wave shapes, cycling every 4 seconds - Small creatures (crabs, snails) have subtle idle animations: a crab shifts sideways by 3px every 5 seconds, a snail's antenna twitches **Interaction Design:** - Hover states add cross-hatching overlays (pseudo-element with a repeating SVG pattern of hand-drawn diagonal lines) rather than background-color changes - Focus states draw a hand-sketched border around the element (achieved via an SVG border-image with wobbly lines) - Click/tap triggers a ripple of concentric hand-drawn circles expanding outward from the click point - Scroll progress is indicated by a drawn wave line that extends along the right edge of the viewport, growing taller as the user scrolls deeper **Technical Notes:** - All blob shapes use CSS `clip-path: path()` with hand-crafted bezier curves; no two blobs share the same path - Paper texture is a subtle CSS background using a very fine noise pattern at 3-5% opacity over the `#E8DCC8` base - Illustrations are delivered as optimized inline SVGs with `stroke-dasharray` / `stroke-dashoffset` for draw-on-scroll effects - The bounce-enter animation is triggered via IntersectionObserver with `threshold: 0.15` and `rootMargin: '-50px'` - Body scroll behavior is smooth but not momentum-altered; the organic pacing comes from generous spacing, not scroll hijacking **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels - Geometric precision -- everything should feel slightly imperfect - Stock photography or photographic imagery of any kind - Centered symmetric layouts -- maintain organic asymmetry throughout - Sharp drop shadows -- use only illustrated/drawn shadow effects - Neon colors, dark mode, or high-contrast color schemes ## Uniqueness Notes **Differentiators from other designs:** 1. **Naturalist Field Journal as Web Interface:** No other design in the portfolio treats the entire page as a scientific illustrator's field notebook. While hand-drawn aesthetics appear at 23% frequency, they are typically decorative overlays on conventional layouts. hil.st makes the illustration the structural foundation -- content exists within and around drawings, not beneath decorative hand-drawn headers. 2. **Organic-Flow Layout with Blob Containers:** The combination of organic-flow layout (3% frequency) with organic-blob motifs (4% frequency) as actual content containers is unique. Other designs use blobs decoratively; hil.st uses blob-shaped clip-paths as the primary containment shape for all content, replacing rectangular cards entirely. Content literally lives inside organic forms. 3. **Bounce-Enter as Primary Animation Language:** While bounce-enter appears at only 2% frequency in the portfolio, hil.st elevates it from a single element effect to the universal entrance choreography. Every element -- text, illustrations, blobs, dividers -- enters with the same spring-physics overshoot, creating a rhythmic, tide-like quality where content washes in and settles. 4. **Coastal-Blend Palette Derived from Ecological Observation:** The palette (2% frequency) is not a generic blue-green ocean scheme but a carefully observed set of colors from a specific coastal ecosystem (Pacific Northwest tidal zone under overcast sky). Each color is named for its ecological source and mapped to a specific UI role, creating a semantic color system rooted in natural observation rather than brand guidelines. 5. **Zero Photography Policy:** In a portfolio where 70% of designs use photography and 95% use minimal imagery approaches, hil.st commits entirely to custom illustration as its sole imagery mode. There are no photographs, no photo filters, no photo-illustration hybrids. Every pixel of visual content is drawn, creating a cohesive world that cannot be mistaken for any other site. **Chosen Seed/Style:** `aesthetic: hand-drawn, layout: organic-flow, typography: humanist, palette: coastal-blend, patterns: bounce-enter, imagery: custom-illustration, motifs: organic-blobs, tone: friendly` **Avoided Overused Patterns:** - Centered layout (99%) -- replaced with organic-flow asymmetric positioning - Scroll-triggered as sole animation (97%) -- bounce-enter is the primary animation language - Mono typography (99%) -- humanist sans (Nunito Sans) and handwritten (Caveat) pairing with no monospace in display roles - Minimal imagery (95%) -- committed to rich custom illustration throughout - Vintage motifs (79%) -- coastal naturalism is contemporary observation, not nostalgic pastiche - Warm palette as generic descriptor (100%) -- coastal-blend is a specific, ecologically-grounded color system