Free Amigurumi Crochet

Overview

Free Amigurumi Crochet is a community-driven pattern library celebrating handmade textile artistry. The design embodies 'Soft Craft Minimalism'—a philosophy that marries the warmth of handmade traditions with contemporary, accessible digital interfaces. The aesthetic is deliberately approachable: soft pastels (rose pink #ff91a4, pale grays #ebebeb), generous whitespace, and rounded corners evoke the tactile comfort of yarn and needlework. Users feel welcomed into a space of creativity and generosity, not intimidated by complexity.

The brand voice is encouraging, unpretentious, and community-first. Tone: warm but not saccharine, instructional but not condescending. Vocabulary favors concrete craft language ('free patterns,' 'beginner-friendly,' 'stitch-by-stitch') over marketing jargon. Example sentence in brand voice: 'Start with our Sweetheart Cow—it's perfect for your first amigurumi, and the pattern takes just 90 minutes.'

Colors

The color system centers on a signature rose-pink primary (#ff91a4) that appears on all call-to-action buttons, links, and interactive accents. This warm, inviting hue is the emotional anchor—it signals creativity and approachability without aggression. The secondary blue (#0078ff) provides technical contrast for search inputs and secondary actions, while the tertiary purple (#9b51e0) is reserved for badges and category highlights. Surfaces are intentionally light and neutral: the base background is off-white (#f8f8f8), with a carefully calibrated surface stack (surface-dim #ebebeb for subtle depth, surface-container #f2f2f2 for card backgrounds, surface-bright #ffffff for inputs and modals). The outline color (#b1b1b2) is a warm gray that softens borders without disappearing. Error states

Typography

The type system pairs Cormorant Garamond (serif, elegant, craft-heritage) for display and headline levels with Nunito (humanist sans-serif, friendly, modern) for body and label text. This pairing communicates 'traditional craft meets contemporary accessibility.' Display and headline-lg use Cormorant at 56px and 40px respectively, with tight line-height (64px, 48px) and subtle negative letter-spacing (-0.02em, -0.01em) to create visual impact without formality. Body text is set in Nunito at 18px (body-lg) and 16px (body-md) with 1.5x line-height (28px, 24px) for comfortable reading on screens. Labels use Nunito 600-weight at 14px with 0.02em letter-spacing to add subtle emphasis. On small labels over busy pattern images, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to ensure legibility w

Layout

The layout uses a 12-column fluid grid with a max-width of 1216px, centered on the viewport. The design favors generous whitespace (lg spacing: 40px) between major sections to create visual breathing room and emphasize the handmade, unhurried nature of the craft. The gutter is 24px, applied consistently to card grids and content containers. Hero section uses full-width imagery with overlaid search (md spacing: 24px padding inside the search bar). Pattern cards are arranged in a 3-column grid on desktop, with md spacing (24px) between cards. The container max-width of 1216px ensures content never feels cramped, and the off-white background (#f8f8f8) extends edge-to-edge to create a cohesive, gallery-like experience. Sidebar search suggestions use sm spacing (12px) for compact vertical stack

Elevation & Depth

Depth is achieved through subtle, warm shadows that mimic soft fabric folds rather than hard digital layers. The base elevation (sm) is 0 1px 2px rgba(0, 0, 0, 0.05)—barely perceptible, used on list items and minor UI elements. Medium elevation (md) is 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards and input fields to create gentle separation from the background. The signature elevation (lg) is 0px 0px 34px 2px rgba(242, 191, 191, 0.4)—a soft, warm glow in pale pink that appears on modals and featured content, reinforcing the brand's rose-pink identity. Primary buttons add a custom shadow: 0

Shapes

The shape philosophy is 'Rounded Warmth'—corners are softened throughout to evoke the organic, handmade quality of yarn and textiles. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel friendly and inviting. Cards and containers use md radius (8px) for a subtle, modern softness. Input fields and search boxes use the DEFAULT radius (5px) for a slightly sharper, more functional appearance. Small UI elements (badges, tags) use full radius (9999px) to maintain visual consistency. The logo itself is a perfect circle (50% border-radius), anchoring the brand identity. This c

Components

Action Elements Primary buttons (#ff91a4 background, white text, Nunito 600 label-md) use full border-radius (9999px) and 16px 40px padding for a 48px height. On hover, the background shifts to #ff5a7e with an intensified shadow (0 6px 16px rgba(255, 145, 164, 0.35)) and a 120ms ease-out transition. Secondary buttons are transparent with a 1px outline in {colors.outline}, and on hover, the background becomes {colors.surface-container-high} with the border shifting to primary pink. All buttons include a 200ms transition on background-color and box-shadow.

Containers & Surfaces Cards use {colors.surface-bright} background with {rounded.md} (8px) and {spacing.md} (24px) padding. The default shadow is {elevation.sm} (0 1px 2px rgba(0, 0, 0, 0.05)). On hover, the background shifts to {

Do's and Don'ts

**Do**

• Do use the rose-pink primary (#ff91a4) exclusively for CTAs, links, and interactive accents—it's the brand's signature and should never be diluted or replaced.
• Do maintain generous whitespace (lg: 40px) between major sections to honor the unhurried, craft-first aesthetic.
• Do pair Cormorant Garamond headlines with Nunito body text to communicate 'heritage craft meets modern accessibility.'
• Do apply soft, warm shadows (rgba(242, 191, 191, 0.4) for featured content) rather than harsh blacks to reinforce the approachable brand personality.
• Do use full border-radius (9999px) on buttons and badges to evoke the organic, handmade quality of yarn and textiles.

**Don't**

• Don't use sharp, 0px border-radius or aggressive angular shapes—they contradict the soft, craft-focused brand identity.
• Don't apply harsh, dark shadows (rgba(0, 0, 0, 0.3) or higher)—use warm, pale shadows instead to maintain the gentle aesthetic.
• Don't replace the primary pink with cooler accent colors or near-black—the rose-pink is non-negotiable for brand recognition.
• Don't crowd the layout with dense text or minimal whitespace—the design thrives on breathing room and visual clarity.
• Don't mix serif and sans-serif arbitrarily—reserve Cormorant Garamond for headlines and Nunito for body/labels to maintain hierarchy and readability.