메뉴
Design a dark mode that pairs with an existing light mode, including color mapping, contrast adjustments, and surface elevation. Use whenever the user mentions dark mode, dark theme, theme switching, or wants to add dark mode to an existing design.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Audit a brand's full identity (logo, typography, color, voice, visual language) for consistency, distinctiveness, and gap. Use when the user asks for a brand audit, identity review, brand health check, or wants to evaluate how a brand shows up across surfaces.
Plan a content calendar tied to product, brand, or marketing goals. Use when the user asks for a content plan, editorial calendar, content strategy, posting schedule, or wants to map content to themes and audiences over a period of time.
Write a sequence of emails for onboarding, nurture, sales, lifecycle, or launch. Use when the user asks for a drip campaign, email sequence, welcome series, onboarding emails, sales cadence, or any multi-email flow tied to a goal.
Design an a/b test or experiment including hypothesis, metrics, sample size, and analysis plan. Use whenever the user mentions a/b test, experiment, split test, multivariate test, or needs to design a test that produces a decision-quality result.
Audit a design or component for WCAG accessibility compliance. Use whenever the user mentions a11y, accessibility audit, WCAG check, contrast issues, keyboard navigation, screen reader support, focus order, or asks if a design is accessible.
Extract a brand voice guide from existing copy samples. Use whenever the user shares past copy and asks to define a voice, document a voice, create voice guidelines, or wants to make their existing voice teachable and repeatable.
| name | dark-mode-pairing |
| description | Design a dark mode that pairs with an existing light mode, including color mapping, contrast adjustments, and surface elevation. Use whenever the user mentions dark mode, dark theme, theme switching, or wants to add dark mode to an existing design. |
dark mode is not "invert the light mode". it's a parallel design with its own rules.
for each light-mode token, define a dark-mode counterpart:
background
light: #ffffff
dark: #0a0a0c (off-black, slight cool tint)
surface (cards, panels)
light: #fafafa
dark: #15151a (one elevation up)
surface elevated (modals, popovers)
light: #ffffff (above background)
dark: #1f1f25 (two elevations up)
text primary
light: #111
dark: #f0f0f3
text secondary
light: #555
dark: #a8a8b0
border
light: #e5e5e8
dark: #2a2a32
accent (brand color)
light: full saturation
dark: reduce saturation 10-20%, increase lightness 5-10%
semantic colors (success, warning, error, info)
each gets its own dark variant. usually less saturated, slightly lighter.
in dark mode, shadows are subtle and often replaced by surface elevation. use a 1px lighter border on the top edge of elevated surfaces as a substitute for the top highlight that natural light would create.
before shipping: