Design Guidelines

Follow these guidelines to ensure your HTML pages look professional and work correctly on Visimade.

Color Palette

Choose colors based on the topic. Light backgrounds work best for most content.

Topic	Background	Text	Accent
Business/Finance	`#faf9f7` (off-white)	`#2d2d30` (dark gray)	`#0891b2` (teal)
Health/Wellness	`#f5f5f0` (stone)	`#2d2d30`	`#84a98c` (sage)
Education	`#fefcf8` (parchment)	`#1e3a8a` (navy)	`#f59e0b` (gold)
Technology (dark)	`#1a1d29` (ink blue)	`#ffffff` (white)	`#22d3ee` (cyan)

Critical: Always pair background colors with appropriate text colors. Light backgrounds need dark text; dark backgrounds need light text. Never use medium grays on any background.

Typography

/* System fonts for best performance */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* Headings: 36-56px, bold */
h1 { font-size: 48px; font-weight: 700; }

/* Body: 18px, comfortable line-height */
body { font-size: 18px; line-height: 1.6; }

Layout

Use full-width sections with centered content containers. Avoid card-grid layouts for informational content.

/* Full-width sections with centered content */
section {
  width: 100%;
  padding: 60px 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Subtle shadows */
box-shadow: 0 4px 20px rgba(0,0,0,0.08);

/* Smooth transitions */
transition: all 0.3s ease;

CDN Libraries

Use these CDN links for common libraries. Always load scripts in the <head> before using them.

Library	CDN URL
ECharts (charts)	`https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js`
Chart.js	`https://cdn.jsdelivr.net/npm/chart.js`
Lucide Icons	`https://unpkg.com/lucide@latest`
React 18	`https://unpkg.com/react@18/umd/react.production.min.js`
React DOM 18	`https://unpkg.com/react-dom@18/umd/react-dom.production.min.js`
Babel (for JSX)	`https://unpkg.com/@babel/standalone/babel.min.js`
Leaflet (maps)	`https://unpkg.com/leaflet/dist/leaflet.js`

Required Meta Tags

Every page must include these meta tags for proper SEO and social sharing.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Descriptive Page Title - Key Topic</title>
  <meta name="description" content="150-160 character summary of the page content.">
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Description for social sharing">
  <meta property="og:type" content="website">
</head>
<body data-page-id="{{PAGE_ID}}">
  <!-- Your content here -->
</body>
</html>

PAGE_ID: Include data-page-id="{{PAGE_ID}}" in the body tag. This is required for SoloData, TeamData, and SocialData APIs. The placeholder is replaced with the actual page ID automatically.

On this page

Color Palette
Typography
Layout
CDN Libraries
Required Meta Tags