Surfaces
Different experiences for different audiences — all in one project.
A surface is a distinct area of your product designed for a specific audience. Your marketing site, your app dashboard, your documentation — each is a surface with its own look, feel, and purpose.
This separation prevents the common problem where marketing pages, user dashboards, and developer docs all compete for the same design constraints. Each surface can be optimized for its audience without compromising the others.
Why This Matters
Different audiences need different experiences. Surfaces give each audience exactly what they need.
Right Experience for Each Audience
Visitors browsing your marketing site have different needs than users in your dashboard. Surfaces let you optimize for each.
Work Fast Without Breaking Things
Teams can work on different surfaces at the same time. Changes to marketing won't affect the app, and vice versa.
Clear Purpose, Less Confusion
Everyone knows where things belong. Public pages go in Web, user features go in App, reference material goes in Docs.
Easy to Add or Remove
Each surface is self-contained. Need a new admin area? Add it. Don't need presentations? Remove them. No complicated refactoring.
The goal is clarity: anyone joining the project can quickly understand where to find things and where to add new work.
How They Work Together
Each surface is independent but they share the same design language and components.
The Delivery Story
Surfaces form a complete narrative for your product:
- WebYour public website — pages visitors see without logging in
- AppDelivers value — the actual product experience
- DocsDocuments value — how things work and why
- ExamplesProves value — reference implementations that work
- PresentTells the story — decisions, progress, outcomes
Included Surfaces
Catalyst includes six surfaces out of the box. Keep what you need, remove what you don't, or add new ones for your specific needs.
Web
(web)Your public website. Marketing pages, content, blogs, portfolios — anything visitors access without logging in.
App
(app)Your core product. The dashboard, settings, and features users interact with after logging in.
Auth
(auth)Login, signup, and password reset. Clean, focused pages for authentication flows.
Docs
(docs)Documentation and reference material. Where you explain how things work and why.
Examples
(examples)Working examples and patterns. Proven implementations you can copy and adapt.
Present
(present)Slide presentations. Share progress, decisions, and outcomes with stakeholders.
Make It Yours
The included surfaces are starting points. Adapt them to fit your project.
Common Changes
- →Remove what you don't need. Building an app without marketing pages? Delete the Web surface.
- →Add new surfaces. Need a separate admin area? Create one with its own layout.
- →Rename to match your domain. "App" could become "Dashboard" or "Portal".
- →Simplify if you only need one or two surfaces. The pattern scales down as well as up.
The value is the concept—clear boundaries for different audiences. How you implement that is up to you.
Key Takeaways
Explore Each Surface
Learn about each surface—what it's for, how to customize it, and how to remove it if you don't need it.