| name | monochrome |
| description | Monochrome web interface design system for black, white, and grayscale layouts. Use for minimal, editorial, architectural, premium brand, portfolio, and photography interfaces that avoid hue-based color entirely. |
| version | 2.0.0 |
| author | StyleKit |
| keywords | ["monochrome","black and white","grayscale","minimal","editorial","architecture","premium","单色","黑白灰","极简"] |
| style_type | visual |
Monochrome
A strict monochrome design system for web interfaces built entirely with black, white, and grayscale values.
This style should be used when the product needs to feel refined, minimal, editorial, architectural, premium, calm, or highly art-directed without relying on hue. Visual hierarchy must come from contrast, spacing, typography, scale, alignment, and grayscale layering, not color.
When to Use This Style
Use monochrome when the user asks for or clearly implies:
- 黑白灰设计
- 单色、无彩色、去色相界面
- 极简、高级、克制、冷静、理性风格
- 摄影、建筑、艺术展览、作品集、高端品牌官网
- editorial / minimal / premium / gallery-like visual direction
This style is especially effective for:
- portfolio websites
- architecture studios
- photography landing pages
- luxury or premium brand pages
- editorial product sites
- minimalist SaaS marketing pages
Avoid using this style when the user explicitly wants:
- playful or colorful UI
- strong gradient branding
- neon / cyberpunk / glassmorphism color effects
- illustration-heavy cheerful products
- children's products or festival-like marketing pages
Core Design Philosophy
Monochrome is not merely “removing color.” It is a disciplined visual system where hierarchy is created through:
- Grayscale contrast
- Typography weight and scale
- Generous whitespace
- Sharp composition
- Restraint in decoration
- Precise borders instead of loud fills
- Subtle shadow only when necessary
The result should feel:
- calm
- premium
- intentional
- spacious
- sharp
- timeless
It must never feel:
- flat because of weak contrast
- boring because of weak hierarchy
- generic because of missing typography structure
- soft or playful because of excessive roundness
- “accidentally monochrome” due to lack of art direction
Non-Negotiable Style Rules
These rules always apply:
- Use only black, white, and neutral grayscale
- Do not use any hue-based color
- Prefer sharp corners:
rounded-none or rounded-sm
- Prefer thin borders over heavy fills
- Use large whitespace to create rhythm
- Use font weight contrast to create hierarchy
- Keep shadows subtle and rare
- Avoid decorative visual noise
- Avoid bright accents, gradients, glows, and colorful status treatments unless the user explicitly overrides the monochrome constraint
Visual Character
Tone
- restrained
- elegant
- editorial
- premium
- minimal
- architectural
Shape Language
- rectilinear
- sharp-edged
- grid-aligned
- clean framing
- low ornamentation
Hierarchy Strategy
Establish hierarchy using:
- black vs white contrast
- strong display type
- thin divider lines
- scale jumps between headline and body
- dense-to-light rhythm across sections
- whitespace blocks between content groups
Do not rely on colored badges, gradients, or loud button accents.
Design Tokens
Colors
Use grayscale only.
- Page background:
bg-[#fafafa]
- Secondary background:
bg-[#f5f5f5]
- Elevated neutral surface:
bg-white
- Primary text:
text-[#111111]
- Secondary text:
text-[#666666]
- Muted text:
text-[#888888]
- Border:
border-[#e5e5e5]
- Strong divider:
border-[#d4d4d4]
- Primary action background:
bg-[#111111]
- Primary action text:
text-[#fafafa]
- Hover dark:
hover:bg-[#333333]
Border
- Width:
border
- Default color:
border-[#e5e5e5]
- Emphasis border:
border-[#d4d4d4]
- Radius:
rounded-none or rounded-sm
Shadow
Use shadow only to separate layers gently.
- Small:
shadow-sm
- Medium:
shadow-sm
- Large:
shadow-md
- Hover:
hover:shadow-sm
Never use dramatic floating shadows.
Typography
Typography is one of the primary hierarchy tools in monochrome layouts.
- Display / Hero:
text-4xl md:text-6xl lg:text-8xl font-bold tracking-tight
- H1:
text-3xl md:text-5xl font-bold tracking-tight
- H2:
text-2xl md:text-4xl font-semibold tracking-tight
- H3:
text-xl md:text-2xl font-semibold
- Body large:
text-base md:text-lg font-light leading-7
- Body default:
text-sm md:text-base font-light leading-6
- Caption / meta:
text-xs md:text-sm text-[#666666] tracking-wide
- Strong emphasis:
font-bold
- Soft body copy:
font-light
Spacing
Spacing must feel deliberate and generous.
- Section spacing:
py-16 md:py-24
- Hero spacing:
py-24 md:py-32
- Container padding:
px-6 md:px-8
- Card padding:
p-6
- Dense block gap:
gap-4
- Standard block gap:
gap-6
- Spacious layout gap:
gap-8 md:gap-12
Layout Guidance
Monochrome layouts should feel structured, editorial, and balanced.
Preferred Layout Traits
- strong grid alignment
- generous margins
- asymmetry used carefully
- consistent section rhythm
- visual breathing room
- image blocks framed cleanly
- restrained CTA placement
Recommended Layout Archetypes
-
landing-hero-centered
Centered headline, supporting copy, and CTA. Best for minimal premium statements.
-
landing-hero-split
Text on one side, visual or product image on the other. Useful for brand storytelling.
-
landing-hero-fullscreen
Large immersive opening section with strong typography and minimal chrome.
-
landing-video-hero
Full-screen video with strong black/white treatment and sparse overlay content.
-
landing-saas-pricing
Structured pricing page using borders, contrast, and spacing instead of colorful tiers.
-
landing-waitlist
Minimal waitlist page with restrained email capture and sharp hierarchy.
Section Composition Advice
For most pages:
- start with a bold hero
- follow with a restrained feature grid
- use line dividers or spacing to separate sections
- keep CTA blocks focused and minimal
- end with a clean footer with muted meta text
Component Recipes
Button
Base
font-sans font-medium tracking-wide rounded-none transition-all duration-200
Primary
bg-[#111111] text-[#fafafa] border border-[#111111]
Use for the main CTA only.
Outline
bg-transparent text-[#111111] border border-[#111111]
Use for secondary actions.
Hover
hover:bg-[#333333]
Button Guidance
- keep buttons rectangular
- avoid pill buttons
- avoid colorful fills
- avoid oversized playful motion
- use one dominant primary CTA per section
Card
Base
bg-[#fafafa] border border-[#e5e5e5] rounded-none overflow-hidden
Hover
hover:shadow-sm
Card Guidance
- use cards only when grouping is necessary
- prefer border separation over strong elevation
- keep inner spacing clean and even
- avoid decorative gradients or tinted backgrounds
Input
Base
w-full bg-[#fafafa] border border-[#e5e5e5] text-[#111111] placeholder:text-[#666666]/50 focus:outline-none rounded-none transition-all duration-200
Focus Recommendation
Prefer subtle focus treatment such as:
- darker border
- slightly stronger contrast
- minimal ring if necessary, but keep it neutral
Example neutral focus direction:
focus:border-[#111111]
Input Guidance
- keep fields simple and rectangular
- avoid heavy glow focus
- avoid colorful validation states unless product requirements force them
Divider
Recommended for separating content cleanly.
- Base:
border-t border-[#e5e5e5]
- Strong:
border-t border-[#d4d4d4]
Use dividers to replace unnecessary visual decoration.
Navigation
Recommended character:
- minimal
- text-first
- generous spacing
- subtle hover contrast
- no colorful active underline
Suggested treatment:
- transparent or white background
- slim bottom border when needed
- uppercase or tracking-wide labels for editorial feel
Content Styling Guidance
Monochrome works best when copy is disciplined.
Headlines
- short
- high-contrast
- declarative
- visually dominant
Body Copy
- concise
- calm
- spacious
- avoid marketing clutter
CTA Copy
Prefer clear, restrained verbs:
- Explore
- View Work
- See Collection
- Start Now
- Learn More
- Join Waitlist
Avoid overly loud CTA language unless required by the brand.
Accessibility and Contrast
Because this style relies heavily on grayscale, contrast discipline is critical.
Always ensure:
- primary text has strong contrast against background
- muted text remains readable
- buttons remain distinguishable without hue
- section boundaries are visible through spacing or border
- disabled states do not become illegible
Do not confuse “minimal” with “low contrast.”
Forbidden Patterns
The following must never be used unless the user explicitly overrides monochrome constraints.
Forbidden Utility Patterns
bg-blue-500bg-red-500bg-green-500bg-pink-500bg-purple-500bg-yellow-500bg-orange-500bg-cyan-500bg-indigo-500bg-teal-500rounded-fullshadow-lgshadow-xlshadow-2xlbg-gradient-to-*
Forbidden Regex Patterns
^bg-(?:blue|red|green|pink|purple|yellow|orange|cyan|indigo|teal|emerald|rose|violet|amber|lime|sky|fuchsia)-^text-(?:blue|red|green|pink|purple|yellow|orange|cyan|indigo|teal|emerald|rose|violet|amber|lime|sky|fuchsia)-^border-(?:blue|red|green|pink|purple|yellow|orange|cyan|indigo|teal|emerald|rose|violet|amber|lime|sky|fuchsia)-^from-^via-^to-^rounded-full$^shadow-(?:lg|xl|2xl)$
Why These Are Forbidden
- Hue-based colors break the monochrome constraint
- Gradients introduce visual color energy and decorative noise
rounded-full makes the UI feel soft or playful rather than sharp and editorial- heavy shadows create unnecessary depth and reduce the restrained premium quality
Do
- 使用纯灰阶背景，如
bg-[#fafafa]、bg-[#f5f5f5]、bg-white
- 使用深灰主文字与中灰辅助文字建立层次
- 用
font-light 与 font-bold 建立强字重对比
- 使用大留白创造高级感与节奏
- 用细边框而不是彩色块面进行分隔
- 保持布局严格对齐，优先 grid-based layout
- 通过标题尺度、留白、边框和密度变化建立视觉节奏
- 优先做“少而准”的组件表达，而不是堆砌模块
Don’t
- 禁止任何带色相的颜色
- 禁止彩色按钮、彩色标签、彩色图标高亮
- 禁止渐变、霓虹、发光、毛玻璃彩色叠层
- 禁止
rounded-full 式柔软圆角
- 禁止重阴影和漂浮感过强的卡片
- 禁止用过多装饰元素弥补信息层次不足
- 禁止低对比度到影响可读性
Implementation Workflow
When applying this style to a page or component, follow this sequence:
Step 1: Classify the Interface
Identify:
- product type
- audience
- page goal
- content density
- required sections
- whether the page should feel more editorial, architectural, portfolio-like, or premium commercial
Step 2: Establish the Contrast Model
Decide:
- page background
- surface background
- text hierarchy
- border intensity
- CTA contrast level
Step 3: Build Hierarchy Through Type and Space
Choose:
- hero scale
- heading rhythm
- body density
- section spacing
- whitespace emphasis zones
Step 4: Apply Components Conservatively
Add:
- buttons
- cards
- inputs
- dividers
- navigation
Only when structurally necessary.
Step 5: Remove Visual Noise
Check and remove:
- colorful classes
- unnecessary gradients
- excessive rounded corners
- decorative shadows
- redundant icon accents
- overdesigned badges and chips
Step 6: Final Monochrome Audit
Before finalizing, verify:
- no hue-based color exists
- contrast is sufficient
- hierarchy is strong without color
- layout feels premium rather than empty
- buttons and inputs still feel interactive
- the page is minimal but not lifeless
Output Expectations
When generating UI in this style, the result should:
- look premium without color
- feel minimal but intentional
- use typography and whitespace as primary design tools
- maintain strong readability
- avoid playful or overly friendly styling
- feel suitable for serious, aesthetic, or high-end digital products
Example Prompt
Generate a landing page with:
- Style: monochrome
- Archetype: landing-hero-centered
- Tone: premium, minimal, editorial
- Sections: hero, features, cta, footer
- Components: heading (hero variant), button (primary, lg), card (default)
- Constraint: grayscale only, no hue-based colors, no rounded-full, no heavy shadows
