IDEAL SHOP Design System

Complete Component Library & Style Guide

v1.0.0 Drupal 11 Tailwind CSS 3.4 7 Languages

About This Theme

IDEAL SHOP is a modern, high-performance Drupal Commerce theme built with cutting-edge technologies and best practices. Designed for e-commerce excellence, it combines beautiful aesthetics with robust functionality.

🚀 Performance First

  • ✓ CDN-ready with local caching
  • ✓ Lazy loading images
  • ✓ Optimized CSS animations
  • ✓ Minimal JavaScript dependencies

🌍 Global Ready

  • ✓ 7 languages supported
  • ✓ RTL support ready
  • ✓ Unicode compliant
  • ✓ Translation-ready templates

♿ Accessible

  • ✓ WCAG 2.1 AA compliant
  • ✓ ARIA labels throughout
  • ✓ Keyboard navigation
  • ✓ Screen reader friendly

📱 Responsive

  • ✓ Mobile-first approach
  • ✓ 3 breakpoints (375/768/1920)
  • ✓ Touch-friendly UI
  • ✓ Adaptive components

Typography

Headings, paragraphs, and text styles for consistent content presentation.

Examples

Heading 1 - 5xl/black

Heading 2 - 4xl/bold

Heading 3 - 3xl/semibold

Heading 4 - 2xl/semibold

Body text (large) - This is a paragraph with bold text and italic text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body text (regular) - Standard paragraph text for most content.

Small text - For captions, meta information, and disclaimers.

CSS Classes

Element Classes Usage
h1 text-5xl font-black Page titles, hero headlines
h2 text-4xl font-bold Section headings
h3 text-3xl font-semibold Subsection headings
p.large text-lg text-gray-600 Lead paragraphs, introductions
p text-base text-gray-600 Body text
small text-sm text-gray-500 Captions, meta info

Color Palette

Brand colors and semantic color system.

Primary

#2563eb

Success

#16a34a

Warning

#ca8a04

Danger

#dc2626

Gray Scale

50

100

200

300

400

500

600

700

800

900

Buttons

Interactive buttons in various styles and sizes.

Button Variants

Primary Buttons

Secondary Buttons

Outline Buttons

Icon Buttons

Usage

<!-- Primary button --> <button class="btn btn-primary">Click me</button> <!-- Secondary button --> <button class="btn btn-secondary">Secondary</button> <!-- Outline button --> <button class="btn btn-outline">Outline</button> <!-- Large button --> <button class="btn btn-primary btn-lg">Large Button</button> <!-- Small button --> <button class="btn btn-primary btn-sm">Small Button</button>
Class Purpose
.btn Base button style (required)
.btn-primary Primary action button (blue)
.btn-secondary Secondary action button (gray)
.btn-outline Outlined button (border only)
.btn-sm Small size modifier
.btn-lg Large size modifier

Form Elements

Input fields, selects, checkboxes and form components.

More Components Available

Cards, Badges, Icons, Animations, and more...

View Full Showcase