Shoptet

Overview

Shoptet is a Czech e-commerce platform designed to democratize online retail for entrepreneurs of all sizes. The brand embodies 'Energetic Pragmatism'—a design philosophy that combines vibrant, action-oriented color accents with clean, functional layouts to inspire confidence and reduce friction in the store-building process. The UI evokes a sense of immediacy and possibility: bright, saturated primaries (golden-yellow #fcaf00 and vivid green #00e25a) pop against neutral surfaces, signaling that entrepreneurial success is within reach. The typography system uses Neue Haas Grotesk, a geometric sans-serif that conveys both modernity and approachability, avoiding the coldness of purely technical interfaces.

The brand voice is direct, encouraging, and Czech-market-native. Shoptet speaks to small business owners with clarity and optimism, never condescension. Vocabulary emphasizes speed ('Začněte podnikat'—start doing business), simplicity ('snadno'—easily), and freedom ('30 dní zdarma'—30 days free). Example sentence in brand voice: 'Založte si e-shop za minuty, ne za měsíce—a vyzkoušejte zdarma.'

Colors

The Shoptet color system is built on three primary brand accents layered over a clean white surface stack. Primary (#fcaf00, a warm golden-yellow) is the dominant call-to-action color, used on all main CTAs, hero buttons, and key interactive elements; it conveys energy, approachability, and commercial optimism. Secondary (#00e25a, a vivid lime-green) is reserved for affirmative actions, success states, and secondary CTAs, creating visual rhythm and reducing monotony. Tertiary (#1b66f9, a saturated cobalt-blue) anchors the system as a trust-building accent, used for links, focus states, and premium features. The surface stack progresses from pure white (#ffffff) through light blue-tinted containers (#f0f8ff, #e2f2ff) to support visual hierarchy without introducing darkness. On-surface text

Typography

The Shoptet type system employs Neue Haas Grotesk across all scales, a geometric sans-serif that balances technical credibility with human warmth. Display (58px, 600 weight, -0.02em tracking) anchors hero sections and major announcements, commanding attention without aggression. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy, with tighter line-heights (48px and 36px respectively) to maintain visual density. Body text (16–18px, 400 weight, 24–28px line-height) is set in the text variant of Neue Haas Grotesk for optimal readability at smaller sizes. Labels and buttons use 14px weight 700 with 0.01em tracking to ensure legibility and visual emphasis. On small labels over busy backgrounds (e.g., badges on colored cards), apply text-shadow: 0 1px 2

Layout

Shoptet uses a 12-column fluid grid with a 1440px container max-width, ensuring the design scales elegantly from mobile (single column, 24px gutter) to desktop (full 12 columns, 24px gutter). Page rhythm is established through consistent spacing: section separation uses lg spacing (40px), card-to-card gaps use md spacing (24px), and internal padding within components uses sm to md spacing (12–24px). The hero section occupies full viewport height with a dark overlay gradient (rgba(0, 0, 0, 0.4) to transparent) to ensure white headline text (#ffffff) remains readable over photographic backgrounds. Navigation is sticky at the top with a 25px offset, using a white background with 34px backdrop-filter blur and 0px 4px 20px shadow to float above content. Whitespace is generous but purposeful: ca

Elevation & Depth

Shoptet employs a subtle shadow system to convey depth without introducing darkness or visual heaviness. The elevation stack consists of three levels: Level 1 (Base/Surface) has no shadow, establishing the foundation. Level 2 (Standard Cards/Inputs) uses 0px 4px 20px 0px rgba(0, 0, 0, 0.08), a soft, spread shadow that lifts elements 4–8px above the surface. Level 3 (Modals/Dropdowns/Hover States) uses 0 8px 24px rgba(0, 0, 0, 0.12), a deeper shadow indicating modal or elevated interaction. All shadows use a neutral black with low opacity (8–12%) to avoid harsh contrast. Interactive elements (b

Shapes

Shoptet's shape philosophy is 'Approachable Geometry'—rounded corners are used liberally to soften the interface and reduce perceived corporate distance. Buttons and primary CTAs use full pill-shape (999px border-radius), a classic e-commerce convention that signals 'click me' and conveys friendliness. Secondary containers (cards, modals) use 16px border-radius (1rem), a moderate curve that balances playfulness with professionalism. Input fields use 50px border-radius, a compromise between pill-shape and standard rounding, optimizing for touch targets on mobile (minimum 44px height) while main

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (background: #fcaf00, text: white, 44px height, 8px 32px padding, 999px radius) is used for all main CTAs: 'Vyzkoušet zdarma' (Try for free), 'Založit e-shop' (Create store). On hover, the background shifts to #f6ad00 and a 0 2px 6px rgba(0,0,0,0.1) shadow appears, with a 140ms ease transition. Button-secondary (background: #00e25a, text: black, same dimensions) is used for affirmative secondary actions like 'Přijmout' (Accept) or 'Pokračovat' (Continue). Button-tertiary (background: #1b66f9, text: white) is reserved for premium or trust-building actions like 'Přihlásit se' (Sign in). All buttons use label-md typography (14px, 700 weight) and disable text-decoration on focus to maintain clean aesthetics.

C

Do's and Don'ts

**Do**

• Do use primary (#fcaf00) exclusively for main CTAs and hero buttons—it's the brand's signature accent and must remain visually dominant.
• Do maintain 24px gutters and lg spacing (40px) between sections to create breathing room and reduce cognitive load.
• Do apply 999px border-radius to all buttons and 16px to cards to reinforce the approachable, non-corporate brand personality.
• Do use Neue Haas Grotesk exclusively for all typography—it's the brand's typographic voice and ensures consistency across platforms.
• Do layer shadows using the three-level system (no shadow, 0px 4px 20px, 0 8px 24px) to convey hierarchy without introducing darkness.
• Do transition interactive elements over 140–200ms with ease timing to signal responsiveness without feeling sluggish.

**Don't**

• Don't use pure black (#000000) for text or backgrounds—always use the warm near-black (#23221f) to maintain the brand's approachable tone.
• Don't mix primary and secondary colors on the same CTA; each button should use one accent color to avoid visual confusion.
• Don't apply sharp corners (0px radius) to any interactive element; the brand's rounded aesthetic is non-negotiable.
• Don't use system fonts or generic sans-serifs; Neue Haas Grotesk is the only approved typeface for the brand.
• Don't add drop shadows with opacity > 12% or blur > 24px; the system prioritizes subtlety and visual clarity.
• Don't exceed 1440px container width on desktop, even on ultra-wide screens, to maintain content readability and design intent.