Shop

Shop's design system evokes a digital boutique atmosphere: clean, spacious white surfaces present product cards and information with minimal distraction allowing the content to breathe. A distinctive vivid violet acts as a signature accent, punctuating interactive elements and branding. Typography is compact and precise, maintaining a high information density without feeling cramped, while subtle shadows give elements a soft lift. Use Canvas (#ffffff) sparingly as a primary action background, preferring Shop Violet (#5433eb) for true calls to action to maintain brand distinction. Apply GTStandard-MRegular for all main body content and instructional text, utilizing the specified letter-spacing for each size to maintain compact readability. Employ the 11.4046px radius for product image containers within cards to provide a soft-edged visual. Ensure interactive elements such as buttons and form fields primarily use the 22.8092px or 1e+07px (pill shape) border radii for consistency. Maintain an elementGap of 8px between closely related UI components to ensure comfortable spacing within compact layouts. Utilize Muted Text (#707070) for descriptive labels and secondary information, reserving Ink Black (#000000) for primary headlines and critical text. Apply the Violet Shadow (rgba(69, 36, 219, 0.34) 0px 4px 24px 0px) to interactive and elevated components, especially buttons, to provide distinct depth. Do not use generic system fonts; always map to the specified GTStandard or Shopify Sans families or their substitutes. Avoid using Ink Black (#000000) as a prominent background color; it is reserved for text, borders, and accents. Do not deviate from the established letter-spacing values from GTStandard-MRegular typographic scale; they are critical for the brand’s compact text aesthetic. Do not introduce new border radii beyond the defined set (8px, 11.4046px, 17.1064px, 22.8092px, 28px, 32px, 9999px) to maintain a consistent visual language. Do not use highly saturated colors other than Shop Violet (#5433eb); the system relies on a monochrome base with one distinct accent. Avoid large, impactful hero images; imagery should be contained within cards or product visuals. Do not use hard, sharp shadows; all elevation should be achieved using the soft, diffused Violet Shadow.