MIK Media Group

Generated May 15, 2026

DESIGN.md for keenthemes.com

keenthemes.com/metronic/tailwind/demo2

Preview

the generated design system

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

Design System Inspired by Metronic

1. Visual Theme & Atmosphere

The Metronic design system embodies a clean, professional, and modern aesthetic specifically tailored for enterprise account management dashboards and software platforms. It prioritizes clarity and accessibility through a minimalist color palette, breathing whitespace, and crisp typography. The design language favors simplicity and functionality over ornamentation, creating an environment where data visualization and user interactions take center stage. Subtle shadows and refined spacing create a gentle sense of elevation without visual clutter. This system is designed for teams managing accounts, integrations, billing, and security—contexts requiring trust, precision, and ease of navigation.

Key Characteristics

Light, airy interface with abundant whitespace
Minimal color palette focused on grayscale neutrals with a single accent blue
Clean geometric forms with soft border radii
Subtle, restrained shadows that ground components without distraction
Professional typography hierarchy supporting scannable content
Emphasis on usability and data legibility
Tailwind CSS foundation enabling rapid, consistent implementation

2. Color Palette & Roles

Primary

Primary Action Blue (#008FFB): Primary call-to-action buttons, active links, chart lines, and interactive state indicators. Used sparingly to draw attention to key user actions.

Accent Colors

Accent Blue (#008FFB): Secondary interactive elements, hover states, and data visualization highlights.

Interactive

Link Text (#141414): Hyperlinks and navigation text. Slightly darker neutral for clear contrast and readability.
Button Text (#141414): Text on neutral buttons and secondary actions.

Neutral Scale

Dark Text (#000000): Primary heading and body text color for maximum contrast and legibility.
Medium Text (#363636): Secondary text, descriptions, and supplementary content.
Light Text (#545454): Tertiary text, metadata, timestamps, and de-emphasized information.

Surface & Borders

Surface White (#FFFFFF): Primary background for all cards, containers, modals, and main content areas.
Border Light (#F0F0F0): Subtle borders separating card sections and defining container edges. Creates gentle visual hierarchy without harshness.
Border Medium (#E8E8E8): Slightly stronger borders for input fields and interactive containers requiring clearer definition.

3. Typography Rules

Font Family

Primary: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Fallback Stack: system-ui, sans-serif
Import: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display / H1	ui-sans-serif	18px	500	28px	0px	Large headings, page titles
Heading / H2	ui-sans-serif	20px	600	28px	0px	Section headers, dashboard headers
Subheading / H3	ui-sans-serif	16px	400	24px	0px	Card titles, subsection headers
Body / Paragraph	ui-sans-serif	14px	400	22px	0px	Primary content, descriptions
Emphasis / Strong	ui-sans-serif	14px	500	20px	0px	Highlighted body text, labels, strong emphasis
Button	ui-sans-serif	16px	500	24px	0px	Large action buttons
Button Small	ui-sans-serif	14px	500	20px	0px	Secondary and compact buttons
Label / Caption	ui-sans-serif	13px	500	18.5714px	0px	Form labels, field labels, captions
Caption / Meta	ui-sans-serif	12px	400	18px	0px	Timestamps, secondary metadata

Principles

Clear hierarchy: Weight and size work together to create distinct visual levels, enabling users to quickly scan and navigate content.
Optimal readability: Line heights exceed font size by 1.4–1.6× for comfortable reading on screens.
Consistent scale: All sizes and weights use the Inter font family for cohesion across web, ensuring no fallback font substitutions distort layout.
Professional tone: Mid-weight neutrals (400 and 500) dominate; heavy weights (600+) used sparingly for critical emphasis only.
Mobile-first: Sizes scale appropriately on smaller screens without loss of legibility.

4. Component Stylings

Buttons

Primary Button

Background: #008FFB
Text Color: #FFFFFF
Font Size: 16px
Font Weight: 500
Padding: 8px 16px
Border Radius: 6px
Border: 0px solid transparent
Box Shadow: 0px 1px 2px rgba(0, 0, 0, 0.05)
Height: 40px
Line Height: 24px
Hover State: Background #0078D4, shadow 0px 2px 4px rgba(0, 0, 0, 0.08)
Active State: Background #0056A3, shadow inset 0px 1px 2px rgba(0, 0, 0, 0.1)
Disabled State: Background #E8E8E8, text color #B3B3B3, cursor not-allowed

Secondary Button

Background: #F0F0F0
Text Color: #141414
Font Size: 14px
Font Weight: 500
Padding: 8px 10px
Border Radius: 6px
Border: 1px solid #E8E8E8
Box Shadow: none
Height: auto
Line Height: 20px
Hover State: Background #E8E8E8, border 1px solid #D0D0D0
Active State: Background #D0D0D0
Disabled State: Background #F9F9F9, text color #999999, border 1px solid #F0F0F0

Ghost Button

Background: transparent
Text Color: #141414
Font Size: 14px
Font Weight: 500
Padding: 4px 10px
Border Radius: 6px
Border: 0px solid transparent
Box Shadow: none
Height: auto
Line Height: 20px
Hover State: Background #F9F9F9, border 1px solid #E8E8E8
Active State: Background #F0F0F0

Icon Button

Background: transparent
Text Color: #363636
Font Size: 13px
Font Weight: 500
Padding: 0px
Border Radius: 9999px (fully rounded)
Border: 0px solid transparent
Box Shadow: none
Height: 36px
Width: 36px
Display: flex, align-items: center, justify-content: center
Hover State: Background #F9F9F9
Active State: Background #E8E8E8

Cards & Containers

Standard Card

Background: #FFFFFF
Text Color: #141414
Font Size: 16px
Font Weight: 400
Padding: 24px 30px
Border Radius: 12px
Border: 1px solid #F0F0F0
Box Shadow: 0px 1px 2px rgba(0, 0, 0, 0.05)
Line Height: 24px
Hover State: Border 1px solid #E8E8E8, shadow 0px 2px 4px rgba(0, 0, 0, 0.08)

Card with Icon Header

Background: #FFFFFF
Padding: 24px 30px
Border Radius: 12px
Border: 1px solid #F0F0F0
Box Shadow: 0px 1px 2px rgba(0, 0, 0, 0.05)
Icon Area Padding: 0px 0px 16px 0px
Icon Color: #363636
Icon Size: 32px

Highlighted/Accent Card

Background: #FFFFFF
Padding: 24px 30px
Border Radius: 12px
Border: 2px solid #008FFB
Box Shadow: 0px 2px 4px rgba(0, 144, 251, 0.08)

Inputs & Forms

Text Input

Background: #FFFFFF
Text Color: #141414
Font Size: 13px
Font Weight: 400
Padding: 8px 12px
Border Radius: 6px
Border: 1px solid #E8E8E8
Box Shadow: 0px 1px 2px rgba(0, 0, 0, 0.05)
Height: 36px
Line Height: 18.5714px
Placeholder Text Color: #999999
Focus State: Border 1px solid #008FFB, box-shadow 0px 0px 0px 3px rgba(0, 144, 251, 0.1)
Disabled State: Background #F9F9F9, text color #B3B3B3, border 1px solid #F0F0F0, cursor not-allowed
Error State: Border 1px solid #FF3333, box-shadow 0px 0px 0px 3px rgba(255, 51, 51, 0.1)

Input with Icon (Left)

Padding Left: 36px
Icon Position: absolute, left 12px
Icon Color: #999999
Icon Size: 16px

Input Group (Text + Button)

Flex Layout: display: flex, gap: 0px
Input Border Radius: 6px 0px 0px 6px
Button Border Radius: 0px 6px 6px 0px
Combined Height: 36px

Checkbox

Size: 16px × 16px
Border Radius: 4px
Border: 1px solid #E8E8E8
Background (Checked): #008FFB
Checkmark Color: #FFFFFF
Focus State: box-shadow: 0px 0px 0px 3px rgba(0, 144, 251, 0.1)

Form Label

Font Size: 13px
Font Weight: 500
Color: #363636
Margin Bottom: 6px
Line Height: 18.5714px

Navigation

Top Navigation / Header

Background: #FFFFFF
Border Bottom: 1px solid #F0F0F0
Height: 64px
Padding: 0px 20px
Display: flex, align-items: center, justify-content: space-between

Navigation Item (Active)

Text Color: #008FFB
Font Size: 14px
Font Weight: 500
Border Bottom: 2px solid #008FFB
Padding Bottom: 4px

Navigation Item (Inactive)

Text Color: #363636
Font Size: 14px
Font Weight: 400
Hover State: Text color #141414

Breadcrumb

Font Size: 14px
Color: #999999
Separator: /
Last Item Color: #141414, Font Weight 500
Gap Between Items: 8px

Modals & Overlays

Modal Container

Background: #FFFFFF
Border Radius: 12px
Padding: 32px
Box Shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1)
Max Width: 480px
Overlay Background: rgba(0, 0, 0, 0.5)

Modal Header

Padding Bottom: 16px
Border Bottom: 1px solid #F0F0F0
Margin Bottom: 16px

Modal Title

Font Size: 20px
Font Weight: 600
Color: #141414

Badges & Tags

Badge (Default)

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

Badge (Success)

Background: #E8F5E9
Text Color: #2E7D32
Border: 1px solid #4CAF50

Badge (Alert)

Background: #FFF3E0
Text Color: #E65100
Border: 1px solid #FF9800

Badge (Error)

Background: #FFEBEE
Text Color: #C62828
Border: 1px solid #F44336

5. Layout Principles

Spacing System

Base Unit: 4px

Spacing Scale:

4px (1×): Minimal gaps, inline spacing
8px (2×): Tight spacing, form field gaps
12px (3×): Component internal spacing
16px (4×): Standard section spacing, moderate gaps
20px (5×): Larger gaps, content section separation
24px (6×): Card padding, major vertical spacing
32px (8×): Large section padding, significant breaks
40px (10×): Page-level margins
80px (20×): Hero spacing, major vertical separation

Usage Context:

4px–8px: Icon-to-label spacing, button internal padding, inline element gaps
12px–16px: Form field spacing, card section dividers, navigation item gaps
20px–24px: Card padding, section margins, container internal spacing
32px–40px: Page padding, major content section separation
80px: Hero sections, major layout breaks, top-of-page margin

Grid & Container

Max Width: 1440px for desktop; 1024px for tablet; full width minus 16px padding on mobile
Column Strategy: 12-column grid at desktop, 6-column at tablet, 4-column at mobile
Gutter: 20px between columns
Content Padding: 20px on mobile, 40px on tablet and above
Section Patterns: Dashboard uses 2–4 card columns on desktop, stacked single column on mobile

Whitespace Philosophy

Metronic embraces generous whitespace to reduce cognitive load and improve content focus. Each content section is surrounded by breathing room (24px–40px margins) to create visual separation and guide the eye. Cards are isolated by whitespace rather than enclosed by frames, creating a modern, airy aesthetic. This approach improves readability, reduces visual tension, and signals that the interface is uncluttered and approachable.

Border Radius Scale

3px: Minimal rounding for very small elements (micro-interactions, subtle borders)
4px: Checkboxes, small form inputs, compact badges
6px: Standard inputs, buttons, small containers
12px: Cards, modals, larger containers
9999px: Fully rounded pills (icon buttons, badges)

6. Depth & Elevation

Level	Treatment	Use
0 (Flat)	`box-shadow: none`	Buttons (ghost), inputs (borderless), flat backgrounds
1 (Subtle)	`0px 1px 2px rgba(0, 0, 0, 0.05)`	Cards, input fields, small lifted components
2 (Raised)	`0px 2px 4px rgba(0, 0, 0, 0.08)`	Hovering cards, elevated buttons, floating action elements
3 (Floating)	`0px 4px 6px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1)`	Modals, dropdowns, tooltips, overlapping surfaces
4 (Prominent)	`0px 8px 16px rgba(0, 0, 0, 0.12)`	Full-page overlays, high-priority modals

Shadow Philosophy: Metronic uses minimal, restrained shadows to suggest depth without creating visual harshness. Shadows are soft, low-opacity, and short-range (1px–8px blur radius), reinforcing the light, airy aesthetic. Shadows appear only when elevation adds functional value—distinguishing interactive states, layered content, or modal context. Flat components (buttons, links) use no shadow unless hovered or active, keeping the interface visually clean.

7. Do's and Don'ts

Do

Use the primary blue (#008FFB) sparingly for critical actions, link states, and active navigation—reserve it as visual highlight to guide user attention.
Maintain generous whitespace around content. Leave at least 24px margin between cards and sections to preserve the airy aesthetic.
Use weight contrast in typography to create hierarchy: pair 400 weight body text with 500–600 weight headings to improve scannability.
Stack inputs vertically with labels above, maintaining 8px gap between label and field for optimal mobile and desktop usability.
Apply soft shadows only to components requiring depth clarity: cards on first load, modals, dropdowns. Never shadow flat buttons or links unless interacted.
Pair card backgrounds with subtle borders (1px solid #F0F0F0) rather than relying solely on shadow for definition in light-background interfaces.
Ensure touch targets are minimum 36px × 36px on mobile; icon buttons should never be smaller than this.
Use light neutral text (#999999) for secondary information (metadata, timestamps, helper text) to reduce visual noise.

Don't

Do not use multiple colors beyond the primary blue and neutrals—resist adding secondary accent colors that muddy the visual hierarchy.
Do not apply heavy shadows (0px 20px 40px rgba(0, 0, 0, 0.2)) to cards; they conflict with the light, minimal aesthetic.
Do not center large blocks of text beyond headings and calls-to-action; left-aligned body text is more readable and scannable.
Do not use font sizes smaller than 12px for readable content; caption and meta text are the minimum threshold.
Do not apply rounding greater than 12px to standard components (inputs, cards, buttons); overly rounded corners feel childish and reduce design professionalism.
Do not mix font families. Stick exclusively to ui-sans-serif / Inter; no serif, script, or system-fallback fonts should appear in production.
Do not use all-caps text for body content; reserved for small labels and section headers only for improved readability.
Do not add complex gradients or textures. Metronic is flat; all backgrounds should be solid colors or very subtle, near-white overlays.
Do not disable buttons visually without also disabling interaction (cursor: not-allowed, opacity reduction, gray text color).

8. Responsive Behavior

Breakpoints

Breakpoint	Width	Key Changes
Mobile	`320px–639px`	Single-column layout, full-width cards, `16px` padding, large touch targets (`48px`), stacked navigation
Tablet	`640px–1023px`	2-column grid, `20px` padding, medium cards, collapsible sidebar navigation
Desktop	`1024px–1439px`	3–4-column grid, `40px` padding, full sidebar, horizontal navigation
Large Desktop	`1440px+`	Max-width container (`1440px`), centered layout, full-featured dashboard

Touch Targets

Minimum size: 44px × 44px for critical interactive elements (primary buttons, navigation items)
Recommended size: 48px × 48px for mobile buttons and icon buttons
Minimum spacing: 8px between adjacent touch targets
Safe area: Avoid placing interactive elements within 16px of screen edges on mobile

Collapsing Strategy

Cards: Stack vertically into single column at tablet; stack at 2 columns on small desktop
Navigation: Collapse top navigation into hamburger menu at mobile; restore horizontal menu at tablet
Sidebar: Hide sidebar at mobile (show via hamburger); show collapsed state at tablet; expand at desktop
Forms: 2-column form fields collapse to 1 column at mobile; maintain 2-column layout at desktop
Dashboard grid: 1 column mobile → 2 columns tablet → 3–4 columns desktop
Modal/Overlay: Full-width with 16px margin on mobile; centered container with 480px max-width on desktop
Typography: Reduce heading sizes by 2–4px on mobile; maintain full sizes on tablet+

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary Action Blue (#008FFB)
Background: Surface White (#FFFFFF)
Heading text: Dark Text (#000000) or Dark Text Alternative (#141414)
Body text: Dark Text (#141414)
Secondary text: Medium Text (#363636)
Tertiary text: Light Text (#545454)
Borders: Border Light (#F0F0F0) or Border Medium (#E8E8E8)
Disabled state: Light Gray Background (#F9F9F9)
Focus outline: Primary Action Blue + 10% opacity background (rgba(0, 144, 251, 0.1))

Iteration Guide

Primary blue (#008FFB) is the only accent color. Use it for primary buttons, active navigation, links, and highlights. Never use secondary colors; neutrals handle all other roles.
All spacing is multiples of 4px. Common values: 8px, 12px, 16px, 20px, 24px, 32px. Never use arbitrary spacing; maintain strict grid discipline.
Card padding is always 24px 30px. Titles use 16px weight 400; subsections add 16px top margin. Cards have 1px solid #F0F0F0 border and 0px 1px 2px rgba(0, 0, 0, 0.05) shadow.
Border radius is conservative: 6px for inputs/buttons, 12px for cards/modals, 4px for badges, 9999px for fully rounded pills. Never exceed 12px for standard components.
Typography is Inter-only. Use ui-sans-serif family with fallback stack. Sizes: 14px body, 16px button, 20px heading, 13px label. Weight 400 for body, 500 for emphasis, 600 for headings.
Shadows are minimal and soft. Use 0px 1px 2px rgba(0, 0, 0, 0.05) for cards, 0px 4px 6px rgba(0, 0, 0, 0.1) for modals. Never use strong shadows; depth is suggested, not imposed.
Form inputs are 36px tall, with 8px vertical padding, 12px horizontal padding, 1px solid #E8E8E8 border, 6px radius. Focus state adds 3px blue outline shadow.
Buttons follow hierarchy: primary (#008FFB bg), secondary (#F0F0F0 bg), ghost (transparent). All have 6px radius, 500 weight. Icon buttons are 36px × 36px, fully rounded, transparent background.
Whitespace is generous. Minimum section margin is 24px; page-level margin is 40px. Never crowd content; breathing room reduces cognitive load and improves scannability.
Mobile-first responsive strategy: Single-column layout, full-width cards at mobile; 2–3 columns at tablet; 3–4 columns at desktop. Collapse navigation to hamburger at mobile; restore at tablet+. Minimum touch target is 44px × 44px.

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