mcpField
T
tinted-neutrals

tinted-neutrals

github.com/basiclinesDesign & UI1640 installsUpdated 32w ago
Repository

About tinted-neutrals

tinted-neutrals is a design skill for creating brand-aligned neutral palettes with Rampa. It guides designers through tint intensity and blend mode choices for cohesive grays.

Key features

  1. 01Derive desaturated neutrals from a brand color
  2. 02Tint palettes with the brand color
  3. 03Adjust tint strength and blend mode
  4. 04Output color scales as CSS

Use cases

  1. 01Create brand-aligned grays for a design system
  2. 02Build warm or cool neutral palettes
  3. 03Compare palettes at different tint strengths

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/basiclines/rampa-studio --skill tinted-neutrals

After installing, type/tinted-neutralsin Claude Code to confirm it loaded.

Details

From the project README

Tinted Neutrals

Create neutral palettes that carry a subtle hint of your brand color. Instead of pure grays, get warm or cool neutrals that feel cohesive with your design system.

When to Use

  • "Create grays that match my brand"
  • "I want warm/cool neutrals"
  • "Make my grays less boring"
  • "Tint my neutral palette with brand color"

Installation

npx @basiclines/rampa

Recipe

1. Pure Neutral (Desaturated Brand)

Start with neutrals derived from your brand color's hue but heavily desaturated:

rampa -C "<brand-color>" -L 98:5 -S 3:8 --size=10 -O css --name=neutral
2. Tinted Neutral

Apply your brand color as a subtle overlay tint:

rampa -C "<brand-color>" -L 98:5 -S 3:8 --tint-color="<brand-color>" --tint-opacity=8 --tint-blend=overlay --size=10 -O css --name=neutral-tinted

Key: The --tint-color uses the same brand color - no hardcoded values!

Tint Intensity Options

Subtle Tint (5-8%)

Barely noticeable but adds warmth/coolness:

--tint-opacity=6 --tint-blend=overlay
Medium Tint (10-15%)

Clearly tinted but still neutral:

--tint-opacity=12 --tint-blend=overlay
Strong Tint (18-25%)

Obviously colored neutrals:

--tint-opacity=20 --tint-blend=soft-light

Blend Mode Options

ModeEffect
overlayBalanced tint, good default
soft-lightGentler, more subtle
multiplyDarker, richer tones
screenLighter, airier tones
colorApplies hue without changing lightness

Complete Example

For brand color #7c3aed (purple):

# Pure neutral (cool-ish from purple hue)
rampa -C "#7c3aed" -L 98:5 -S 3:8 --size=10 -O css --name=gray

# Tinted neutral (purple tint)
rampa -C "#7c3aed" -L 98:5 -S 3:8 --tint-color="#7c3aed" --tint-opacity=8 --tint-blend=overlay --size=10 -O css --name=gray-tinted

# Compare: extra warm variant
rampa -C "#7c3aed" -L 98:5 -S 3:8 --tint-color="#7c3aed" --tint-opacity=15 --tint-blend=soft-light --size=10 -O css --name=gray-warm

Output Structure

:root {
  /* Pure neutral */
  --gray-0: #fafafa;
  --gray-1: #f4f4f5;
  --gray-9: #18181b;

  /* Tinted neutral */
  --gray-tinted-0: #faf8fc;
  --gray-tinted-1: #f3f0f7;
  --gray-tinted-9: #1a1720;
}

Tips

  1. Always use the brand color as tint source - never hardcode gray
  2. overlay blend mode works for most cases
  3. Keep opacity under 15% for "still feels neutral"
  4. Test on both light and dark backgrounds
  5. Tinted neutrals make white text pop more on dark backgrounds

Comments

Markdown supported