screenroveScreenrove / Design references
Vercel design guide
A precise monochrome system, from marketing to the console.
Typography
Observed family: Geist Sans. Font files are not distributed.
marketing: Light architectural
- Canvas:
#fafafa - Surface:
#ffffff - Primary text:
#171717 - Body text:
#4d4d4d - Border:
#ebebeb - Link blue:
#0070f3
Layout and components
- Use aligned section boundaries and subtle borders to establish the page grid.
- Contrast large headline typography with precise small navigation and labels.
- Pricing extends from simple plan choices to a detailed comparison table.
- Use dark filled primary actions, white secondary actions and low-contrast dividers.
- Keep proof points, technical diagrams and customer evidence close to their claims.
- Let deliberate spacing and type establish hierarchy before introducing colour.
product: Light console
- Canvas:
#fafafa - Surface:
#ffffff - Primary text:
#171717 - Secondary text:
#4d4d4d - Border:
#ebebeb - Interactive blue:
#0072f5
Layout and components
- A persistent left rail groups team-level tools; a top bar supplies project scope.
- Place page-level search and filters above the results or empty state.
- Provider catalogs use repeated rows or cards with predictable labels and actions.
- Observed navigation rows use 6px corners; primary action fills use #171717.
- Project selection precedes analytics when no project is selected.
- Show setup guidance and clear empty states instead of inventing sample metrics.
Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.
Download DESIGN.md