ASCELF / SYSTEM /Design documentation
Swiss precision, an ascending diagonal, and a monochrome brand that steps aside so products can carry their own color. This page is the system itself: running live, not a static brandbook.
01 /Foundations
ASCELF starts almost monochromatic on purpose: black, white, off-white, gray. Each product earns its own signature color. ASCELF itself never does.
Black
ink
#000000
White
paper
#FFFFFF
Off White
paper-dim
#F5F5F3
Gray
mute
#8A8A8A
Semantic tokens (theme-aware)
| Name | Token | Value |
|---|---|---|
| Background | background | adapts to OS scheme |
| Surface | surface | raised panels |
| Foreground | foreground | primary text |
| Muted | muted | secondary text |
| Line | line | hairline borders |
02 /Foundations
Geist for interface and editorial type. Geist Mono for system labels, status, and anything that should read as technical.
Hero / text-hero
We build what's next.
Display / text-display
Ascend. Build. Repeat.
Section / text-section
01 / Products
Body / text-lg
Precise. Geometric. Ambitious.
03 /Foundations
12-column grid
| Name | Token | Value |
|---|---|---|
| Columns | columns | 12 |
| Max width | max-width | 88rem |
| Gutter | gutter | clamp(1.25rem, 4vw, 3rem) |
Ascend easing
| Name | Token | Value | Use |
|---|---|---|---|
| Fast | duration-150 | 150ms | Hover, focus states |
| Base | duration-500 | 500ms | Reveals, transitions |
| Slow | duration-900 | 900ms | Hero entrance |
04 /Brand
The wordmark’s “A” is cut from a single diagonal: not a decorative arrow, a structural angle (--angle: -11deg). It shows up as dividers, corner geometry and hover states, always in moderation. Two filled lockups exist, black ink for light surfaces and white ink for dark ones, plus a standalone symbol for compact spaces like favicons.
Filled black
Filled white
Symbol / favicon mark
05 /Components
Eyebrow label
00 /System label
Product card
The infrastructure for markets to sell, take orders and deliver: inside the marketplace, their own store, or any other platform.
Rancho Marketplace
Where consumers discover and buy from local markets.
Rancho Commerce
Multi-tenant e-commerce infrastructure for any market.
Rancho Logistics
Delivery infrastructure for any platform.
