Switch between the rendered Visual preview and the Raw DESIGN.md.
Premiumku's design system embodies a premium, trustworthy digital marketplace aesthetic with clean, modern sensibilities. The visual language prioritizes clarity and accessibility while maintaining a sophisticated, professional tone through generous whitespace, refined typography, and strategic use of purple as a confidence-building accent. The interface exudes reliability and ease of navigation, designed for both casual browsers and power users purchasing premium digital subscriptions. Soft shadows and rounded corners create approachability, while a slate-to-neutral color palette ensures focus remains on content and transaction flows.
Key Characteristics
#7C3AED): Main buttons, primary CTAs, accent highlights for interactive elements#8B5CF6): Secondary purple shade for depth and hover states#EAB308): Alert states, warning badges, attention-grabbing notices#E11D48): Critical alerts, destructive actions, high-priority errors#EF4444): Alternative error state, secondary danger indicators#7C3AED): Hyperlinks, inline actions in primary brand color#475569): Secondary links, muted interactive text#0F172A): Darkest text, high-priority headings (inferred from palette)#1E293B): Primary heading text, high contrast content#334155): Body text, main paragraph content (most frequently used)#475569): Secondary text, labels, supplementary information#64748B): Tertiary text, placeholders, disabled states#94A3B8): Light text, muted information#FFFFFF): Primary surface, card backgrounds, modals#F8FAFC): Light backgrounds, input fields, subtle containers#F1F5F9): Secondary light background, alternate sections#E2E8F0): Subtle borders, dividers#E5E7EB): Standard border color (most frequently used)#CBD5E1): Very light borders, low-emphasis dividers#EDE9FE): Purple tint backgrounds, elevated accent zonesPrimary: Plus Jakarta Sans (sans-serif)
Fallback stack: Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Plus Jakarta Sans | 48px | 900 | 48px | 0px | Hero titles, page headlines |
| Heading H2 | Plus Jakarta Sans | 32px | 900 | 40px | 0px | Section headers (inferred) |
| Heading H3 | Plus Jakarta Sans | 16px | 900 | 24px | 0px | Card titles, subsections |
| Heading H4 | Plus Jakarta Sans | 14px | 900 | 20px | 0px | Component headers |
| Label / Button | Plus Jakarta Sans | 14px | 700 | 20px | 0px | Button text, form labels |
| Body | Plus Jakarta Sans | 14px | 500 | 20px | 0px | Primary body text, paragraphs |
| Body Small | Plus Jakarta Sans | 12px | 500 | 16px | 0px | Secondary body, captions |
| Link | Plus Jakarta Sans | 16px | 400 | 24px | 0px | Standalone links |
| Input / Input Label | Plus Jakarta Sans | 14px | 600 | 20px | 0px | Form input text, field labels |
| Span / Highlight | Plus Jakarta Sans | 20px | 900 | 28px | 0px | Highlighted numeric or emphasis text |
rgb(124, 58, 237) / #7C3AEDrgb(255, 255, 255) / #FFFFFF14px70014px 24px16px0px solid transparentrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(221, 214, 254) 0px 4px 6px -1px, rgb(221, 214, 254) 0px 2px 4px -2px50px20px#6D28D9 with intensified shadowrgba(124, 58, 237, 0.4) 0px 10px 20px -5px shadowrgb(124, 58, 237) / #7C3AEDrgb(255, 255, 255) / #FFFFFF12px70010px 20px99px1px solid rgb(124, 58, 237)rgba(124, 58, 237, 0.4) 0px 10px 20px -5px38px16pxrgb(255, 255, 255) / #FFFFFFrgb(71, 85, 105) / #47556912px70010px 20px99px1px solid rgb(226, 232, 240) / #E2E8F0none38px16px#CBD5E1, background to #F8FAFCtransparentrgb(71, 85, 105) / #47556912px70010px 20px99px1px solid rgb(226, 232, 240) / #E2E8F0none38px16pxrgba(248, 250, 252, 0.5)rgba(255, 255, 255, 0.9)rgb(51, 65, 85) / #33415516px40016px24px1px solid rgb(226, 232, 240) / #E2E8F0none24px#DDD6FE, background lifts to rgba(255, 255, 255, 1), shadow applies: rgba(0, 0, 0, 0.05) 0px 10px 15px -3pxrgba(255, 255, 255, 1) / #FFFFFF24px1px solid rgb(226, 232, 240) / #E2E8F0rgba(0, 0, 0, 0.25) 0px 25px 50px -12px24px (inferred for modal content spacing)rgb(248, 250, 252) / #F8FAFCrgb(51, 65, 85) / #33415514px60014px 16px (left-padded for icon: 14px 16px 14px 44px)16px1px solid rgb(226, 232, 240) / #E2E8F0none50px20pxrgb(148, 163, 184) / #94A3B8#7C3AED, box-shadow adds 0px 0px 0px 3px rgba(124, 58, 237, 0.1)#EF4444, background tints with error color washrgba(0, 0, 0, 0) / transparentrgb(51, 65, 85) / #33415516px4000px 16px 8px 16px0px0px solid transparent24px#7C3AED, underline with height 2px at bottomtransparentrgb(51, 65, 85) / #33415516px4000px24px> with margin 0px 8pxtransparentrgb(100, 116, 139) / #64748B14px7008px 12px0px (no border radius for inline badges)20px#334155rgb(124, 58, 237) / #7C3AEDrgb(255, 255, 255) / #FFFFFF14px70010px 24px12px0px solid transparentrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(221, 214, 254) 0px 4px 6px -1px, rgb(221, 214, 254) 0px 2px 4px -2px40px20pxBase Unit: 8px
Scale:
8px — micro-spacing, icon padding, tight grouped elements12px — small component padding, minimal margins16px — standard component padding, internal spacing20px — standard section margins, medium spacing between groups24px — larger sections, card padding, prominent separators32px — major section breaks, container padding40px — large vertical rhythm, between major sections48px — prominent vertical spacing, hero sections64px — hero padding, large container margins80px — full-width section spacing96px — extra-large section padding112px — massive vertical breathing roomUsage Context:
14px 24px padding (MD horizontal + XL horizontal)16px padding (MD)40px 24px to 64px 32px (varies by section importance)24px padding minimum (XL)1280px for main content (inferred standard)24px between columns at desktop, 16px on tablet, 12px on mobile24px minimum left/right on all screen sizesGenerous whitespace defines the Premiumku interface, creating visual breathing room and reducing cognitive load. Whitespace is used strategically to group related elements, separate sections, and guide user focus toward primary actions. Cards and containers leverage internal padding to create clear content boundaries. Vertical rhythm uses multiples of 8px for consistent scaling across all breakpoints. Whitespace increases proportionally with screen size: tighter on mobile, more expansive on desktop.
8px — images, small inline elements, tight corners12px — link buttons, secondary components16px — primary buttons, input fields, secondary cards24px — product cards, containers, modals99px — pill buttons, fully rounded elements0px — navigation items, dividers, inline text links| Level | Treatment | Use |
|---|---|---|
| Base | none | Flat backgrounds, neutral surfaces, default card state |
| Lifted (sm) | rgba(0, 0, 0, 0.25) 0px 25px 50px -12px | Modals, floating containers, highest elevation |
| Hover (md) | rgb(221, 214, 254) 0px 4px 6px -1px, rgb(221, 214, 254) 0px 2px 4px -2px | Button hover, card interactive states, subtle lift |
| Active (lg) | rgba(124, 58, 237, 0.4) 0px 10px 20px -5px | Active buttons, pressed states, engagement feedback |
| Elevated (xl) | rgba(196, 181, 253, 0.5) 0px 20px 25px -5px, rgba(196, 181, 253, 0.5) 0px 8px 10px -6px | High-priority interactive elements, floating UI |
Shadow Philosophy:
Premiumku uses subtle, purposeful shadows to create depth without visual noise. Shadows employ soft spreads and low opacity to feel modern and refined. Purple-tinted shadows reinforce brand identity on interactive elements (buttons, hover states), while dark shadows reserve for maximum elevation (modals). Shadows consistently use 0px X offset and increase Y offset with elevation level. All shadows include two-layer depth rendering for refined appearance. Shadows scale proportionally with interaction importance: minimal for static elements, pronounced for user-triggered states.
#7C3AED (purple) for all primary CTAs and interactive highlights16px border-radius to text inputs and secondary buttons for consistency24px border-radius on all card and container elements14px 24px padding on primary buttons for comfortable touch targetsrgb(226, 232, 240) borders to light-background components16px vertical spacing0px 25px 50px -12px with rgba(0, 0, 0, 0.25)#000000 or #FFFFFF in favor of slate tones (#334155, #FFFFFF with alpha)8px or > 24px except for pill buttons (99px)14px — causes illegibility14px unless weight is 700+#EF4444) for informational messages; reserve for critical alerts12px (too cramped for touch targets)| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single column, 12px gutters, 16px container padding, font size -2px on body, button padding 10px 16px |
| Tablet | 640px–1023px | 2–3 columns, 16px gutters, 20px container padding, card width adapts to column |
| Desktop | 1024px–1279px | 4 columns, 24px gutters, 24px container padding, full component sizing |
| Large Desktop | 1280px+ | 12 columns, 24px gutters, 32px container padding, max-width enforced |
44px × 44px for all interactive elements (buttons, links, input fields)48px–50px for primary buttons and form inputs8px vertical, 12px horizontal to prevent accidental taps36px including padding to meet touch accessibility44px × 44px with centered icon, typically 24px icon size640px breakpoint; drawer slides from left16px margins, max-width 600px on tablet+32px desktop to 16px mobile; maintain internal card padding at 16px1px–2px if needed for space8px even on mobile#7C3AED)#6D28D9)#F8FAFC)#FFFFFF)#1E293B)#334155)#64748B)#E2E8F0)#CBD5E1)#EF4444)#EAB308)#10B981)All primary actions use #7C3AED with weight 700, 14px font, 14px 24px padding, 16px border-radius, and md shadow stack.
Text inputs and form fields use #F8FAFC background, #334155 text at weight 600, 14px size, 16px border-radius, and #E2E8F0 border; include 44px min-height for mobile touch.
Cards always apply 24px border-radius, 16px internal padding, #E2E8F0 border, semi-transparent white background rgba(255, 255, 255, 0.9), and lift to full white on hover with md shadow.
All headings use Plus Jakarta Sans weight 900: h1 at 48px, h3 at 16px; body text weight 500 at 14px with 20px line-height.
Spacing follows the 8px scale: 16px for cards, 24px for sections, 40px for major breaks; never go below 8px or use odd numbers outside 12/20/24/32 increments.
Buttons: Primary pill-style at 12px weight 700 with 99px border-radius and lg shadow; secondary pill at same style with white background and light border; always 38px–50px height.
Modals: 24px border-radius, white background, #E2E8F0 border, 24px internal padding, and sm shadow 0px 25px 50px -12px rgba(0, 0, 0, 0.25) for maximum elevation.
All interactive elements require hover states: buttons darken or shift shadow; cards lift with subtle shadow; links underline or shift color to #7C3AED.
Input validation: Error state adds #EF4444 border, warning state adds #EAB308 left border accent; success uses green tint (not in extracted palette; recommend #10B981).
Responsive: Desktop 24px gutters → Tablet 16px gutters → Mobile 12px gutters; single column mobile, 2–3 tablet, 4+ desktop; always maintain 44px min touch target height.