← voltar pra cases

Site NOCCI selo

Cliente
NOCCI
No ar em
nocci.co
Entregáveis
Site institucional + página de cases + i18n
Prazo
7 dias / 2026
Home da NOCCI — manifesto e selo circular
Web · 2026

Site que não vende vídeo.
Carrega posicionamento.

A NOCCI precisava de um site que não fosse catálogo de serviços. O brand OS já dizia: "creative seal", não produtora. O desafio era construir uma plataforma de portfolio que funcionasse como peça editorial — onde o site é a expressão definitiva do território visual.

A escolha foi single-page com hierarquia editorial: hero manifesto, reel de trabalhos selecionados, manifesto-sobre, territórios criativos (não "serviços"), contato direto. A página de cases trata cada projeto como ensaio — categoria, descrição em primeira pessoa, território, abordagem, entrega.

Disponível em três idiomas pra dialogar com mercados Brasil + Europa. Loader com draw do circle logo, grain overlay constante, vídeos como hero — tudo costurado em HTML/CSS/JS puro, sem framework. A linguagem visual replica o brand OS sem cópia direta.

O site

Home, cases e mobile.
Mesma postura.

Home da NOCCI — manifesto, valores e territórios criativos Cases da NOCCI — 8 projetos tratados como ensaio editorial Mobile da NOCCI — mesma hierarquia, mesma postura

role pra ver home, cases e mobile rolando dentro do mockup

Páginas

Três recortes. Mesma linguagem.

Hero da home da NOCCI — Clash Display weight 200, manifesto em uma linha Hero da home — Clash Display weight 200, manifesto em uma linha
Página de cases da NOCCI — categoria + território + entrega Página de cases — categoria + território + entrega
Mobile da home da NOCCI — manifesto preservado Mobile da home — manifesto preservado
Stack

Sem framework. Por princípio.

Stack mínima por princípio: HTML, CSS e JavaScript puros. A NOCCI valoriza ofício e acúmulo — não fazia sentido carregar um framework pra entregar um site que precisa durar. O i18n roda inline com JSON em três idiomas, sem dependência de runtime. O site abre, lê os arquivos locais, troca os textos. O grain overlay e o loader com stroke-draw do logo são feitos só com CSS e SVG.

HTML5 CSS Custom Properties JavaScript vanilla Lenis (smooth scroll) Clash Display + Manrope (Fontshare + Google) i18n inline (EN/PT/ES) Sem build step Vercel deploy-ready
Resultados

Selo recém-fundado. Site pronto.

3 idiomas

EN, PT, ES — dialogando com mercados Brasil + Europa desde o lançamento

0 frameworks

HTML, CSS e JavaScript puros — site que abre rápido e dura

8 cases

Portfolio inicial tratado como ensaio editorial, um projeto por vez

Próximo case

Identidade da NOT YET BRASIL

Próximo case Ver todos