status-from-accent

name	status-from-accent
description	Generate success, warning, danger, and info status colors that harmonize with your brand using square harmony. All colors mathematically derived from one input.
license	SEE LICENSE IN LICENSE.md
metadata	{"author":"ismael.fyi","version":"1.0.0"}

Status Colors from Accent

Generate a complete set of status/feedback colors (success, warning, danger, info) that are mathematically related to your brand color using square harmony.

When to Use

• "Create status colors that match my brand"
• "I need success, warning, error colors"
• "Generate feedback colors from my accent"
• "Make danger/success colors that feel on-brand"

Installation

npx @basiclines/rampa

The Square Harmony Approach

Square harmony generates 4 colors at 90° intervals on the color wheel. This gives you maximum distinction while maintaining mathematical relationships.

rampa -C "<brand-color>" --add=square -L 95:15 --size=10 -O css

This outputs 4 ramps:

• base - your brand color (use as info/primary)
• square-1 - +90° rotation
• square-2 - +180° rotation (opposite)
• square-3 - +270° rotation

Mapping Hues to Status

The actual colors depend on your input. After generation, map based on hue:

Hue Range	Typical Status
80-150°	Success (green/teal)
30-80°	Warning (yellow/orange)
0-30° or 330-360°	Danger (red/pink)
180-270°	Info (blue/purple)

Example: If your brand is blue (#3b82f6, ~220°):

• base (220°) → Info
• square-1 (310°) → Danger (magenta/red zone)
• square-2 (40°) → Warning (orange zone)
• square-3 (130°) → Success (green zone)

Complete Example

# Generate all 4 status ramps from blue brand
rampa -C "#3b82f6" --add=square -L 95:15 --size=10 -O css

Output includes 4 full ramps - assign semantic meaning based on hue:

:root {
  /* Info (base - blue) */
  --base-0: #eff6ff;
  --base-5: #3b82f6;
  --base-9: #1e3a8a;

  /* Danger (square-1 - magenta/red) */
  --square-1-0: #fdf2f8;
  --square-1-5: #ec4899;
  --square-1-9: #831843;

  /* Warning (square-2 - orange) */
  --square-2-0: #fff7ed;
  --square-2-5: #f97316;
  --square-2-9: #7c2d12;

  /* Success (square-3 - green) */
  --square-3-0: #f0fdf4;
  --square-3-5: #22c55e;
  --square-3-9: #14532d;
}

Renaming for Semantics

After identifying which ramp is which, you can re-run with explicit names:

# If you know square-3 is your green/success
rampa -C "#22c55e" -L 95:15 --size=10 -O css --name=success

Or map in your CSS:

:root {
  --success: var(--square-3-5);
  --warning: var(--square-2-5);
  --danger: var(--square-1-5);
  --info: var(--base-5);
}

Alternative: Custom Status Base

If the generated hues don't land exactly where you want, adjust the input:

# Start from green to ensure success is the base
rampa -C "#22c55e" --add=square -L 95:15 --size=10 -O css
# Now: base=green, square-1=blue, square-2=red, square-3=yellow

Tips

1. Square harmony guarantees maximum visual distinction
2. All 4 colors share the same "mathematical DNA"
3. The -L 95:15 range works well for status colors (light bg, dark text)
4. Use --size=10 for full ramp, --size=5 for minimal
5. Mid-ramp values (4-6) work best for badges, buttons, alerts