CARVIX TEMPLATE SYSTEM

Style Guide & Instructions

Use this page as the handoff point for editing the Carvix template. The site is built around reusable components, shared page chrome, semantic CMS fields, and responsive stacks that should remain intact as you customize the content.

Typography roles

Headings

Heading 1–6

Use the Thunder display family for page titles and major editorial headings. Use Geom for supporting headings and readable interface hierarchy.

Body copy

Body Large · Body Medium · Caption

Keep paragraphs in the shared body styles so spacing, line-height, and breakpoint behavior remain consistent across pages and detail templates.

Interface

Navigation · Button · Label

Use component controls for navigation labels, button labels, state changes, and repeated UI. Do not replace component instances with one-off frames when a matching component already exists.

Responsive behavior

Desktop · Laptop · Tablet · Phone

Keep the existing breakpoint names and adjust typography through shared styles before overriding individual text layers.

Color & surface system

Canvas Cream

Surface White

Accent Terracotta

Ink Forest

Text Muted

Use these shared tokens for new sections, cards, forms, and buttons. Keep surfaces distinct through fills, borders, and spacing rather than introducing untracked raw colors.

Editing rules for buyers

Responsive layout

Use stacks and grids with Fill, Fit, and 1fr sizing. On phone layouts, change multi-column content grids into vertical stacks when the content becomes a single reading column. Avoid fixed-width text blocks and horizontal overflow.

CMS editing

Edit Services, Projects, Blog, and Tags in the CMS collections. Keep slugs stable after launch, write descriptive image alt text, and use the existing detail pages for full content rather than duplicating static cards.

SEO & accessibility

Keep one clear H1 per page, use H2 and H3 sections in reading order, preserve Nav, Main, Footer, and Form semantics, and write useful alt text for content images. Decorative imagery should stay hidden from assistive technology when appropriate.

Components & states

Use the existing Button, Navigation, FAQ, Service, Blog, Testimonial, Pricing, Profile, and Social components. Change content through their semantic controls and preserve named variants such as Default, Open, Closed, Loading, Success, and Disabled.

Marketplace launch checklist

01 · Replace demo contact details and confirm every CTA destination.

02 · Review every CMS item, slug, image alt text, and SEO title before publishing.

03 · Test Desktop, Laptop, Tablet, and Phone breakpoints on every route, including detail pages and 404.

04 · Connect a production form provider and verify success, error, and incomplete states.

05 · Run a final performance pass on image sizes, font loading, redirects, favicon, and social sharing metadata.