Sorell for Framer
Dark editorial portfolio
WordPress themes, built from scratch.
I’m Viviane. I build WordPress themes from scratch, from Figma to PHP. Sorell is the latest: twelve demos, native Gutenberg blocks and a 95 performance score on PageSpeed.
About
About me
I studied Systems Analysis and Development and spent a year in systems support. Along the way I started designing interfaces. WordPress is where I get to do both: I draw the theme in Figma, then write it in PHP.
- Education
- Systems Analysis & DevelopmentUniversidade Estácio de Sá · 2023–2025
- Experience
- Systems Support InternInforplace Informática · 2024–2025
- Training
- Full Stack Web BootcampÍmã Tech · 2023
Featured project
Sorell.
A WordPress portfolio theme for creatives, studios, photographers, artists and architects. Twelve demos on one clean foundation, designed and coded from scratch, with no page builder.
Design
Drawn in Figma first: grid, type scale and components, then the twelve demo homes.
12 demos
Editorial Studio, Agency, Film Director, Illustrator and eight more, each with its own home layout, type and colors.
Gutenberg
Native blocks and full-page patterns. Pages are edited in the WordPress editor, with no page builder.
Customizer
Colors and header and footer texts are set in the Customizer. Every demo is checked on phone, tablet and desktop.
Project details
- Role
- UI design and WordPress development
- Built with
- WordPress, PHP, Gutenberg blocks and patterns, Customizer, CSS, JavaScript
- Includes
- 12 demo homes, block patterns and an HTML documentation guide
- PageSpeed
- 95 performance, 100 accessibility, 100 best practices, 92 SEO (demo 1 on mobile, Oct 2026)
- Year
- 2026
Process
How I build a theme.
This is how I built Sorell, step by step.
- 01
I design in Figma
Grid, type scale, colors and components, with the mobile version drawn next to the desktop one.
- 02
I decide what’s editable
Before writing templates I list what the site owner will need to change: texts, colors, menus and page sections.
- 03
I write the templates
PHP templates that follow the WordPress template hierarchy, with shared parts for the header, footer and cards.
- 04
I build blocks and patterns
Sections become Gutenberg blocks and full-page patterns, so pages are put together in the editor instead of in code.
- 05
I test and document
I check every demo on phone, tablet and desktop, then write the documentation with a screenshot of each admin screen.
Why design matters
Design comes first.
I learned UI/UX on my own, by studying references and redrawing interfaces. Every Sorell demo was laid out in Figma before I wrote any PHP, and my Framer templates get the same work on breakpoints and styles. These are frames from those files.
Sorell in Figma, five of the demos
Editorial Studio, Agency, Cinematic Artist, Architecture Studio and Creative Developer, each drawn as a full home page before I coded it.
Sorell in Figma, six more demos
Art Director, Personal Resume, Film Director, Graphic Designer, Object Designer and Product Designer, in the same file and on the same grid.
Form 01 in Framer
The home page of my Form 01 template laid out at the Desktop, Tablet and Phone breakpoints.
Sorell for Framer, breakpoints
The dark Sorell template at Desktop, Tablet and Phone, with Projects and Journal set up as CMS collections.
Sorell for Framer, styles
The text styles, from Display at 92px to Body at 17px, plus the link style and named colors the whole template is built on.
Beyond WordPress
Templates on the Framer Marketplace.
I also design website templates for Framer under the name Code Prismo. Three of them are on sale on the Framer Marketplace.
3 templates published · 2026
All templates by Code Prismo ↗
Contact