메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use this skill when the user wants one-shot commit-and-push sync for Career Pilot to Gitee master and GitHub main with Conventional Commits.
Use this skill when the user wants to write, rewrite, validate, or improve Git commit messages using Conventional Commits. Helps classify changes, split mixed work into logical commits, choose scopes, detect breaking changes, and produce clear commit messages in the format type(scope): description.
Use this skill to perform pre-commit checks including sensitive data scanning, large file detection, code quality validation, and test reminders before creating Git commits.
Use this skill when changing mock interview session creation, question flow, answer submission, follow-up logic, review output, or session lifecycle behavior.
Use this skill when working on the master-resume workflow from file upload through Markdown editing, persistence, and downstream structured reuse.
Use this skill when changing the contract and workflow that connects saved jobs, match data, tailored resume generation, retry state, download, and interview handoff.
| 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 |
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.
Use monochrome when the user asks for or clearly implies:
This style is especially effective for:
Avoid using this style when the user explicitly wants:
Monochrome is not merely “removing color.” It is a disciplined visual system where hierarchy is created through:
The result should feel:
It must never feel:
These rules always apply:
rounded-none or rounded-smEstablish hierarchy using:
Do not rely on colored badges, gradients, or loud button accents.
Use grayscale only.
bg-[#fafafa]bg-[#f5f5f5]bg-whitetext-[#111111]text-[#666666]text-[#888888]border-[#e5e5e5]border-[#d4d4d4]bg-[#111111]text-[#fafafa]hover:bg-[#333333]borderborder-[#e5e5e5]border-[#d4d4d4]rounded-none or rounded-smUse shadow only to separate layers gently.
shadow-smshadow-smshadow-mdhover:shadow-smNever use dramatic floating shadows.
Typography is one of the primary hierarchy tools in monochrome layouts.
text-4xl md:text-6xl lg:text-8xl font-bold tracking-tighttext-3xl md:text-5xl font-bold tracking-tighttext-2xl md:text-4xl font-semibold tracking-tighttext-xl md:text-2xl font-semiboldtext-base md:text-lg font-light leading-7text-sm md:text-base font-light leading-6text-xs md:text-sm text-[#666666] tracking-widefont-boldfont-lightSpacing must feel deliberate and generous.
py-16 md:py-24py-24 md:py-32px-6 md:px-8p-6gap-4gap-6gap-8 md:gap-12Monochrome layouts should feel structured, editorial, and balanced.
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.
For most pages:
font-sans font-medium tracking-wide rounded-none transition-all duration-200
bg-[#111111] text-[#fafafa] border border-[#111111]
Use for the main CTA only.
bg-transparent text-[#111111] border border-[#111111]
Use for secondary actions.
hover:bg-[#333333]
bg-[#fafafa] border border-[#e5e5e5] rounded-none overflow-hidden
hover:shadow-sm
w-full bg-[#fafafa] border border-[#e5e5e5] text-[#111111] placeholder:text-[#666666]/50 focus:outline-none rounded-none transition-all duration-200
Prefer subtle focus treatment such as:
Example neutral focus direction:
focus:border-[#111111]
Recommended for separating content cleanly.
border-t border-[#e5e5e5]border-t border-[#d4d4d4]Use dividers to replace unnecessary visual decoration.
Recommended character:
Suggested treatment:
Monochrome works best when copy is disciplined.
Prefer clear, restrained verbs:
Avoid overly loud CTA language unless required by the brand.
Because this style relies heavily on grayscale, contrast discipline is critical.
Always ensure:
Do not confuse “minimal” with “low contrast.”
The following must never be used unless the user explicitly overrides monochrome constraints.
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-*^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)$rounded-full makes the UI feel soft or playful rather than sharp and editorialbg-[#fafafa]、bg-[#f5f5f5]、bg-whitefont-light 与 font-bold 建立强字重对比rounded-full 式柔软圆角When applying this style to a page or component, follow this sequence:
Identify:
Decide:
Choose:
Add:
Only when structurally necessary.
Check and remove:
Before finalizing, verify:
When generating UI in this style, the result should:
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