Menu
Create a complete theme foundation with accent, secondary, and neutral color ramps from a single brand color. Use when building light/dark mode themes or starting a new design system.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Audit and update all rampa project documentation after code changes. Use when adding features, changing defaults, modifying APIs, or before a release.
Generate mathematically accurate color palettes using OKLCH color space. Use when creating design systems, color ramps, accessible palettes, CSS variables for themes, or when user asks about color generation.
Create cohesive color themes for code editors, terminals, and IDEs. Generates semantic token systems from a brand color with reusable palette variables for rapid iteration.
Generate color ramps designed for WCAG-compliant contrast pairing. Creates 11-step scales with predictable foreground/background combinations.
Expand a single brand color into a complete multi-hue color system using harmonies. Creates primary, analogous, complementary, and split-complementary ramps.
Generate distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction.
| name | theme-foundation |
| description | Create a complete theme foundation with accent, secondary, and neutral color ramps from a single brand color. Use when building light/dark mode themes or starting a new design system. |
| license | SEE LICENSE IN LICENSE.md |
| metadata | {"author":"ismael.fyi","version":"1.0.0"} |
Generate a complete theme color system from a single brand color. Creates primary accent, secondary accent (complementary), and neutral ramps - all mathematically derived.
npx @basiclines/rampa
Given a user's brand color, generate three ramp types:
The main brand color expanded to a full 10-shade scale.
rampa -C "<brand-color>" -L 95:10 --size=10 -O css --name=accent
Mathematically opposite on the color wheel - perfect for CTAs, highlights, or secondary actions.
rampa -C "<brand-color>" --add=complementary -L 95:10 --size=10 -O css
This outputs two ramps:
base - the primary accentcomplementary-1 - the secondary accentDerived from the brand color but heavily desaturated. This creates "warm" or "cool" neutrals that feel cohesive with the brand.
rampa -C "<brand-color>" -L 98:5 -S 5:10 --size=10 -O css --name=neutral
For brand color #3b82f6 (blue):
# Primary accent
rampa -C "#3b82f6" -L 95:10 --size=10 -O css --name=accent
# Secondary + Primary together
rampa -C "#3b82f6" --add=complementary -L 95:10 --size=10 -O css
# Neutrals (slightly warm from the blue)
rampa -C "#3b82f6" -L 98:5 -S 5:10 --size=10 -O css --name=neutral
:root {
/* Primary Accent */
--accent-0: #f0f7ff;
--accent-1: #dbeafe;
/* ... */
--accent-9: #1e3a5f;
/* Secondary Accent (complementary) */
--complementary-1-0: #fff7ed;
--complementary-1-1: #ffedd5;
/* ... */
/* Neutrals */
--neutral-0: #fafafa;
--neutral-1: #f5f5f5;
/* ... */
--neutral-9: #171717;
}
The same ramps work for both modes - just map them differently:
Light Mode:
neutral-0 to neutral-2neutral-8 to neutral-9accent-5 to accent-7Dark Mode:
neutral-9 to neutral-7neutral-0 to neutral-2accent-3 to accent-5--size=11 for more granular control-L range for more/less contrast (e.g., -L 90:20 for less extreme)