Built to evolve.
A shared visual system and an editable content layer help a website grow without losing the decisions that hold it together.
A portfolio keeps changing. New work arrives, a project needs a better explanation, and a short note becomes a longer article. The website needs to make those changes possible while keeping the visual relationships that made the original design work.
For CR8V Studio, this means treating the site as a set of connected decisions: a visual system, a collection of reusable components and a content layer that can be edited independently. Each has a specific responsibility.
Give repeated decisions a home
Type sizes, spacing, colours and control positions recur across the website. Storing these decisions as shared tokens makes them easier to apply consistently. A new page can use the same outer guides, text hierarchy and accent colour as the existing work.
The responsive rules belong to that foundation too. Changing the available width may change the arrangement, but the relationship between a title, its image and its supporting text should still feel intentional. The system describes those relationships across a range of screens instead of relying on a single ideal frame.
Reuse the behaviour as well as the shape
A familiar back button should feel familiar wherever it appears. Its arrow, hover response, focus state and destination all contribute to that expectation. Reusing the actual component keeps those details together.
The same principle applies to navigation, project cards and tables of contents. A new article can inherit the chapter navigation used in a case study, including the active section and anchor behaviour. This gives the new surface a useful starting point and keeps later improvements from having to be repeated by hand.
Let the content stay editable
Sanity holds the material that changes: project text, images, captions, article bodies and selected lists. The site code owns how that material is presented. This gives the editor room to tell a better story while preserving the composition and interaction rules.
An article cover is a good example. It is chosen in the CMS and used both in the Notes list and on the article page. Its proportions, alternative text and crop travel with it. The renderer can reserve the right amount of space before the image loads, so the page does not have to rearrange itself around a late arrival.
Make room for a real review
A draft and a published page have different roles. A draft gives the editor a place to refine a story and check it in context. Publication makes the finished version available to visitors. Keeping those states distinct is especially useful when an existing article needs a larger revision.
Review works best with the real material: the longer heading, the final image and the actual links. Check the reading order, captions and return journey as well as the opening screen. The small details often reveal where a reusable rule needs to become clearer.
Protect what already works
The site records interface contracts for the parts that need to remain consistent: spacing, control behaviour, transitions, anchors and the separation between public content and editorial preview. These describe what a change needs to preserve.
Tests and visual checks then answer different questions. Automated checks can verify destinations, content and states. A visual review shows whether the composition is comfortable to read and whether the movement feels right. Together they make each addition easier to assess and help the website evolve as one connected experience.