ViceCream

Overview

ViceCream is a contemporary gelato and dessert brand that embraces a "Gradient Maximalism" aesthetic—a playful, energetic design movement that celebrates color saturation, smooth transitions, and youthful exuberance. The brand serves local ice cream enthusiasts, horeca partners, and dessert lovers since 2016, positioning itself as an approachable yet premium artisanal destination. The UI evokes warmth, accessibility, and joy through a light, sky-blue canvas (#DFEEFF) layered with vibrant gradient overlays and semi-transparent frosted glass elements. The emotional response is one of discovery and indulgence: users feel invited into a playful, modern space where gelato is celebrated as both craft and celebration.

The brand voice is conversational, warm, and slightly irreverent—never corporate, always human. Vocabulary leans into sensory language ("creamy," "vibrant," "smooth") and playful phrasing. Example sentence in brand voice: "Your local ice cream dealer since 2016—because life's too short for boring gelato."

Colors

ViceCream's color system is built on a luminous, cool-toned foundation that evokes clarity and freshness. The primary surface (#DFEEFF, a soft periwinkle-blue) creates an airy, inviting backdrop that feels both modern and approachable. The primary accent color (#004E95, a deep ocean blue) is reserved for key interactive elements—CTAs, navigation highlights, and focus states—providing strong contrast and visual authority without overwhelming the playful palette.

Secondary and tertiary colors inject energy: the secondary accent (#FF5800, a vibrant burnt orange) energizes call-to-action buttons and highlights, while the tertiary accent (#61CE70, a fresh lime green) is used for success states, badges, and positive affirmations. The error state (#DE1F1A, a crisp red) maintains legibility and u

Typography

The type system centers on Vice-Sans-Regular-Variable, a custom variable font family that conveys contemporary friendliness without sacrificing legibility. Display and headline weights (700–600) are used sparingly for hero statements and section titles, establishing visual hierarchy through size and weight rather than color alone. Body text (400 weight, 18–20px) maintains warmth and readability across all screen sizes, with generous line-height (26–28px) to support scanning and accessibility. The italic variant (Vice-Italic-Variable) is reserved for input placeholders and secondary messaging, adding personality without distraction. Letter-spacing is tightly controlled: headlines use -0.02em to -0.04em for visual tightness, while body text uses 0.01em for subtle breathing room. Apply text-s

Layout

The page rhythm follows a 12-column grid system with a fixed max-width of 1290px, creating a structured yet flexible canvas. The light, airy surface (#DFEEFF) serves as the primary container, with sections separated by lg spacing (40px) to create breathing room and visual rest. The hero section occupies the full viewport width, featuring a large product imagery area with overlaid text and navigation. Below, three equal-width cards (each using rounded.xl at 40px border-radius) showcase the brand's three core offerings: Horeca/Furnizare, Gelato Bar, and Cakes & Desserts. These cards use semi-transparent dark overlays (rgba(0, 0, 0, 0)) with backdrop-filter blur(10px) to create depth without obscuring the background. Gutter spacing is consistently 24px between columns and sections, maintainin

Elevation & Depth

Depth in ViceCream is achieved through a layered glassmorphic approach rather than traditional drop shadows. Level 1 (Base): The background gradient (#DFEEFF to #C3DAFF) provides the foundational energy. Level 2 (Standard Cards): Semi-transparent dark overlays (rgba(0, 0, 0, 0) to rgba(0, 0, 0, 0.05)) combined with backdrop-filter: blur(10px) and a 1px border at rgba(255, 255, 255, 0.1) create a frosted-glass effect that feels modern and sophisticated. Level 3 (Elevated/Interactive): On hover, cards transition to rgba(0, 0, 0, 0.05) with a subtle inset shadow (0px 0px 50px 7px rgba(0, 76, 148,

Shapes

ViceCream employs a "Soft-Technical" shape philosophy that balances approachability with contemporary precision. Buttons and primary CTAs use rounded.xl (40px border-radius), creating a friendly, pill-like appearance that feels inviting and modern. Cards and containers use rounded.lg (30px) for a slightly sharper, more structured feel that suggests craftsmanship. Input fields use rounded.DEFAULT (15px), striking a middle ground between playful and functional. Navigation items use rounded.lg (30px) to match card styling, creating visual consistency across interactive surfaces. The full-radius (

Components

Action Elements Buttons are the primary interaction mechanism and come in two distinct styles. The primary button uses {colors.primary} (#004E95) with {colors.on-primary} text, rounded.xl (40px), and padding 15px 50px, creating a confident, clickable target. On hover, the background transitions to {colors.primary-fixed-dim} (#5EADD4) with a 200ms ease-in-out transition, providing clear feedback without animation fatigue. The secondary button uses a semi-transparent dark overlay (rgba(0, 0, 0, 0.65)) with white text, maintaining visual distinction while supporting the glassmorphic aesthetic. Both buttons use label-md typography (16px, 500 weight) for legibility at any size.

Containers & Surfaces Cards are the primary content container and use a transparent background (rgba(0, 0, 0,

Do's and Don'ts

**Do**

• Do use the primary color (#004E95) exclusively for high-priority CTAs and focus states—never dilute it with secondary uses.
• Do apply backdrop-filter: blur(10px) to all card and overlay elements to maintain the glassmorphic aesthetic and visual cohesion.
• Do use Vice-Sans-Regular-Variable for all body and UI text; reserve Vice-Italic-Variable only for input placeholders and secondary messaging.
• Do maintain the lg spacing (40px) between major sections to create breathing room and visual rest on the light surface.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-in-out timing to feel responsive and polished.

**Don't**

• Don't use hard drop shadows (box-shadow: 0 10px 30px rgba(0,0,0,0.3)) on cards—the inset glow and backdrop-filter blur create sufficient depth.
• Don't apply the secondary color (#FF5800) to body text or non-interactive elements; reserve it for accents, badges, and secondary CTAs.
• Don't reduce border-radius below rounded.DEFAULT (15px) on interactive elements—the soft, rounded aesthetic is core to the brand identity.
• Don't use system fonts or fallbacks in place of Vice-Sans-Regular-Variable; the custom typeface is essential to brand recognition and personality.