Foundations
Shape and elevation
Rounded application surfaces and soft shadows distinguish Startboard’s own visual language.
On this page
Geometry
| Family | Source geometry |
|---|---|
| Bookmark tile | rounded-2xl |
| Board chips and header actions | rounded-full |
| Dashboard editors | rounded-3xl |
| Settings outer card | rounded-[28px] |
| Inner forms, menus, suggestions | rounded-2xl |
| Selected/public controls | rounded-full |
Elevation
Tiles use a 0 12px 30px rgba(0,0,0,0.18) shadow and backdrop blur. Settings outer cards use 0 20px 60px rgba(0,0,0,0.08). Header controls and chip rows use shadow-sm; editor cards use shadow-2xl. The relative hierarchy matters more than applying the same shadow everywhere.
Rounded shapes belong to captured Startboard UI. The portfolio reference continues using its existing square corners and site palette.
Source references
| Repository file | Responsibility |
|---|---|
| app/globals.css | Surface utilities and gradient outlines |
| app/(home)/AppHome.tsx | Tile/editor elevation |
| app/settings/page.tsx | Settings shell |
Examples from the app
Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0