Design Studio
A no-code studio for reusable page sections, with a responsive styling engine shared by the studio and the editor.
The problem
Designers needed to build branded page sections once and let editors reuse them anywhere, on every screen size, without breaking the design.
What I built
- Studio for heroes, tables of contents, authors, charts, sliders, headers and footers, from scratch or from 38 ready-made designs.
- 40+ element panels with separate desktop, tablet and mobile values for typography, colour, spacing, borders, shadow, size and layout.
- Every override tracked against its design, so editors can adjust a section and restore the original at any time.
- A Swiper-based slider engine with 10 templates: slides per view, arrows, pagination, autoplay, transitions, aspect ratio, focal point and overlays.
- Role-checked design endpoints in NestJS, so only the right people change shared designs.
- Title size
- 56px40px28px
- Columns
- 321
- Padding
- 64px40px20px
- Align
- leftleftcenter
