Ryan Stephen

Ryan Stephen's design system evokes a clean, gallery-like presentation with a strong emphasis on content and minimal UI distraction. It utilizes a spacious, high-contrast monochrome palette to make imagery pop, ensuring the focus remains on the product designs showcased. Typography is understated and functional, blending into the background to support the visual work. Components are highly softened with generous corner radii, creating a friendly, approachable feel for an otherwise stark layout. Prioritize Canvas White (#ffffff) for all large background areas to maintain a spacious, gallery-like feel. Use Ink Black (#000000) strictly for primary headings and critical UI elements where maximum contrast is essential, like primary text. Apply a consistent 10px border-radius to all image containers and card-like components to ensure a cohesive, softened aesthetic. Maintain a visual hierarchy where body text uses Graphite Text (#404040) for readability and softer links use Ash Gray (#8b8b94). Structure layouts with a generous 100px section gap for clear delineation between major content blocks, creating an airy feel. Employ a base element gap of 20px for consistent spacing between distinct UI components. Utilize 15px spacing for items within image grids or compact lists to keep related content visually grouped but distinct. Do not introduce strong, saturated colors unless they are part of the image content itself; the UI must remain monochrome. Avoid sharp corners or square edges on any interactive or content card-like element; always adhere to the 10px radius. Do not deviate from the specified typography hierarchy; avoid using 12px for body content or 16px for captions. Do not overcrowd sections; preserve the spacious feel by respecting the 100px section gap. Avoid heavy borders or strong shadows; the design relies on stark white space and soft radii for definition. Do not use generic system font weights other than 400 or 500; the UI's subtle nature depends on these choices. Do not use bright or animated hover states for links; interactions should be understated or rely on browser defaults.