Customizing UI

Gridlines keeps interface customization in React components and theme files. Content stays in MDX, while typography, colors, layout, navigation, and article treatments stay in the app layer.

Common customization points#

These are the safest places to start when adapting the template to a new brand.

• Typography scale and prose rhythm.
• Theme tokens for light and dark mode.
• Docs layout, sidebar, and table of contents.
• Blog cards and article hero sections.
• Shared MDX components.

Start with tokens#

Change colors and typography before rewriting layout components. Small token changes often create the largest visual difference.

Then adjust components#

Once the visual direction is stable, tune the sidebar, table of contents, blog cards, and article header.

Keep content stable#

Good customization should not force writers to rewrite pages. The content model should remain predictable even when the interface changes.

Preserve MDX contracts#

Before changing shared components, check which MDX files already use them. A small prop rename can break many pages when the content system grows.

Avoid visual-only rewrites#

If a component only needs spacing, color, or typography changes, keep the content API stable. Writers should not need to learn a new component name for a visual refresh.

Customization checklist#

Use this checklist when adapting the template for a product, design system, or internal knowledge base.

Brand layer#

Start with logo, color tokens, type scale, and navigation labels. These changes make the template feel owned without disturbing content structure.

Content layer#

Replace example pages after the brand layer is stable. This makes it easier to judge whether the interface supports real documentation needs.