There are two bars, and they are not the same thing. A global
app bar sits above every screen at 52px and holds search and partner branding
— never a page title. Each screen then draws its own page header at 71px
that carries the title and bleeds out past the content padding.
App bar
Spans the full width to the right of the sidebar. Search sits at a fixed 400px on the left, a flexible spacer fills the middle, and the partner lockup is pinned right.
Powered by
Page header
The title bar belongs to the screen, not the chrome. It uses negative margins to
reach past the page’s 48px side padding and sit flush against the content area’s edges, so
its rule runs the full width while the title stays on the 28px inset.
Marketplace
Page content begins 48px below the rule.
Specs
| App bar | Value |
|---|---|
| Bar | height 52px · padding 0 20px · gap 16px · #fff · border-bottom 1px #F3F4F6 · flex-shrink 0 |
| Search wrapper | position: relative · width 400px, fixed — it does not grow with the window |
| Search input | height 35.94px · border 0.78px #E5E7EB · radius 10.94px · padding 7.81px 12.5px 7.81px 34.38px · 12px · #6B7280 · outline:none |
| Search icon | 14×14 lucide search · #9CA3AF · left 12.5px, vertically centred |
| Spacer | An empty flex:1 div — the gap is a real element, not justify-content |
| Partner lockup | gap 8px · label 10px / 500 uppercase with tracking-widest (.1em) in #9CA3AF · logo height 20px, width auto |
| Page header | Value |
|---|---|
| Bar | height 71px · padding 0 28px · border-bottom 0.87px #F3F4F6 · flex-shrink 0 |
| Bleed | margin: -24px -48px 48px — pulls back over the page’s own padding so the rule spans edge to edge |
| Title | 22px / 400 · #2D3653 · no margin — the one place the product sets a large size at regular weight |
| The app bar never holds the page title, a back button or page actions. It carries search and the partner lockup only, and is identical on every screen. |
The title is font-weight 400 at 22px. Everything else large in the product is 600 or 700, so this is deliberate and easy to get wrong. |
The search field’s values are a 0.78125 scaling of a 1 / 14 / 10 / 16 / 44 / 46 set — an export artifact that shipped. They are recorded as they render; nothing else in the product carries sub-pixel values. |
| Navigation lives in the sidebar, not up here. The two never share controls. |