Five layers. One page.
Surfacing resolves a page from the outside in. Each layer narrows the decision space until shapes and themes emerge. Switch the page type and watch every layer re-resolve.
Every page starts as a blank canvas. The surfacing process fills it in, layer by layer, from the broadest constraint to the finest detail. Scroll down to watch it happen.
Page Intent
What kind of page is this? A dashboard, a blog post, a product listing? The page type sets the outermost constraint and determines everything that follows. It defines the intent, the density, and the interaction model.
Section Layout
The page subdivides into named regions. Each section has a role — navigation, primary content, supplementary info. The layout is driven by the page intent: dashboards get sidebars, blogs get reading columns, stores get product grids.
Component Slots
Each section declares what interfaces it needs. These are the data contracts — the canonical types from the interface registry. At this layer, we know what data goes where, but not yet how it will look.
Shape Selection
Now the interface badges resolve into shapes — concrete visual representations. The surfacing engine picks the best shape for each interface based on the section context. Some fields get used, others get omitted. The shape is structural — it defines what renders, not how it looks.
Theme Injection
Finally, tokens are injected. Colours, spacing, typography, shadows — the visual layer that makes shapes look like a real page. The wireframe becomes recognisable. The same shapes with a different theme would look completely different, but the data and structure stay identical.
And it works the other way too
The scroll above shows the outside-in view — how a page resolves from intent down to pixels. But surfacing also works inside-out: given a single interface, it reasons about which shape and theme fit the current context.
You already saw this on the homepage — the AI surfacing chat takes a UserProfile interface and reasons about it in three different contexts. Same contract, different decisions every time.
The surfacing model is implementation-agnostic — build your own, use rules, use AI. At Fresh Context, we're building one such engine.