custom-rule-lines

name	custom-rule-lines
description	Use when adding decorative rules to layouts. Custom rule lines (gradient, dotted with brand color, multi-line) replace boring 1px solid lines.

Custom Rule Lines

Custom rules: gradient fade, dotted with brand color, multi-line decorative, or brand-shape divider. Signals visual care.

Rule line variations

1. Gradient fade — line that fades transparent at ends
2. Dotted brand color — dotted rule in accent (signature)
3. Multi-line — 2-3 stacked lines (Art Deco feel)
4. Wave/curve — SVG-drawn wavy line
5. Asymmetric — long-short rule combination
6. Brand-shape divider — single icon as 'rule' divider

CSS examples

.rule-fade {
  background: linear-gradient(to right,
    transparent, var(--ink-30) 50%, transparent);
  height: 1px;
  margin: 3em 0;
}
.rule-multi {
  border-top: 1px solid var(--ink-30);
  border-bottom: 1px solid var(--ink-30);
  padding: 4px 0;
  margin: 3em 0;
}
.rule-dotted-accent {
  border-top: 2px dotted var(--accent);
  margin: 3em 0;
}

Application discipline

1. Pick 2-3 rule styles per brand
2. Consistent thickness across surfaces
3. Brand color (accent) for emphasis rules; ink-15 for subtle
4. Vertical rhythm (3em above/below for major; 1.5em for minor)

Where this fits in the X3 empire

Used in CardPrepAI editorial content for visual rhythm.