Marketing Elements
The small pieces marketing pages are built from: featured icons, metrics, sub-features, logos, and job listings.
Metrics
value is a string, so "21.3K" and "99.98%" render exactly as written. trend is a signed number and drives the chip's direction and colour.
99.98%
Uptime
21.3K
12.4%Teams shipping
1.2s
0.2%Median build
Sub-features
Token-driven
Every colour and radius traces back to one variable.
Composable blocks
Copy the source and edit it, rather than configuring around it.
Logos and marquee
gap on Marquee has no default on purpose: logo strips and text strips want very different spacing, so it's better to state it than inherit a wrong guess.
Lagos, NGRemote
Job listings
Senior Design Engineer
Own the component library end to end, from Figma to npm.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| FeaturedIcon | icon, size, variant | An icon in a decorated container. variant is 'light' | 'outline' | 'solid' | 'subtle' — named that way because `style` would collide with the DOM prop. | |
| Metric | value, label, trend | A headline stat. value is a pre-formatted string; a signed trend renders the up/down chip. | |
| SubFeature | icon, title, description, layout, leftBorder | A small feature entry for a grid. layout is 'horizontal' | 'vertical'. | |
| PlaceholderLogo | size, logo, label | A stand-in logo for mockups. Defaults to the Sakani mark. | |
| LocationDot | location, status | A location with a status dot; status is 'active' | 'remote'. | |
| Marquee | items, gap, speed | Scrolling strip of arbitrary nodes. gap is required — Figma uses 32 for logos and 12 for text, so there's no safe default. | |
| JobListing | title, description, department, employmentType, location, locationStatus, onApply, applyLabel, layout | A careers-page row. layout is 'card' | 'row'. |