DESIGN SYSTEM
Spec Motifs Library
Precision UI primitives from our internal design system. Open source. Copy component source to integrate.
Components
CirclesRail
DiagonalBar
DotsRow
Ticks
FlagBlock
Chevrons
Crosshair
GridDots
Corner
CircuitTrace
DimensionLine
TargetReticle
BracketButton
Usage Guidelines
Placement
- Top corners of sections with Corner brackets
- Above feature grids with CirclesRail
- Under headlines with DiagonalBar or DimensionLine
- Beside CTAs with Chevrons
- As separators with DotsRow or CircuitTrace
- In hero sections with Crosshair or TargetReticle
- For tech-forward sections use CircuitTrace
Best Practices
- Keep opacity at 40-80% for background usage
- Align motifs with the layout grid
- Use sparingly - less is more
- Maintain consistent stroke weights
- All motifs are aria-hidden for accessibility
Dependencies
Each component requires the cn utility from your project:
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}