My Site 3

The design system for Al Murphy embraces a whimsical, hand-drawn aesthetic, appearing as illustrations on a digital sketchbook. It features a high contrast monochrome palette of black and white, with thin, hand-sketched lines defining all elements. Typography is minimal, relying on system fonts for navigation and a custom, expressive font for decorative elements, maintaining a light and unpolished feel. The layout provides ample negative space allowing the 'sticker-like' illustrations to breathe and maintain their organic, playful rhythm. Prioritize use of Canvas White (#ebebeb) for page backgrounds to maintain the sketchbook aesthetic. Use Line Art Black (#000000) for all text color, borders, and UI outlines to unify the hand-drawn style. Maintain the whimsical, illustrative tone with helvetica-w01-roman for decorative headings at 14px 400 weight. Employ Arial 400 weight at 10px or 13px for all body text, links, and navigation, ensuring legibility without distracting from illustrations. Ensure generous use of Element Gap (17px) and Section Gap (61px) to create breathing room between illustrations and content sections. Utilize Button Primary Fill (#143b0a) with Button Primary Text (#8bff82) for any primary call-to-action buttons. Feature 'Ghost Button' for navigation and secondary actions, defined by a 1px Line Art Black (#000000) border and 0px radius. Avoid using strong, saturated colors for backgrounds or large areas; restrict color to illustrations and defined interactive states. Do not introduce sharp, geometric shapes or hard edges; maintain the organic, hand-drawn feel with 0px radii. Do not use elaborate hover states or complex animations on UI elements; keep interactions simple and swift. Avoid heavy shadows, gradients, or elevated components that would contradict the flat, illustrated visual language. Do not break away from the dominant monochrome and hand-drawn line style for any new pictorial elements or icons. Do not use strong typographic hierarchy with varying weights or extended type scales beyond the defined Arial and helvetica-w01-roman roles. Avoid dense information blocks; instead, distribute content with generous spacing and illustration breaks.