Marca
Logos, símbolo, cores e diretrizes da marca Blips, com download dos arquivos oficiais.
A identidade da Blips gira em torno do b-mark e do amarelo #FCBA28. Use os
ativos oficiais abaixo — não redesenhe nem recolora o símbolo.
Logo
O componente <Logo/> (do pacote @blips/brand) renderiza a marca em SVG
inline, vetorial e recolorível. Três variantes:
"use client";
import { Logo } from "@blips/brand";
export default function LogoFull() {
return <Logo variant="full" className="h-10" />;
}
A variante mark herda a cor via currentColor — combine com utilitárias de
texto do tema:
"use client";
import { Logo } from "@blips/brand";
export default function LogoRecolor() {
return (
<div className="flex items-center gap-6">
<Logo variant="mark" className="size-12 text-primary" />
<Logo variant="mark" className="size-12 text-foreground" />
<Logo variant="mark" className="size-12 text-muted-foreground" />
</div>
);
}
"use client";
import { Logo } from "@blips/brand";
export default function LogoMark() {
return <Logo variant="mark" className="size-16 text-primary" />;
}
"use client";
import { Logo } from "@blips/brand";
export default function LogoMarkCircle() {
return <Logo variant="mark-circle" className="size-16" />;
}
API
No full, o círculo e o "b" são fixos (amarelo + branco) e o wordmark usa
currentColor, então o texto adapta a light/dark sozinho.
Animação — draw-on
O b-mark se preenche e drena (efeito trim-path / "draw in/out"): a cor
entra como uma progress bar ao longo da espinha da marca, dentro de um sulco
recessado (a marca em muted com inner shadow), segura, e drena de volta — em
loop.
"use client";
import { LogoLoader } from "@blips/brand/logo-loader";
// O draw in/out empacotado como <LogoLoader> (de @blips/brand): sem props =
// indeterminado (loop); progress (0–100) = determinado; disabled = marca cheia
// estática em muted.
export default function LogoDrawOn() {
return (
<div className="flex flex-wrap items-end justify-center gap-10">
<figure className="m-0 flex flex-col items-center gap-3">
<LogoLoader className="size-20" />
<figcaption className="font-mono text-muted-foreground text-xs">
indeterminado
</figcaption>
</figure>
<figure className="m-0 flex flex-col items-center gap-3">
<LogoLoader className="size-20" progress={65} />
<figcaption className="font-mono text-muted-foreground text-xs">
progress={"{65}"}
</figcaption>
</figure>
<figure className="m-0 flex flex-col items-center gap-3">
<LogoLoader className="size-20" disabled />
<figcaption className="font-mono text-muted-foreground text-xs">
disabled
</figcaption>
</figure>
</div>
);
}
Empacotado como <LogoLoader> (@blips/brand/logo-loader) — o exemplo
mostra os três estados:
Cor via text-* (padrão text-primary); tamanho via className (padrão size-12).
O truque para ficar 100% idêntico ao símbolo oficial: os traços não são a
logo — eles são uma máscara animada sobre o MARK_PATH real preenchido.
Conforme a máscara cresce (via stroke-dashoffset com pathLength={1}), revela
a marca de verdade, então toda a espessura é a oficial e o frame cheio é exato.
A máscara usa stroke-linecap: butt (frente reta → 1% de progresso = 1% real) e
a linha-guia do "b" é estendida nas pontas para o cap reto cobrir as terminações
arredondadas no 100%; o excesso é recortado pela própria marca.
As duas linhas-guia (de @blips/brand) — amarelo = traço do "b"
(MARK_STROKE_PATH), escuro = círculo interno (MARK_INNER_STROKE_PATH):
"use client";
import {
MARK_INNER_STROKE_PATH,
MARK_PATH,
MARK_STROKE_PATH,
MARK_VIEWBOX,
} from "@blips/brand";
// As linhas-guia (espinhas) que dirigem o draw-on, visíveis sobre a marca
// esmaecida: amarelo = traço do "b" (MARK_STROKE_PATH), escuro = círculo
// interno (MARK_INNER_STROKE_PATH). Em produção elas são a máscara, não pixels.
export default function LogoStrokeGuides() {
return (
<svg
viewBox={MARK_VIEWBOX}
role="img"
aria-label="Linhas-guia do b-mark"
className="size-40"
>
<path
d={MARK_PATH}
fillRule="evenodd"
className="fill-muted-foreground/15"
/>
<path
d={MARK_STROKE_PATH}
fill="none"
className="stroke-primary"
strokeWidth={9}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d={MARK_INNER_STROKE_PATH}
fill="none"
className="stroke-foreground"
strokeWidth={9}
strokeLinecap="round"
/>
</svg>
);
}
Exports
Combine com MARK_PATH e MARK_VIEWBOX. Respeite prefers-reduced-motion
(desative a animação e deixe a marca preenchida). Os dois traços podem preencher
juntos ou com um leve stagger — aqui o círculo interno entra logo depois.
Cores
Downloads
Logos
Símbolo
Favicon & ícones
Diretrizes de uso
- Clear-space: mantenha uma margem livre ao redor do logo de pelo menos a altura do "b".
- Fundos: logo de texto preto sobre fundos claros, texto branco sobre fundos escuros; o círculo amarelo + b branco funcionam em ambos.
- Contraste: garanta contraste suficiente entre o símbolo e o fundo.
- Não faça: distorcer/esticar, recolorir o círculo amarelo, rotacionar,
aplicar sombras/efeitos, ou reconstruir o "b" à mão — use o
<Logo/>ou os arquivos oficiais.