Mahmudul Hasan Manik

Generated Jul 3, 2026

DESIGN.md for visitors.now

visitors.now

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design System Inspired by Visitors

1. Visual Theme & Atmosphere

Visitors embodies a modern, data-driven aesthetic that balances technical sophistication with approachability. The design system leverages a vibrant purple-to-blue gradient backdrop complemented by a clean, minimalist interface. The visual language emphasizes clarity and precision, with generous whitespace allowing data visualizations and analytics dashboards to breathe. The atmosphere is professional yet innovative, conveying trust and performance while maintaining an energetic, forward-thinking personality. Rounded button corners and smooth transitions reinforce accessibility and user-friendliness, making complex analytics feel intuitive and inviting.

Key Characteristics

Vibrant purple and blue gradient backgrounds with clean white surfaces
Rounded, pill-shaped interactive elements for a modern, approachable feel
High contrast between dark text and light backgrounds for readability
Generous whitespace and clear visual hierarchy
Colorful accent indicators (green success, orange warning, red error) for data insights
Smooth, minimal shadows for subtle depth without visual clutter

2. Color Palette & Roles

Primary

Deep Navy (#181925): Primary text, headings, and primary UI elements; dominant brand color used throughout interface
Dark Charcoal (#14141F): Deepest neutral for high-contrast text and critical UI states

Accent Colors

Vibrant Blue (#2C78FC): Primary action color, interactive states, and data visualization highlights
Purple Gradient Primary (#9580FF): Call-to-action buttons, primary interactive elements, registration flows
Purple Gradient Secondary (#918DF6): Secondary accent states and hover variations
Magenta (#D6409F): Brand accent for highlighting premium features and special announcements
Cyan (#00C4FF): Data visualization accents and alternative highlight states
Orange (#F76808): Tertiary accent for emphasis and special feature indicators

Interactive

Link Blue (#2C78FC): Standard hyperlinks and interactive text
Button Purple (#9580FF): Primary button backgrounds and CTA interactions

Neutral Scale

Medium Gray (#666666): Body text, descriptions, and secondary content
Light Gray (#999999): Tertiary text and disabled states
Lighter Gray (#BBBCC3): Borders, dividers, and form placeholders
Pale Gray (#B3B3B3): Subtle backgrounds and inactive elements
Off-White (#FAFAFA): Subtle background tint for alternating sections
Light Divider (#EAEAEB): Minimal borders and section separations
Pure White (#FFFFFF): Primary surfaces, cards, and modals

Surface & Borders

White Surface (#FFFFFF): Card backgrounds, modal containers, and main content areas
Neutral Border (#BBBCC3): Input borders and subtle dividing lines
Shadow Color (#000000): Used with opacity in elevation systems

Semantic / Status

Success Green (#33C758): Positive indicators, successful transactions, and performance increases
Danger Red (#FF2F00): Error states, critical warnings, and destructive actions
Warning Orange (#FFA600): Caution indicators and attention-requiring information
Warning Yellow (#F5D90A): Alternative warning states and alert highlights

3. Typography Rules

Font Family

Primary: OpenRunde, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif

Secondary: OpenRunde (all roles use single font family)

Fallback: system-ui, sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display / H1	OpenRunde	60px	600	68px	0px	Hero headlines and page titles
Heading / H2	OpenRunde	36px	500	44px	0px	Section headings and major divisions
Heading / H3	OpenRunde	18px	500	24px	0px	Subsection headings and card titles
Heading / H6	OpenRunde	14px	500	20px	0px	Small headings and labels
Body / Large	OpenRunde	16px	400	24px	0px	Primary body text and descriptions
Body / Base	OpenRunde	14px	400	20px	0px	Standard paragraph text
Button / Primary	OpenRunde	14px	500	20px	0px	CTA and primary button text
Link	OpenRunde	16px	400	24px	0px	Standalone hyperlinks
Link / Small	OpenRunde	14px	500	20px	0px	Inline and navigation links
Caption	OpenRunde	12px	400	18px	0px	Helper text and footnotes
Code	OpenRunde	13px	500	20px	0px	Monospace-style inline code (same font)

Principles

All typography uses the OpenRunde font family consistently
Line height scales with font size to maintain visual rhythm and readability
Weight progression (400 → 500 → 600) creates clear hierarchy without multiple font families
Letter spacing remains tight at 0px for modern, contemporary feel
Headings use generous line heights relative to size for breathing room
Body text maintains minimum 20px line height for accessibility across all sizes

4. Component Stylings

Buttons

Primary Button

Background: #9580FF
Text Color: #FFFFFF
Font Size: 14px
Font Weight: 500
Padding: 0px 10px
Height: 32px
Border Radius: 9999px
Border: 0px solid #FFFFFF
Box Shadow: rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px
Line Height: 20px
Hover State: background-color: #918DF6
Active State: background-color: #8B7FE8
Disabled State: background-color: #D6D5E8; color: #BBBCC3

Secondary Button (Ghost)

Background: transparent
Text Color: #BBBCC3
Font Size: 14px
Font Weight: 500
Padding: 4px 8px
Height: 28px
Border Radius: 0px
Border: 0px solid #BBBCC3
Box Shadow: none
Line Height: 20px
Hover State: color: #666666
Active State: color: #181925

Icon Button

Background: transparent
Text Color: #BBBCC3
Font Size: 16px
Font Weight: 400
Padding: 0px
Height: 32px
Width: 32px
Border Radius: 0px
Border: 0px solid #BBBCC3
Box Shadow: none
Line Height: 24px
Hover State: color: #666666
Active State: color: #181925

Large CTA Button

Background: #918DF6
Text Color: #FFFFFF
Font Size: 16px
Font Weight: 500
Padding: 0px 20px
Height: 44px
Border Radius: 9999px
Border: 0px solid #FFFFFF
Box Shadow: none
Line Height: 24px
Hover State: background-color: #8B7FE8
Active State: background-color: #8070E0

Cards & Containers

Standard Card

Background: #FFFFFF
Border: 1px solid #EAEAEB
Border Radius: 8px
Padding: 24px
Box Shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px
Margin Bottom: 20px

Dashboard Card

Background: #FFFFFF
Border: 1px solid #EAEAEB
Border Radius: 8px
Padding: 20px
Box Shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px 0px

Modal Overlay

Background: rgba(0, 0, 0, 0.5)
Backdrop Filter: blur(4px)

Modal Container

Background: #FFFFFF
Border Radius: 12px
Padding: 32px
Box Shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px

Inputs & Forms

Text Input

Background: #FAFAFA
Border: 1px solid #BBBCC3
Border Radius: 6px
Padding: 12px 16px
Font Size: 14px
Font Weight: 400
Text Color: #181925
Placeholder Color: #999999
Line Height: 20px
Height: 40px
Focus State: border-color: #2C78FC; box-shadow: 0 0 0 3px rgba(44, 120, 252, 0.1)
Disabled State: background-color: #EAEAEB; color: #999999; border-color: #D6D6D6
Error State: border-color: #FF2F00

Form Label

Font Size: 14px
Font Weight: 500
Color: #181925
Margin Bottom: 8px
Line Height: 20px

Help Text

Font Size: 12px
Font Weight: 400
Color: #999999
Margin Top: 4px
Line Height: 18px

Error Message

Font Size: 12px
Font Weight: 400
Color: #FF2F00
Margin Top: 4px

Navigation

Top Navigation Bar

Background: #181925
Height: 56px
Padding: 12px 32px
Border Radius: 12px
Display: flex
Align Items: center
Gap: 24px
Box Shadow: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px

Navigation Link

Font Size: 14px
Font Weight: 400
Color: #666666
Padding: 8px 0px
Text Decoration: none
Hover State: color: #181925
Active State: color: #2C78FC; font-weight: 500

Navigation Register Button

Background: #9580FF
Text Color: #FFFFFF
Font Size: 14px
Font Weight: 500
Padding: 8px 20px
Height: 32px
Border Radius: 9999px
Cursor: pointer
Hover State: background-color: #918DF6

Badges

New Badge

Background: #2C78FC
Text Color: #FFFFFF
Font Size: 12px
Font Weight: 600
Padding: 4px 8px
Border Radius: 4px
Display: inline-block

Status Badge (Success)

Background: #33C758
Text Color: #FFFFFF
Font Size: 12px
Font Weight: 500
Padding: 4px 8px
Border Radius: 4px

Status Badge (Warning)

Background: #FFA600
Text Color: #FFFFFF
Font Size: 12px
Font Weight: 500
Padding: 4px 8px
Border Radius: 4px

Status Badge (Error)

Background: #FF2F00
Text Color: #FFFFFF
Font Size: 12px
Font Weight: 500
Padding: 4px 8px
Border Radius: 4px

Tabs

Tab Navigation

Border Bottom: 1px solid #EAEAEB
Display: flex
Gap: 0px

Tab Item (Inactive)

Background: transparent
Border Bottom: 2px solid transparent
Color: #999999
Font Size: 14px
Font Weight: 400
Padding: 12px 16px
Cursor: pointer
Line Height: 20px
Hover State: color: #666666

Tab Item (Active)

Background: transparent
Border Bottom: 2px solid #2C78FC
Color: #181925
Font Size: 14px
Font Weight: 500
Padding: 12px 16px
Line Height: 20px

5. Layout Principles

Spacing System

Base Unit: 4px
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 80px, 112px, 160px

Usage Context:

Tight Spacing (4px–8px): Component internal gaps, icon-to-text spacing
Comfortable Spacing (12px–16px): Form field padding, small component spacing
Standard Spacing (20px–24px): Section gaps, card padding, navigation spacing
Generous Spacing (32px–48px): Major section divisions, hero spacing
Extra Large (64px–160px): Full-page padding, hero sections, whitespace hierarchy

Grid & Container

Max Content Width: 1200px
Page Padding: 32px on desktop, 20px on tablet, 16px on mobile
Column Strategy: 12-column responsive grid
- Desktop (1200px+): 12 columns, 20px gutter
- Tablet (768px–1199px): 8 columns, 16px gutter
- Mobile (< 768px): 4 columns, 12px gutter
Section Patterns: Full-width hero, contained content sections, edge-to-edge background divisions

Whitespace Philosophy

The design system embraces generous whitespace to reduce cognitive load and emphasize data visualizations. Whitespace scales proportionally with content importance—hero sections and primary actions receive maximum breathing room, while secondary information clusters more densely. Vertical rhythm is maintained through consistent padding multiples, creating visual flow and scanning hierarchy. Horizontal whitespace around cards and containers prevents visual crowding and encourages focused engagement.

Border Radius Scale

Minimal/Sharp: 0px — Navigation links, tabs, minimal UI elements
Subtle Roundness: 4px — Badges, small indicators
Standard Roundness: 6px — Input fields, small modals
Medium Roundness: 8px — Card containers, dashboard cards, images
Generous Roundness: 12px — Modal dialogs, large containers
Pill Shaped: 9999px — Buttons, badges, fully rounded elements

6. Depth & Elevation

Level	Treatment	Use
Flat (L0)	`box-shadow: none; background: solid color`	Backgrounds, typography, flat UI elements
Subtle (L1)	`rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px`	Buttons, small interactive elements
Moderate (L2)	`rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px`	Navigation bars, floating elements
Emphasized (L3)	`rgba(0, 0, 0, 0.08) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px`	Cards, modals, elevated containers
Deep (L4)	`0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04)`	Full-page modals, dropdowns, maximum depth

Shadow Philosophy: The elevation system uses minimal, subtle shadows to convey depth without visual clutter. Shadows employ low-opacity blacks (0.02–0.08) to maintain the clean, modern aesthetic. Each elevation level is reserved for specific component types, creating a consistent visual hierarchy. Shadows strengthen the separation between layered content while preserving the minimal, data-focused design language.

7. Do's and Don'ts

Do

Use #9580FF and #918DF6 for all primary CTAs and interactive elements to maintain brand consistency
Apply generous padding (24px–32px) to cards and containers to ensure content breathes
Maintain minimum 44px height on touch targets for mobile accessibility
Use #181925 for primary heading and navigation text to maximize contrast
Apply subtle shadows (Level 1–2) to components for depth without overwhelming the minimal aesthetic
Group related form fields with 16px spacing and separate field groups with 24px spacing
Use semantic colors (#33C758 success, #FF2F00 error) consistently across data visualizations
Keep border radius consistent: buttons 9999px, cards/modals 8px–12px, inputs 6px
Limit text color to the neutral scale (#181925, #666666, #999999) for readability
Test all components on dark mode by inverting the palette (white backgrounds → dark surfaces)

Don't

Don't use brand colors as body text; reserve them for accents, buttons, and data highlights
Don't apply multiple shadows; use a single elevation level per component type
Don't add padding less than 12px to interactive elements; maintain comfortable spacing
Don't exceed 2 levels of nesting in navigation; keep information architecture flat
Don't use colors outside the defined palette for status indicators; maintain semantic consistency
Don't set border radius to 0px on buttons; use 9999px for modern, pill-shaped appearance
Don't apply opacity changes to text color; use the neutral scale instead
Don't mix font weights within a single line of body text; maintain clear visual hierarchy
Don't exceed 1200px content width on desktop; preserve readability and focus
Don't apply shadows larger than Level 3 to floating buttons or persistent navigation

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	< 768px	4 columns, `16px` padding, stacked layout, 32px font scaling
Tablet	768px–1199px	8 columns, `20px` padding, 2-column grids where applicable
Desktop	1200px+	12 columns, `32px` padding, full multi-column layouts
Wide	1600px+	Max content `1200px`, centered with flanking space

Touch Targets

Minimum Height/Width: 44px for all interactive elements (buttons, links, form fields)
Button Spacing: Minimum 8px gap between adjacent buttons to prevent accidental taps
Form Inputs: 40px height standard, 44px on mobile for comfortable interaction
Icon Areas: 32px minimum for icon-only buttons
Navigation Items: 48px tap area with 12px internal padding

Collapsing Strategy

Navigation: Hamburger menu on tablets (768px–1023px), full horizontal nav on desktop (1024px+)
Grids: Single column on mobile, 2 columns on tablet, 3+ columns on desktop
Cards: Full width on mobile (padding: 16px), calc(50% - 8px) on tablet, calc(33.333% - 16px) on desktop
Modals: Full screen with 16px margin on mobile, centered box on tablet+
Typography: H1 48px (mobile) → 60px (desktop), H2 28px (mobile) → 36px (desktop)
Padding Scales: 16px (mobile) → 24px (tablet) → 32px (desktop)
Hero Section: Vertical layout on mobile, horizontal on tablet+

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Button Purple (#9580FF)
Secondary CTA: Vibrant Blue (#2C78FC)
Primary Text: Deep Navy (#181925)
Secondary Text: Medium Gray (#666666)
Tertiary Text: Light Gray (#999999)
Background Surface: Pure White (#FFFFFF)
Border: Lighter Gray (#BBBCC3)
Success Indicator: Success Green (#33C758)
Error Indicator: Danger Red (#FF2F00)
Warning Indicator: Warning Orange (#FFA600)
Page Background: Gradient (Purple #9580FF → Blue #2C78FC)

Iteration Guide

Color Consistency Rule: All interactive CTAs default to #9580FF (Button Purple); use #2C78FC only for secondary links and data highlights. Never use brand colors for body text.
Typography Base: OpenRunde font family exclusively; hierarchy via weight (400 regular, 500 medium, 600 bold) and size (12px–60px scale). All line heights are 1.33x to 1.5x the font size.
Spacing Multiplier: All padding, margin, and gaps use the 4px base unit scale: 4, 8, 12, 16, 20, 24, 32, 48, 64, 80, 112, 160px. No arbitrary spacing values.
Button Standard: Pill-shaped (border-radius: 9999px), minimum 32px height, 0px 10px–20px padding. Primary #9580FF, secondary transparent with #BBBCC3 text. Include subtle shadow Level 1 on primary only.
Elevation Hierarchy: Cards and containers use Level 3 shadow (0px 1px 3px rgba(0, 0, 0, 0.08) + 0px 0px 0px 1px rgba(0, 0, 0, 0.02)). Buttons use Level 1 only. Navigation uses Level 2. No shadows exceed Level 3 for ambient UI.
Responsive Breakpoints: Mobile-first: single column layouts stack until 768px (tablet: 8 columns), then 1200px (desktop: 12 columns). Padding scales 16px → 24px → 32px across breakpoints. Hero elements shrink typography by 20% on mobile.
Form Accessibility: All inputs 40px–44px height, 12px 16px padding, 1px solid #BBBCC3 border, #FAFAFA background. Focus state: border-color: #2C78FC; box-shadow: 0 0 0 3px rgba(44, 120, 252, 0.1). Error: border-color: #FF2F00.
Semantic Status: Green (#33C758) = success/positive, Red (#FF2F00) = error/critical, Orange (#FFA600) = warning, Yellow (#F5D90A) = secondary warning. Always pair with descriptive text; never color-only indicators.
Whitespace Principle: Cards and containers receive 24px–32px internal padding. Section gaps are 32px–48px. Hero sections get maximum breathing room with 64px–80px vertical padding. Never compress spacing below 16px on primary content.
Navigation Pattern: Top bar #181925 background, 56px height, 12px 32px padding, 24px item gaps. Links 14px weight-400, hover-to-500 weight on active state. Register button embedded as #9580FF pill. Hamburger menu on mobile; collapse at 768px breakpoint.

Want a DESIGN.md like this for your own website?