Dimikooklis.com Website Style Guide

1. Typography

  • Primary Fonts:
    • Lexend Deca (Headings, Buttons)
    • Montserrat (Body, FAQs, Product Notes)
  • Text Styles:
    • Headings: Bold, gradient text with soft shadows
    • Body Text: Clean, sans-serif, medium weight
    • Stat Labels: Uppercase, small caps, faded gray (#999)

2. Color Palette

  • Primary Colors:
    • Bright Blue: #2575fc
    • Electric Purple: #8800cb
    • Neon Orange: #ec4d04
  • Accent Colors:
    • Green (success): #00c982
    • Gold (highlight): #f5c400
    • Red (alerts): #ff5252
  • Background Shades:
    • Charcoal: #1b1b1b
    • Deep Gray: #262626
    • Black Base: #181818
  • Gradients:
    • Diagonal or horizontal blends of blue and purple for headers, CTAs, and separators

3. Component Styling

Headers & Section Titles

  • Large (2.5rem – 3.5rem), gradient text
  • Center aligned with glow and separator line below

Buttons (CTA)

  • Gradient background: linear-gradient(90deg, #6a11cb, #2575fc)
  • Bold white text, pill shape, hover glow
  • Secondary button: transparent background, white text, underlined

Cards

  • Background: rgba(27, 27, 27, 0.7) to #262626
  • Rounded corners: 12px to 16px
  • Border: 1px solid rgba(136, 0, 203, 0.5) or #3a3a3a
  • Shadow: Deep black with hover lift effect

Stats & Metrics

  • Large bold numbers (2rem+)
  • Labels in small caps, faded gray
  • Growth indicators in green with subtle animations
  • Metric bars with animated fill

Pricing Cards

  • Equal width grid layout with a min-height
  • Title ribbons with soft gradients & blur
  • Feature lists with checkmarks

FAQ Section

  • Large question font (1.8rem), bold
  • Plus icon rotates on toggle
  • Gradient underline
  • Answer font: 1.4rem, light gray

Chat Bubbles

  • Rounded, shadowed containers
  • Customer: dark gray bubble
  • AI: blue bubble with glowing shadow
  • Fade-in animation sequence

4. Layout & Responsiveness

  • Flex & grid layout throughout
  • Mobile adjustments:
    • Column stacking for cards and layouts
    • Font-size reduction for headers & buttons
    • Scrollbar hidden on all widgets

5. Animations & Interactivity

  • Scroll fade-ins for sections and cards
  • Counter animation on numbers
  • Bar-fill growth on metrics
  • Icon hover (chat, features, pyramid boxes)
  • Chat bubbles appear in sequence

6. Icons & Visual Elements

  • Icons sized to max 40px (desktop), 28px (mobile)
  • Logos in grid or row layout with spacing and responsive scaling
  • Illustrative icons in “How It Works” use hover movement (translate)

This guide reflects the visual system, hierarchy, responsiveness, and user interaction patterns established across dimikooklis.com for consistent branding and web experience.