Same spirit.
More to feel.
A bold editorial system built around original agency imagery, expressive type and clear interaction.
#F7F5EB
#161712
#C4FF00
#FF6BB5
#6434E8
One connected language.
| Component | Specification |
|---|---|
| Typography | Arial / Helvetica sans paired with Georgia italic. Display 64–154 px fluid; section headings 40–86 px; body 15–21 px. Logo is original image artwork. |
| Spacing & layout | 4.5vw gutters, 1800 px maximum shell, 90 px desktop section rhythm. Mobile ≤760 px: 5.5vw gutters, 55 px section rhythm and stacked columns. |
| Glass controls | 18 px backdrop blur, tinted gradient, bright inner edge, subtle shadow. 50 px primary button height, minimum 44 px target. Saturated lime for primary actions; Paper text on violet. |
| Project card | Asymmetric desktop grid with staggered rows; single-column mobile. Cover crops use object-fit; detailed galleries preserve original artwork proportions. |
| Navigation | Sticky translucent header, active route indicator, disclosure menu with aria-expanded, Escape close and focus return. |
| Scrolling | Native scrolling, thin styled scrollbar and reading-progress line. No scroll hijacking. Motion disabled for prefers-reduced-motion. |
| Forms | Required labels, email validation and local email-draft preparation. No backend or automatic sending. User opens and sends the email themselves. |
| Accessibility | Semantic landmarks, skip link, visible focus, descriptive image alt, aria-pressed filters, live result counts. Reduced-transparency and forced-colors fallbacks. Full assistive-technology audit remains a production task. |
| SEO | Unique title/description and one H1 per page. Review is noindex; production canonical URLs, structured data, sitemap, redirects and localization require approval and implementation. |
| Service-card shader flood | Original WebGL color flow revealed from the cursor on hover. URIBA palette per card. Lazy GPU initialization; render loop stops after exit. Keyboard focus and touch use a static gradient. Card motion toggle defaults to the system reduced-motion preference, with explicit per-page opt-in. Inspired by the public Planes demo; no proprietary Planes code included. |
Original work.
Clear boundaries.
The supplied twelve-page package informs scope and hierarchy. This recreation uses the verified original raster URIBA logo, local original portfolio assets, and the previously approved bold palette and glass interactions. No apparel/POD content is used.
New headline and studio/service copy are design proposals. Journal content is explicitly editorial demonstration. Careers are talent conversations, not active vacancies. Address, phone, studio photos, personal fun facts and unverified outcomes from the supplied package are not asserted.
Six real portfolio projects have local selected-work layouts. Êmm has detailed source artwork and credits; other cases use a deliberately shorter story where final copy or credits are unresolved. The added Bunz identity rounds, KitKat pitch, OMO concepts and Endohub internal revisions from Drive are not represented as approved final work. Mayday/URIBA contribution credits must be confirmed before production.
Ensō cover was fetched from the original website and visually inspected. Its story is adapted from the supplied layout; final credits remain pending. No claim is made that all 90 Drive project folders were visually audited.
Full source and handoff notes ↗ · Drive portfolio analysis ↗