Design System Document: Artisanal Elegance

1. Overview & Creative North Star

Creative North Star: "The Confectioner’s Gallery"

This design system is not a mere utility; it is a digital extension of the physical 'Piekarnik Gosi' experience. It treats every interface as a curated display case, mirroring the warmth of a family-owned bakery and the precision of a high-end pâtisserie.

To break the "template" look common in local business sites, this system rejects rigid grids in favor of Intentional Editorial Asymmetry. We lean into overlapping elements—such as a product image bleeding off-center into a text block—to mimic the organic arrangement of cakes on a counter. The visual language is defined by high-contrast typography scales, where massive, elegant serifs meet delicate, airy sans-serifs, creating an atmosphere that is both approachable and elite.

2. Colors

The palette is derived from the shop's interior: sage greens, dusty roses, and warm creams. This is a tonal system designed for warmth.

The "No-Line" Rule

Explicit Instruction: Designers are prohibited from using 1px solid borders to define sections. Boundaries must be defined solely through background color shifts. For example, a section using surface-container-low (#faf3e7) should sit directly against a surface (#fff8f0) background. This creates a soft, "dipped" effect rather than a harsh, boxed-in feel.

Surface Hierarchy & Nesting

Treat the UI as physical layers of fine vellum paper. Use the surface tiers to create "nested" depth:

Base Level: surface (#fff8f0) for the main body.
Sectioning: surface-container-low (#faf3e7) for large background blocks (e.g., the "Our Story" section).
Interactive Layers: surface-container-highest (#eae2d2) for secondary cards or floating menus to define importance through tonal weight.

The "Glass & Gradient" Rule

To move beyond a flat, "standard" UI, use Glassmorphism for floating elements (like a navigation bar or a "Quick Cart"). Utilize semi-transparent surface colors with a backdrop-blur of 12px-20px. Signature CTA Polish: Use subtle linear gradients for primary actions, transitioning from primary (#8c4d50) to primary-container (#fcacaf). This adds "visual soul" and a velvet-like texture that flat colors cannot replicate.

3. Typography

The typography strategy balances the "Tradition" of the bakery with the "Clarity" of a modern cafe menu.

Display & Headlines (Noto Serif): These are our "Artisanal" markers. Use large scales (e.g., display-lg at 3.5rem) with tighter letter-spacing for a high-end editorial look. Italics should be used sparingly for "O nas" or "Nasze Wyroby" to evoke a handwritten, personal touch.
Titles & Body (Plus Jakarta Sans): This is our "Modern Service" layer. It provides high legibility. title-lg is your workhorse for product names, while body-md ensures the ingredients list is readable at any age.

The hierarchy conveys the brand: The Serif speaks to the quality of the recipe; the Sans-Serif speaks to the friendliness of the service.

4. Elevation & Depth

We eschew structural lines for Tonal Layering.

The Layering Principle: Stack containers to create lift. Place a surface-container-lowest (#ffffff) card on a surface-container-low (#faf3e7) section. This mimics the way a white pastry box sits on a cream-colored wooden table.
Ambient Shadows: For "floating" elements (like a cupcake selection modal), use extra-diffused shadows.
- Formula: 0px 12px 32px rgba(54, 50, 39, 0.06). Note the color is a tinted version of on-surface, never pure black.
The "Ghost Border" Fallback: If a border is required for accessibility, it must be a "Ghost Border": use outline-variant (#b9b1a3) at 15% opacity. 100% opaque borders are strictly forbidden.
Soft Geometry: Utilize the lg (2rem) and xl (3rem) roundedness tokens. This mimics the scalloped wall details and rounded seating seen in the 'Piekarnik Gosi' interior.

5. Components

Buttons

Primary: Rounded full (9999px). Gradient background (primary to primary-container). Label in on-primary (#fff7f6).
Secondary: Surface-colored with a "Ghost Border." High-quality hover state: a subtle shift to surface-container-high.

Cards & Lists

Rule: Absolute prohibition of divider lines.
Implementation: Use vertical whitespace (refer to Spacing Scale) and background shifts. A product list should be a sequence of surface-container-lowest tiles floating on a surface background.
Bakery Icons: Use custom line-art icons (Cupcakes, Whisks) in the primary color, but place them within a secondary-container (#e0f5cb) circle to create a "stamp" effect.

Selection Chips

Use the md (1.5rem) roundedness. Use secondary-container for the "Active" state to bring in the sage green from the shop’s beams and window frames.

Input Fields

Avoid the "boxed" look. Use surface-container-highest as a solid background fill with a bottom-only outline at 20% opacity. This feels more like a chic, handwritten menu.

6. Do’s and Don'ts

Do:

Embrace Whitespace: Let the "Cream" background breathe. High-end design is defined by what isn't there.
Layer Tones: Always ask "Can I use a color shift instead of a line?"
Iconography with Intent: Use bakery-specific icons to reinforce the family-oriented, artisanal nature.
Asymmetric Layouts: Place a large serif heading on the left and a product image slightly overlapping it on the right.

Don't:

Don't use pure black (#000000): Use on-background (#363227) for text to maintain a warm, organic feel.
Don't use hard corners: Every element should feel as soft as a pastry. Minimum corner radius is sm (0.5rem), but aim for lg (2rem).
Don't use heavy shadows: If the shadow looks "dirty" or "heavy," reduce the opacity. It should feel like morning light in a coffee shop.
Don't use standard Dividers: If you need to separate content, use a change in background color or a 48px-64px vertical gap.

6 KiB Raw Blame History Unescape Escape