skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

duotone-design

Implements two-color duotone design schemes for web and mobile app interfaces.

3|Updated Jul 17, 2026
Search Tags:#css#color palette#ui design#swiftui#flutter#duotone#image styling
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill duotone-design-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: duotone-design
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-it/duotone-design
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill duotone-design-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Applying a consistent two-color duotone aesthetic across web and mobile platforms requires platform-specific image processing techniques that are not obvious, especially since standard image widgets cannot perform blend-mode color mapping natively. ## Core Features & Use Cases - CSS Duotone Effects: Uses mix-blend-mode, grayscale(), and contrast() filters to map images to a dark/light color pair without Photoshop. - Cross-Platform Mobile Implementations: Provides SwiftUI, Flutter, React Native (via Skia), and Jetpack Compose code for grayscale conversion plus multiply/screen blend layering. - Use Case: A designer building a Spotify-style playlist page with a deep purple and neon lime palette can apply the provided CSS or SwiftUI snippets to treat all photography and typography into the exact two-color scheme. ## Quick Start Apply the duotone design style to my landing page using a navy and peach color pair with treated hero imagery.

Frequently Asked Questions about duotone-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a duotone image effect with CSS?▼

Apply `filter: grayscale(100%) contrast(1.5)` to the image, set `mix-blend-mode: multiply` against a light background color, then overlay a pseudo-element with the dark color using `mix-blend-mode: screen`.

How to make duotone images in SwiftUI?▼

Chain `.grayscale(1.0)` and `.contrast(1.5)` modifiers on the Image, apply `.colorMultiply()` with the light color, then overlay the dark color with `.blendMode(.screen)` in a ZStack.

Can React Native render duotone images natively?▼

Standard React Native Image components cannot perform blend-mode duotone effects. Use `@shopify/react-native-skia` with custom color matrices, or pre-process images in Photoshop or Figma before bundling them.

What color combinations work for duotone design?▼

Use very high-contrast pairs such as navy and peach, deep purple and neon green, or crimson and cream. The dark color replaces shadows and the light color replaces highlights, and adding a third color breaks the aesthetic.

What are the limitations of duotone design?▼

Duotone is a styling reference only and does not replace accessibility testing or expert review. Contrast ratios between the two colors and responsive behavior must be verified separately for legibility.

Related Skills

Explore More Design & Creative Skills→
efekrbasefekrbas
41

duotone-design

Transform images and interfaces into two-color designs with grayscale treatment.

Community
Intermediate
Nickalus12Nickalus12
2

a11y-audit

Audit Loom-style applications for WCAG violations and ARIA usage.

Community
Advanced
lsst-sqrelsst-sqre
2

wcag-contrast-checker

Compute WCAG contrast ratios and AA/AAA compliance for CSS colors.

Official
Intermediate
a0972199950a0972199950
1

brand-guidelines

Apply Anthropic's official brand colors and typography to artifacts.

Community
Basic