screenroveScreenrove / Design references
Linear design guide
Precision in the product. Atmosphere on the marketing site.
Typography
Observed family: Inter Variable. Font files are not distributed.
marketing: Dark editorial
- Canvas:
#08090a - Surface:
#0f1011 - Primary text:
#f7f8f8 - Secondary text:
#d0d6e0 - Muted text:
#8a8f98 - Accent:
#5e6ad2
Layout and components
- Large uninterrupted dark surfaces; use product imagery as the main visual proof.
- Use restrained contrast between the canvas and raised sections.
- Observed navigation controls: 32px high, 12px horizontal padding and pill corners.
- Pair concise feature headings with detailed, high-fidelity product examples.
- Use bright neutral text for the strongest actions; reserve purple for selective emphasis.
- Observed demo controls use 8px corner radii and compact 13px labels.
product: Light workspace
- Canvas:
lch(99.997 0.5 282) - Sidebar surface:
lch(97.94 0.5 282) - Subtle fill:
lch(93.483 0.5 282) - Primary text:
lch(9.794 0 282) - Secondary text:
lch(37.776 1.25 282)
Layout and components
- Observed navigation rail is 244 CSS pixels wide at a 2560px viewport.
- Keep persistent navigation separate from the main content and issue properties.
- Dense toolbars and status-grouped rows make space for the actual work.
- Use 8px corners for compact controls; the workspace selector uses 10px.
- Creation forms are overlays; they preserve the current page behind a dimmed backdrop.
- Empty states explain the concept and provide one clear first action.
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