Tshireletso Takalo

Generated Jun 25, 2026

DESIGN.md for webdorks.com

webdorks.com

Preview

the generated design system

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

Design System Inspired by Webdorks

1. Visual Theme & Atmosphere

Webdorks' design system embodies a modern, tech-forward aesthetic rooted in professional sophistication and dynamic innovation. The visual identity balances minimalist dark backgrounds with vibrant cyan accents, creating an energetic yet trustworthy atmosphere that appeals to enterprise and SaaS clients across APAC. The system employs generous whitespace, bold typography contrasts, and a restrained color palette that emphasizes clarity and focus. Interactions feel responsive and purposeful, with rounded buttons and smooth transitions that convey approachability without sacrificing credibility. This is a design language built for agencies and digital-first businesses—clean, confident, and decidedly forward-thinking.

Key Characteristics

Dark-first aesthetic with deep navy and pure black backgrounds
Vibrant cyan accent system commanding visual hierarchy
High contrast text for accessibility and readability
Rounded, pill-shaped interactive elements conveying softness and modernity
Generous spacing and breathing room throughout layouts
Montserrat and Poppins typography driving brand personality
Premium feel through restrained color use and deliberate emphasis

2. Color Palette & Roles

Primary

Primary Cyan (#00B1FF): Main call-to-action buttons, key interactive elements, and solution category labels
Primary Cyan Light (#6EC1E4): Secondary accent applications, hover states, and decorative elements used extensively across the site

Accent Colors

Accent Blue (#117FEC): Deep action states and alternative primary emphasis
Accent Navy Dark (#046BD2): Tertiary interactive states and brand reinforcement
Accent Navy (#045CB4): Subtle accent applications and secondary CTAs

Interactive

Link Color (#00B1FF): Hyperlinks and interactive text elements
Interactive Hover (#6EC1E4): Hover state for secondary interactive elements

Neutral Scale

White (#FFFFFF): Primary text on dark backgrounds, card backgrounds, and dominant text color
Gray Light (#C1C1C1): Disabled states, secondary text, and placeholder text
Gray Dark (#222222): Alternative text hierarchy and muted elements
Off-Black (#0C0C0C): Deep background shades
Pure Black (#000000): Maximum contrast text and borders

Surface & Borders

Surface Light (#F9FAFB): Subtle background variations and light surface containers
Surface Very Light (#FBFBFB): Minimal contrast surfaces
Slate Dark (#1E293B): Dark surface alternatives
Slate Medium (#334155): Medium-tone surfaces and borders

Semantic / Status

Error / Danger (#CF2E2E): Error messages, validation failures, and destructive actions
Warning (#FCB900): Warning states and cautionary messages

3. Typography Rules

Font Family

Primary Font: Montserrat (https://fonts.googleapis.com/) Fallback stack: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Secondary Font: Poppins (https://fonts.googleapis.com/) Fallback stack: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display / H1	Montserrat	27.2px	600	38.08px	Normal	Hero headlines and main page titles
Heading / H3	Montserrat	32px	600	35.2px	Normal	Section headings and major content blocks
Subheading / H2	Montserrat	17.6px	500	22.88px	Normal	Secondary section titles and subsections
Body Large	Poppins	16px	600	24px	Normal	Primary content text and emphasis
Body Regular	Poppins	16px	400	19.2px	Normal	Standard paragraph and descriptive text
Button / Label	Poppins	16px	500	16px	Normal	Button text and UI labels
Caption / Small	Poppins	10px	400	26.4px	Normal	Captions, list items, and fine print

Principles

Contrast-Driven: Heavy weight (600) Montserrat for headlines ensures visual dominance and brand recognition
Readability First: Line height exceeds font size by 1.4–2.5x for comfortable reading on both desktop and mobile
Hierarchy Through Weight, Not Size: Secondary hierarchy uses 500-weight Poppins to avoid excessive size variation
Consistent Baseline: All body text uses 16px as the minimum readable size on any device
Decorative Restraint: Display sizes remain moderate (27–32px) to maintain elegance and professionalism

4. Component Stylings

Buttons

Primary Button

background-color: #00B1FF
color: #FFFFFF
font-family: Poppins
font-size: 16px
font-weight: 500
padding: 15px 30px
border-radius: 50px
border: none
box-shadow: none
line-height: 16px
cursor: pointer

Hover State:

background-color: #6EC1E4
color: #FFFFFF
transition: all 0.3s ease

Active State:

background-color: #046BD2
color: #FFFFFF

Disabled State:

background-color: #C1C1C1
color: #FFFFFF
cursor: not-allowed
opacity: 0.6

Secondary Button (Outline)

background-color: transparent
color: #FFFFFF
font-family: Poppins
font-size: 16px
font-weight: 500
padding: 15px 30px
border-radius: 50px
border: 1px solid #FFFFFF
box-shadow: none
line-height: 16px
cursor: pointer

Hover State:

background-color: #FFFFFF
color: #000000
border-color: #FFFFFF
transition: all 0.3s ease

Active State:

background-color: #F9FAFB
color: #000000
border-color: #F9FAFB

Ghost Button

background-color: transparent
color: #00B1FF
font-family: Poppins
font-size: 16px
font-weight: 400
padding: 12px 24px
border-radius: 50px
border: none
box-shadow: none
line-height: 16px
cursor: pointer

Hover State:

color: #6EC1E4
text-decoration: underline
transition: all 0.3s ease

Cards & Containers

Standard Card

background-color: #0C0C0C
color: #FFFFFF
font-family: Poppins
font-size: 16px
font-weight: 400
padding: 32px
border-radius: 16px
border: none
box-shadow: none
line-height: 26.4px

Featured Card (with Accent)

background-color: #070707
color: #FFFFFF
font-family: Poppins
font-size: 16px
font-weight: 400
padding: 32px
border-radius: 16px
border-left: 4px solid #00B1FF
box-shadow: none
line-height: 26.4px

Light Surface Container

background-color: #F9FAFB
color: #000000
font-family: Poppins
font-size: 16px
font-weight: 400
padding: 24px
border-radius: 12px
border: 1px solid #C1C1C1
box-shadow: none
line-height: 26.4px

Inputs & Forms

Text Input

background-color: #1E293B
color: #FFFFFF
font-family: Poppins
font-size: 16px
font-weight: 400
padding: 12px 16px
border-radius: 8px
border: 1px solid #334155
box-shadow: none
line-height: 19.2px

Focus State:

border-color: #00B1FF
box-shadow: 0 0 0 3px rgba(0, 177, 255, 0.1)
outline: none

Error State:

border-color: #CF2E2E
background-color: #1E293B
box-shadow: 0 0 0 3px rgba(207, 46, 46, 0.1)

Placeholder Text:

color: #C1C1C1

Label

font-family: Poppins
font-size: 14px
font-weight: 500
color: #FFFFFF
margin-bottom: 8px
display: block
line-height: 16px

Form Helper Text

font-family: Poppins
font-size: 12px
font-weight: 400
color: #C1C1C1
margin-top: 4px
line-height: 16px

Navigation

Header Navigation

background-color: #000000
color: #FFFFFF
font-family: Poppins
font-size: 16px
font-weight: 500
padding: 16px 0
height: auto

Navigation Link

color: #FFFFFF
font-family: Poppins
font-size: 16px
font-weight: 400
padding: 8px 16px
border-radius: 0px
text-decoration: none

Hover State:

color: #00B1FF
text-decoration: underline

Active State:

color: #00B1FF
border-bottom: 2px solid #00B1FF
padding-bottom: 6px

Mobile Menu Icon

background-color: transparent
color: #C1C1C1
font-size: 32px
font-weight: 400
font-family: Poppins
padding: 0px
border-radius: 0px
border: none
height: 64px
width: 64px
cursor: pointer

Hover State:

color: #FFFFFF

Badges & Labels

Primary Badge

background-color: #00B1FF
color: #FFFFFF
font-family: Poppins
font-size: 12px
font-weight: 600
padding: 6px 12px
border-radius: 50px
border: none
box-shadow: none
line-height: 14px
display: inline-block

Secondary Badge

background-color: #1E293B
color: #00B1FF
font-family: Poppins
font-size: 12px
font-weight: 600
padding: 6px 12px
border-radius: 50px
border: 1px solid #00B1FF
box-shadow: none
line-height: 14px
display: inline-block

5. Layout Principles

Spacing System

Base Unit: 4px

Spacing Scale:

4px: Micro-spacing between inline elements and tight component relationships
8px: Adjacent element gaps and internal component spacing
12px: Comfortable visual breathing between form elements
16px: Standard padding for contained elements and card interiors
20px: Section dividers and moderate content grouping
24px: Content grouping and container margins
32px: Primary card padding and section separation
36px: Large content blocks and alternate section spacing
40px: Full section margins on desktop
48px: Hero section and major layout transitions
52px: Extended section gaps for visual emphasis
56px: Maximum spacing between major page sections

Usage Context:

4–8px: Form field internals, icon spacing, tight component relationships
12–16px: Card content, button padding, contained element spacing
24–32px: Section breaks, container margins, header/footer padding
40–56px: Full page section separation, hero spacing, major layout shifts

Grid & Container

Max Width: 1440px

Column Strategy: 12-column responsive grid

Desktop (1440px): 12 columns with 20px gutters
Tablet (768px): 8 columns with 16px gutters
Mobile (375px): 4 columns with 12px gutters

Section Patterns:

Full-Width Hero: Extends edge-to-edge with 48px top/bottom padding
Content Container: Centered max-width with 40px left/right margin on desktop, 16px on mobile
Sidebar Layout: Primary content (8 cols) + sidebar (4 cols) with 32px gap
Card Grid: 4 columns on desktop, 2 on tablet, 1 on mobile with 24px gaps

Whitespace Philosophy

Whitespace is treated as a design element, not empty space. The system employs asymmetrical spacing to create rhythm and guide attention. Dark backgrounds amplify the impact of whitespace, allowing cyan accents and white text to command focus without visual clutter. Generous vertical spacing between sections prevents cognitive overload and creates natural pause points for reading and scanning.

Border Radius Scale

0px: Buttons in compact contexts, form inputs when minimal softness is required
8px: Form inputs, small container elements, subtle rounded aesthetics
12px: Light surface containers, secondary cards
16px: Standard card radius, medium-weight containers
20px: Large featured containers, expanded card surfaces
50px: Pills and fully rounded buttons, icon buttons with maximum softness

6. Depth & Elevation

Level	Treatment	Use
Flat (L0)	No shadow, background only	Cards on matching backgrounds, navigation
Raised (L1)	`box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12)`	Hoverable cards, interactive elements
Elevated (L2)	`box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24)`	Modals, dropdowns, overlaid content
Floating (L3)	`box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32)`	Floating action buttons, toasts
Maximum (L4)	`box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4)`	Full-screen modals, expanded panels

Shadow Philosophy: Shadows are used sparingly and subtly to maintain the flat, modern aesthetic while creating clear separation between layered elements. The dark background (black/near-black) naturally provides contrast; shadows enhance depth only where interaction or hierarchy demands it. Hover states may elevate elements by one shadow level to provide tactile feedback without overwhelming the visual design.

7. Do's and Don'ts

Do

Use cyan accents strategically to draw attention to primary CTAs and key interactive elements—one accent per section maximum
Maintain high contrast between text and background; white text on dark backgrounds, dark text on light surfaces (minimum 4.5:1 ratio)
Apply 50px border-radius to all buttons to reinforce the soft, modern brand identity
Group content with 24–32px spacing to establish clear visual hierarchies without overcrowding
Leverage Montserrat 600 weight for headlines to command attention and establish brand presence
Stack form fields with 12–16px gaps to create scannable, organized input layouts
Use outline buttons on dark backgrounds for secondary actions, maintaining visual breathing room
Implement smooth 0.3s transitions on interactive states for responsive, polished feel
Reserve error red (#CF2E2E) exclusively for validation failures and critical warnings

Don't

Mix multiple cyan shades carelessly—use #00B1FF for primary CTAs, #6EC1E4 for secondary accents
Underline text except for links—leverage font weight and color contrast instead
Add drop shadows to every element—shadows should feel purposeful, not decorative
Use borders wider than 1px except for accent left/right borders on featured containers (4px maximum)
Apply padding smaller than 12px to interactive elements; maintain minimum touch targets
Mix rounded and sharp corners on related components—consistency builds brand coherence
Display more than two font weights (400, 500, 600) in a single layout section
Exceed 56px spacing between major sections without intentional visual emphasis
Disable interactive elements invisibly—always apply opacity or color changes to signal unavailability
Use light backgrounds without dark text—avoid reading friction

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	320–374px	Single-column layout, 4-column grid, 12px gutters, 16px padding, stacked navigation
Mobile Large	375–599px	Single-column layout, 4-column grid, 12px gutters, 20px padding, optimized touch targets
Tablet	600–1023px	Two-column layout, 8-column grid, 16px gutters, 24px padding, condensed navigation
Desktop	1024–1439px	Multi-column layout, 12-column grid, 20px gutters, 32px padding, full navigation
Desktop Large	1440px+	Max-width 1440px container, centered, full feature set

Touch Targets

Minimum Touch Size: 48px × 48px (buttons, icons, interactive elements on mobile)
Comfortable Touch Size: 56px × 56px (primary actions, navigation)
Spacing Between Targets: Minimum 8px to prevent accidental activation
Text Link Padding: 8px vertical, 12px horizontal for comfortable mobile interaction
Form Input Height: 48px minimum on mobile, 44px on desktop

Collapsing Strategy

Typography Scaling:

H1: 27.2px → 24px (tablet) → 20px (mobile)
H3: 32px → 24px (tablet) → 18px (mobile)
Body: 16px (unchanged across breakpoints)

Spacing Collapse:

Reduce section margins by 1–2 scale steps on tablet (40px → 24px)
Reduce padding by 1 scale step on mobile (32px → 24px, 48px → 32px)
Maintain minimum 12px internal component spacing on mobile

Layout Reflow:

Four-column card grids collapse to 2 columns on tablet, 1 on mobile
Sidebar layouts stack vertically when viewport width < 768px
Navigation converts to hamburger menu below 768px
Hero sections reduce vertical padding from 56px to 40px on tablet, 32px on mobile

Image & Media:

Scale images to 100% container width with max-width constraints
Maintain aspect ratio using aspect-ratio CSS property
Reduce video sizes on mobile; use lazy loading for below-fold content

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary Cyan (#00B1FF)
Secondary Accent: Primary Cyan Light (#6EC1E4)
Link Color: Primary Cyan (#00B1FF)
Primary Text: White (#FFFFFF)
Secondary Text: Gray Light (#C1C1C1)
Background (Dark): Off-Black (#0C0C0C)
Background (Light): Surface Light (#F9FAFB)
Heading Text: White (#FFFFFF)
Button Text: White (#FFFFFF) on colored backgrounds
Error: Error Red (#CF2E2E)
Warning: Warning Yellow (#FCB900)
Border / Divider: Gray Light (#C1C1C1)
Disabled State: Gray Light (#C1C1C1)

Iteration Guide

All buttons use Poppins 16px weight-500, padding 15px 30px, border-radius: 50px, and smooth 0.3s transitions on hover
Primary buttons have background-color: #00B1FF, hover to #6EC1E4; secondary outline buttons start transparent with border: 1px solid #FFFFFF
All typography follows the hierarchy table precisely—H1 is Montserrat 27.2px weight-600, body is Poppins 16px weight-400, never deviate
Card padding is always 32px minimum; featured cards add border-left: 4px solid #00B1FF
Spacing between sections uses the scale (4, 8, 12, 16, 20, 24, 32, 36, 40, 48, 52, 56px)—never invent intermediate values
Form inputs are background-color: #1E293B, border: 1px solid #334155, border-radius: 8px, with focus state box-shadow: 0 0 0 3px rgba(0, 177, 255, 0.1)
Navigation links are color: #FFFFFF, hover to #00B1FF with underline; active state adds border-bottom: 2px solid #00B1FF
Shadows use black with 12%, 24%, 32%, or 40% opacity—never pure black shadows
Mobile breakpoint at 375px collapses grids from 4 to 1 column, reduces padding by 1 scale step, and converts header nav to hamburger
Error/Warning states use #CF2E2E and #FCB900 exclusively; always pair with icon and helper text for clarity

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