07 / 07 · Design system
Brand
The temporary logo mark, the shared scrollbar treatment, and the framework conventions that hold the system together.
Logo mark.
01
The temporary app mark is a Bitter wordmark only.
02
Render the full temporary wordmark as title-case Vestcove.
03
Do not use the old amber signal dot.
04
Avoid crests, shields, brokerage badges, or military-intelligence styling.
05
Treat it as temporary production scaffolding. Replace it cleanly when final designer assets arrive.
Scrollbars.
The shared rule lives at the top of apps/web/src/app/globals.css:
* {
scrollbar-width: thin;
scrollbar-color: gray transparent;
}01
Every scrollable region (page, panel, modal, dropdown, code block) uses the same restrained scrollbar treatment.
02
Do not bring back native default-thickness scrollbars or override the thumb/track colors per surface.
03
Browsers without scrollbar-color support degrade to their defaults; that is acceptable.
Framework.
01
Tailwind is active so tokens, layout, and responsive rules are easy to share across public and authenticated surfaces.
02
Use custom React components for signature surfaces: hero, brand mark, property cards, map workspace, intelligence bento, and property detail.
03
Use third-party React UI primitives selectively for durable low-level behavior only. Do not let a component library define the visual identity.
04
Keep interactive radii systematic. Raw rounded-* utilities on buttons, fields, tabs, dropdown triggers, and filter controls should be replaced with the shared interactive radius tokens or helpers unless a final component spec says otherwise.