
Preview image. Unlock full-res
Midnight product showcase
Holiday 100 features a dark, spacious aesthetic with a focus on product showcase. Generous negative space and subtle card treatments ensure content breathes, while selective use of vibrant accent colors for key messages and interactive elements adds visual interest without overpowering the rich product imagery. Typography combines a classic serif for headlines with a clean sans-serif for body text, creating a modern yet approachable feel. The system prioritizes clarity and directness over heavy adornment.
Use Midnight Ink (#202124) as the default background for sections and cards to maintain a consistent dark theme.
Employ Ash Gray (#e8e8e8) for all primary text elements, ensuring strong readability against dark surfaces.
Apply a 20px border-radius to all cards and primary buttons to maintain a soft, approachable aesthetic.
Utilize Sky Link (#99c3ff) for interactive elements like links and outlined button borders, providing a clear and consistent interactive cue.
Maintain a comfortable rhythm with 36px spacing between major sections and 6px element gaps for tighter UI components.
Pair Crimson Pro (weight 200) for hero headlines at large sizes with Google Sans (weight 400-500) for section headings to balance elegance with modern clarity.
Use specific accent card backgrounds (e.g., Crimson Alert #980b0b or Cerulean Insight #113979) only for curated product groups or messages requiring visual emphasis, reserving them for distinct categories.
Do not introduce light backgrounds for entire sections or pages; the theme is predominantly dark.
Avoid blocky or sharp corners; all significant UI elements should leverage the 20px border-radius.
Do not use highly saturated colors for large surface areas unless it's one of the pre-defined accent card backgrounds and serves a clear thematic purpose.
Avoid heavy drop shadows or glows; the design relies on subtle background color shifts for surface distinction.
Do not use generic system fonts when Google Sans or Crimson Pro are available for headings and subheadings; Arial is reserved for body text.
Do not use letter-spacing outside the specified values for Google Sans and Crimson Pro; maintain the precise tracking for these fonts.
Avoid dense UI elements with minimal padding; prioritize comfortable spacing, using 24px for card padding and 14px for button vertical padding.









