Josephmark

Josephmark evokes a commanding, minimalist aesthetic where stark contrasts and purposeful typography convey authority. The design system is built on an achromatic palette, predominantly black and white, creating an expansive canvas that recedes to highlight content. Type is a core visual element, with custom grotesk forms carrying a substantial portion of the brand identity through precise letter-spacing and varying weights. Interaction is subtle, relying on ghost elements and border changes rather than bold color accents. Prioritize high contrast between text and background, typically Midnight (#000000) on Canvas White (#ffffff) or vice-versa. Use Scto Grotesk A typeface with precise letter-spacing as defined by the type scale for all text elements. Apply a 9999px border-radius for all primary buttons to achieve a soft, pill-like shape. Utilize Platinum Mist (#e5e7eb) for subtle, hairline borders and dividers to maintain visual lightness without stark separation. Maintain generous vertical spacing between content sections, using 64px or 96px for sectionGap to create ample breathing room. Implement _elementGap at 16px to ensure a consistent, comfortable distance between adjacent UI elements. Design interactive elements as 'ghost' components using borders, favoring transparency in backgrounds to emphasize content. Use the predefined motion durations (0.3s) and ease timing functions for all UI transitions to create a responsive, fluid feel. Avoid using saturated or vivid chromatic colors; the palette is strictly achromatic with subtle gray variations. Do not introduce strong drop shadows; the design system avoids elevation through shadows and relies on stark background shifts for depth. Do not use generic system fonts; Scto Grotesk A is fundamental to the brand's typographic identity. Refrain from tight, cramped layouts; the design system emphasizes spaciousness and clear visual hierarchy through generous padding and margins. Do not use square or hard-edged buttons for primary actions; all prominent buttons should use the 9999px radius. Avoid using underlines for default link states; interaction should be indicated by hover effects or contextual cues. Do not feature imagery with busy backgrounds or conflicting color palettes; all visuals should either be monochromatic or have controlled color palettes that align with the brand's aesthetic.