05 / 07 · Design system
Components
Flat, legible pieces with visible structure. All UI icons come from Phosphor unless a final brand asset explicitly requires a custom mark.
Live examples.
Fields
Segments
MapFeedSaved
Tabs
OverviewSourcesRisk
Status, chips, and metrics
Active marketPPR sourced2025Q3
Fair valueEUR 612KPPR comparables, 2025Q3
Expected rentEUR 3.1KCSO RIQ02, Dublin area
Confidence74%Coverage and match quality
Component inventory.
Wordmark
Primary button
Secondary button
Text input
Select
Segmented control
Tabs
Chip
Status badge
Metric tile
Property card
Data table
Empty state
Map callout
Accordion with Phosphor caret
Header grid
Current reusable surfaces.
BrandMark
Bitter wordmark, title case Vestcove for the full mark and V only when compact mode is explicitly needed.
.vc-button
Solid or media-overlay glass controls with a maximum 2.5rem height, fully rounded control radius, and no generic gray outline.
.vc-field
Text inputs and selects with shared field height, semantic edge, fully rounded control radius, and Onest UI typography.
PremiumAccordion / vc-premium-accordion
Shared disclosure primitive with Phosphor caret-down indicator and the standard square structural shell. Do not hand-roll disclosure plus signs.
Dashboard surfaces
Dashboard filters, segmented controls, list rows, scorecards, property detail evidence panels, settings fields, and market rows all use the same semantic color tokens, square structural layout, rounded interactive controls, and .vc-edge only on non-button structural regions.