SU+L Design Studio

Overview

SU+L Design Studio is an architecture and computational-design practice, and this is its web platform. The public site is a multi-page React application - home, a work gallery with project pages, tools with downloads, a journal and a studio page - over a Django REST API, and the admin behind it manages projects, tools, journal posts, media, messages, newsletter and settings. The whole site is styled from one set of design tokens: colour, typography, spacing, radius and shadow values stored as rows in the API, exposed as CSS custom properties and applied to the document on load. The admin's token editor updates those rows and restyles the live site as it saves, so a brand change is a form edit rather than a deploy. Smooth scrolling runs on Lenis and the hero sits over a Three.js background. Every data call starts from local sample content and swaps in API data when it arrives, which is why the site renders fully with no backend running - and how this cover was captured. The live-edit builder, which selects components on a canvas and edits their styles in place, is scaffolded and documented but not yet wired to real content. Deployment is next.

Engineering highlights

• Eight public routes and thirteen admin routes in one React Router tree, with the admin behind a protected route and an authentication context
• Design tokens as the styling contract: a tokens.css declares the defaults, the Django design_system app stores each token with a category, and a hook writes the live values onto :root
• Graceful degradation built in: every data hook starts from local sample content and swaps in API data when it arrives, so the site renders without a backend
• Django backend split into apps - projects, tools, journal, media library, newsletter, contacts, analytics, pages and design system - each with its own models
• Documentation ahead of code: project overview, routing structure, UI system, database schema, API contracts, deployment and QA plans live in the repository