Switch between the rendered Visual preview and the Raw DESIGN.md.
The Praktika design system embodies a bold, energetic, and approachable aesthetic tailored for modern digital learning. It combines vibrant, playful accents with a sophisticated dark foundation, creating a visual identity that feels simultaneously professional and inviting. The system celebrates bright yellows, purples, and oranges against deep charcoal backgrounds, enhanced by minimalist line-art illustrations and geometric shapes. This contrast-driven approach maintains high readability while projecting confidence and innovation—ideal for an e-learning platform targeting design-conscious learners. The design prioritizes clarity and hierarchy through thoughtful spacing, rounded micro-interactions, and a warm, human-centered color language.
Key Characteristics
#0057FF)#0057FF): Dominant interactive color used for buttons, links, highlights, and key UI affordances. Conveys trust and urgency in CTAs.#E0EAFF): Softer variant of primary blue for backgrounds, hover states, and low-emphasis interactive surfaces.#FFEEAA): High-energy secondary accent used in course cards, badges, and promotional hero sections to draw attention.#001E36): Deep accent reserved for premium or high-value content sections and elevated design moments.#D00D00): Reserved for error states, validation failures, and critical warnings requiring user attention.#191919): Deep charcoal used as the primary text color across all body copy, headers, and UI labels. High contrast against light backgrounds.#696969): Medium gray for secondary text, hints, and de-emphasized copy.#808080): Lighter gray for disabled states, placeholders, and lowest-priority information.#FFFFFF): Primary surface color for cards, containers, and light UI areas. Ensures high contrast and readability.#F9F9F9): Subtle background alternative to pure white, reducing eye strain in expansive layout areas.#F5F8FF): Cool-tinted off-white reserved for primary-color-adjacent backgrounds and hero sections.#E8E8E8): Subtle border color for dividers, input fields, and contained sections.#000000): Reserved for strongest contrast needs, deep shadows, and maximum emphasis.Primary: acumin-pro with fallback to sans-serif
Secondary: acumin-pro (unified family across all typographic scales)
Fallback stack: acumin-pro, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | acumin-pro | 48px | 700 | 56px | 0px | Reserved for page titles and maximum-impact headings |
| H1 / Section Title | acumin-pro | 20px | 700 | 24px | 0px | Primary heading for content sections and modals |
| H2 / Subsection | acumin-pro | 20px | 700 | 24px | 0px | Secondary heading, course titles, card headlines |
| H3 / Label Bold | acumin-pro | 16px | 700 | 20.8px | 0px | Form labels, strong emphasis text |
| Body / Paragraph | acumin-pro | 15px | 400 | 20px | 0px | Standard body copy for course descriptions and extended copy |
| Body Strong | acumin-pro | 15px | 900 | 19.5px | 0px | Emphasized body text and badge labels |
| Body Semibold | acumin-pro | 16px | 600 | 20.8px | 0px | Supporting labels and secondary headings |
| Button / CTA | acumin-pro | 14px | 600 | 14px | 0px | Primary and secondary button text |
| Input / Form | acumin-pro | 15px | 600 | normal | 0px | Placeholder and input field text |
| Link | acumin-pro | 12px | 400 | 15.6px | 0px | Navigation links and inline hypertext |
| Caption / Meta | acumin-pro | 12px | 400 | 15.6px | 0px | Small supporting text, timestamps, and metadata |
acumin-pro across scales, ensuring visual cohesion and reducing font loading overhead.background-color: #0057FF
color: #FFFFFF
font-size: 14px
font-weight: 600
font-family: acumin-pro
padding: 12px 20px
border-radius: 100px
border: none
box-shadow: none
height: 32px
line-height: 14px
transition: background-color 200ms ease
Hover State:
background-color: #0047CC
Active State:
background-color: #003C99
Disabled State:
background-color: #E8E8E8
color: #808080
cursor: not-allowed
background-color: #F5F8FF
color: #0057FF
font-size: 14px
font-weight: 600
font-family: acumin-pro
padding: 12px 20px
border-radius: 100px
border: 1px solid #E0EAFF
box-shadow: none
height: 32px
line-height: 14px
transition: background-color 200ms ease, border-color 200ms ease
Hover State:
background-color: #E0EAFF
border-color: #0057FF
Active State:
background-color: #C9D9FF
border-color: #0047CC
background-color: transparent
color: #191919
font-size: 12px
font-weight: 400
font-family: acumin-pro
padding: 0px 16px
border-radius: 0px
border: none
box-shadow: none
height: auto
line-height: 15.6px
transition: color 200ms ease
Hover State:
color: #0057FF
Active State:
color: #003C99
text-decoration: underline
background-color: #FFFFFF
border-radius: 24px
padding: 20px
border: none
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08)
transition: box-shadow 200ms ease, transform 200ms ease
Accent Variant (Yellow Background):
background-color: #FFEEAA
Accent Variant (Purple Background):
background-color: #D4C0E8
Accent Variant (Orange Background):
background-color: #FFB88C
Hover State:
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12)
transform: translateY(-4px)
background-color: #FFFFFF
border-radius: 12px
padding: 32px
border: none
box-shadow: none
Dark Variant:
background-color: #191919
color: #FFFFFF
background-color: #FFFFFF
color: #191919
font-size: 15px
font-weight: 600
font-family: acumin-pro
padding: 12px 16px
border-radius: 8px
border: 1px solid #E8E8E8
box-shadow: none
height: 44px
line-height: normal
transition: border-color 200ms ease, box-shadow 200ms ease
Focus State:
border-color: #0057FF
box-shadow: 0px 0px 0px 3px rgba(0, 87, 255, 0.1)
outline: none
Error State:
border-color: #D00D00
Placeholder Text:
color: #808080
font-weight: 400
width: 20px
height: 20px
border-radius: 3px
border: 2px solid #E8E8E8
background-color: #FFFFFF
cursor: pointer
transition: background-color 200ms ease, border-color 200ms ease
Checked State:
background-color: #0057FF
border-color: #0057FF
background-color: #FFFFFF
color: #191919
font-size: 12px
font-weight: 400
font-family: acumin-pro
padding: 16px 32px
border-radius: 0px
border: none
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04)
height: 64px
line-height: 15.6px
Link State:
color: #191919
text-decoration: none
transition: color 200ms ease
Link Hover State:
color: #0057FF
Link Active State:
color: #0057FF
font-weight: 600
border-bottom: 2px solid #0057FF
background-color: #F5F8FF
color: #191919
font-size: 12px
font-weight: 600
font-family: acumin-pro
padding: 8px 16px
border-radius: 50px
border: none
box-shadow: none
height: 32px
line-height: 15.6px
cursor: pointer
transition: background-color 200ms ease, color 200ms ease
Hover State:
background-color: #E0EAFF
Active State:
background-color: #0057FF
color: #FFFFFF
background-color: #E0EAFF
color: #0057FF
font-size: 11px
font-weight: 600
font-family: acumin-pro
padding: 4px 12px
border-radius: 3px
border: none
box-shadow: none
height: auto
line-height: 14px
display: inline-block
Primary Variant:
background-color: #0057FF
color: #FFFFFF
Accent Variant (Yellow):
background-color: #FFEEAA
color: #191919
Base Unit: 4px
Spacing Scale:
4px — Micro-adjustments, icon padding, tight component spacing8px — Tight padding, small component gaps12px — Standard small padding, form field spacing16px — Default padding, consistent content margins20px — Card and container padding24px — Section padding, medium spacing32px — Large section gaps, page padding40px — Extra large padding for hero sections52px — Major section separators56px — Full-screen section spacing72px — Page section breaks80px — Maximum breathing room between major content areasUsage Context:
12px 20px20px to 32px32px to 72px12px to 16px16px horizontally, 12px verticallyMax Width: 1440px for full-width layouts; 1200px for content containers
Column Strategy: 12-column grid system with flexible gutters
12 columns, 32px gutter8 columns, 24px gutter4 columns, 16px gutterSection Patterns:
32px gaps between itemsThe design system embraces generous whitespace as a core principle, especially in learning contexts where visual clarity reduces cognitive load. Spacing increases at scale—individual components have tight padding (8px–12px), but sections are separated by 32px–72px gutters. This creates visual breathing room that guides user focus and reduces overwhelm. Whitespace is never purely empty; it serves functional purposes: separating content concepts, creating visual hierarchy, and establishing rhythm across pages.
0px — Navigation bars, extended inputs, full-width containers3px — Badges, small UI elements, checkboxes4px — Images, small cards, minor components8px — Form inputs, modals, medium containers12px — Section containers, card variants24px — Large cards, course containers50px — Button pill shapes (standard button radius)100px — Extra-large button pills, prominent CTAs50% / 100% — Avatar circles, fully rounded elements| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow | Text, flat backgrounds, navigation bars |
| Raised (1) | 0px 1px 4px rgba(0, 0, 0, 0.04) | Light dividers, subtle elevation, navigation bars |
| Floating (2) | 0px 2px 8px rgba(0, 0, 0, 0.08) | Cards at rest, containers, standard cards |
| Lifted (3) | 0px 4px 12px rgba(0, 0, 0, 0.12) | Hovered cards, modals, elevated containers |
| Hovering (4) | 0px 8px 16px rgba(0, 0, 0, 0.12) | Active cards, dropdown menus, expanded sections |
| Modal (5) | 0px 12px 24px rgba(0, 0, 0, 0.16) | Full-screen modals, floating panels, overlays |
Shadow Philosophy:
The system uses soft, diffused shadows scaled to content importance. Shadows increase in blur and spread as elevation increases, creating a subtle sense of depth without overwhelming the interface. All shadows use black with low opacity (4–16%) to maintain the bright, energetic aesthetic. Shadows are applied sparingly—primarily on cards, modals, and interactive hover states—to preserve the clean, minimal visual language and avoid visual clutter in information-dense learning contexts.
#0057FF) for all primary CTAs and interactive highlights to maintain consistent affordance signaling.12px of padding inside buttons and form fields for adequate touch targets and visual breathing room.50px radius) to all button variants to reinforce friendliness and approachability.768px width.acumin-pro typeface exclusively across all scales to maintain visual cohesion and reduce font loading complexity.3px outline or shadow using primary blue at 10% opacity to ensure keyboard navigation accessibility.32px–72px) between major content sections to reduce cognitive load in learning interfaces.200ms transitions to provide tactile feedback.acumin-pro; maintain typographic consistency across all UI surfaces.rgba(0, 0, 0, 0.16) to preserve the bright, energetic aesthetic and avoid murky depths.50px or square corners; maintain the rounded, friendly visual identity.12px vertically or 16px horizontally to maintain adequate touch target sizes.2 levels of nesting in card components to avoid visual hierarchy confusion.#D00D00) for general emphasis or decorative purposes; reserve it exclusively for error and danger states.12px in body copy to maintain readability in extended reading contexts.200ms–400ms duration on interactive state changes; keep transitions snappy and responsive-feeling.| Breakpoint Name | Width | Primary Changes |
|---|---|---|
| Mobile | ≤ 375px | 4-column grid, single-column layouts, 16px padding, simplified navigation |
| Mobile Large | 376px–599px | 4-column grid, 2-column optional, 16px padding |
| Tablet | 600px–999px | 8-column grid, 2–3 column content, 24px padding, tab navigation |
| Desktop | ≥ 1000px | 12-column grid, multi-column layouts, 32px padding, full navigation |
| Desktop XL | ≥ 1440px | Max-width containers at 1440px, centered layouts, expansive whitespace |
44px × 44px (iOS) / 48px × 48px (Android)32px for inline buttons; 44px for primary CTAs on mobile12px padding to ensure adequate hit area44px on mobile, 32px on desktop8px to prevent accidental tapsNavigation:
Grid & Cards:
24px gaps16px paddingTypography:
Padding & Margins:
32px–80px section spacing24px–52px section spacing16px–32px section spacingImages & Media:
16px padding, increased aspect ratio (e.g., 16:9 → 4:3)#0057FF)#0047CC)#F5F8FF background, #0057FF text)#FFFFFF)#191919)#191919)#191919)#696969)#808080)#E8E8E8)#FFEEAA)#D00D00)#E0EAFF)Start with the primary blue (#0057FF) for all interactive elements, buttons, and links; it is the dominant affordance color.
Apply rounded button corners at 50px border-radius minimum across all button variants to maintain the friendly, approachable aesthetic.
Use acumin-pro font exclusively; enforce font weight limits to 400, 600, 700, and 900 to prevent rendering complexity.
Maintain spacing discipline using the 4px base unit scale; all padding and margins must align to multiples of 4px (8px, 12px, 16px, 20px, 24px, 32px, etc.).
Reserve accent colors (yellow, purple, orange) for featured content or state indicators; do not use for default UI surfaces without explicit purpose.
Apply soft shadows with opacity 4–16% for depth; use 0px 2px 8px rgba(0, 0, 0, 0.08) as the default card shadow.
Ensure touch targets reach minimum 44px × 44px on mobile and 32px × 32px on desktop to prevent accessibility failures.
Use smooth 200ms transitions on all interactive state changes (hover, focus, active) for responsive, polished feel.
Implement responsive collapsing at 768px breakpoint: tablet layouts switch to 2-column, mobile layouts to 1-column with full-width cards.
Validate color contrast ratios at minimum 4.5:1 (WCAG AA) for all text-on-background combinations, especially accent colors on white backgrounds.
Generate modular component variants with clear naming: Primary Button, Secondary Button, Ghost Button, Course Card, Navigation Tab, Form Input, etc.
Document all CSS values with px units explicitly (not rem or em) to ensure consistent rendering across device types and assistive technologies.