Surora: brand & web
A bilingual studio identity runs from a gradient Arabic-English lockup through feed carousels and motion into a long landing page, presented inside a fixed scroll preview so the story stays scannable.
The Challenge
Full-length site screenshots tend to bury the rest of a case study. The page had to preserve the site's full fidelity without forcing an endless vertical scroll.
The Approach
Logos and social posts sit in their own section before the site block. The full landing page then lives inside an interactive scroll frame that can be explored in place, without leaving the case study.
The Outcome
One case-study page covers identity, feed, and web story, with pacing that reads cleanly on phone and desktop.
Primary lockup · bilingual by design
Sub-mark · the wink inside «surora»
The primary lockup pairs a bold Arabic mark with a gradient English wordmark, balanced so both languages lead the frame together.
A sub-mark hides a quiet wink inside «surora», scaled for avatars, app icons, and the tightest brand spaces.
Social & feed compositions
Feed compositions carry the identity into carousels and vertical motion, built at the exact sizes each platform expects.
Swipe left or right to change slides, or use the arrows.
Slide 1 of 5
Surora × Miss Loren · five-slide carousel
The carousel extends the identity into a fashion collaboration across fabrics, signage, and tags, closing on one clear call to action in both languages.
Brand Identity
Swipe left or right to change slides, or use the arrows.
Slide 1 of 4
Why mascots · four-slide carousel
A short carousel builds a mascot story in four simple beats, leaning on character and tone instead of feature lists.
Brand Identity
Every idea · short-form motion
A short vertical reel turns a simple idea into a visible result, paced for silent, thumb-scroll viewing.
Brand Identity
The landing page, top to bottom
The full landing page is shown exactly as a real visitor would see it. Scroll inside the preview below to watch how the colors and sections connect from top to bottom.
Click inside the preview, then scroll down to see the rest of the page. Tab also moves keyboard focus into the preview.
Launching a bold brand site?
When a brand has to travel from identity into social and onto a landing page, the same integrated system is built here from brief to launch.