@ndt-digital/brand

v1.7.1

Published

24 days ago

Biblioteca oficial de marca da NDT digital.

0High
0Medium
0Low

danielarndt0

@ndt-digital/brand

Biblioteca oficial de marca da NDT digital. para projetos de desenvolvimento.

A lib centraliza tokens, dados institucionais, assets e componentes React reutilizáveis da marca.

O que a biblioteca entrega

Cores oficiais da NDT digital.
Fontes oficiais e links de carregamento da fonte.
Links oficiais da empresa.
E-mail de contato oficial.
Variáveis CSS da marca.
Componente React Wordmark.
Componente React PoweredByNdt.
Componente React NdtBrandFontLinks para carregar a fonte oficial.
CSS oficial em @ndt-digital/brand/styles.css para tokens e animações.
Configuração avançada de transições, animações e direção de entrada/saída do underline da Wordmark e do PoweredByNdt.
Tema automático da Wordmark e do PoweredByNdt com tone="auto".
Assets SVG oficiais da marca.
Métodos para obter SVG e Data URI.
Workflows para CI, npmjs e GitHub Packages.

Requisitos

Node.js 24+
npm

Instalação local

npm install

Comandos

npm run dev
npm run build
npm run format
npm run format:check
npm run typecheck
npm run lint
npm run check

O comando check executa:

npm run build && npm run typecheck && npm run lint

Quando usar `dev`, `build` e `check`

Use dev enquanto estiver desenvolvendo a biblioteca:

npm run dev

Esse comando fica em modo watch e recompila a lib quando arquivos de src são alterados.

Use build para gerar a versão final em dist:

npm run build

Use check antes de publicar ou abrir release:

npm run check

Build

npm run build

O build gera a pasta dist com os arquivos publicados pelo package:

dist/
  index.mjs
  index.d.mts
  react.mjs
  react.d.mts
  styles.css

Teste rápido no terminal

Depois do build, teste os métodos principais:

node --input-type=module -e "import { getNdtWebsiteUrl, getNdtGithubUrl, getNdtContactEmail, getNdtColors, getNdtFontNames, getNdtBrand } from './dist/index.mjs'; console.log(getNdtBrand()); console.log(getNdtWebsiteUrl()); console.log(getNdtGithubUrl()); console.log(getNdtContactEmail()); console.log(getNdtColors('light').accent); console.log(getNdtFontNames());"

Resultado esperado:

{
  name: 'NDT digital.',
  shortName: 'NDT',
  wordmark: 'NDT digital.',
  iconmark: 'NDT.',
  website: 'https://ndtdigital.com.br',
  github: 'https://github.com/NDT-Digital',
  contactEmail: '[email protected]'
}
https://ndtdigital.com.br
https://github.com/NDT-Digital
[email protected]
#8b5cf6
{ sans: 'Inter', display: 'Space Grotesk' }

Para testar a exportação React:

node --input-type=module -e "import { Wordmark, PoweredByNdt, NdtBrandFontLinks, NdtWordmarkSvg, NdtIconSvg } from './dist/react.mjs'; console.log(typeof Wordmark); console.log(typeof PoweredByNdt); console.log(typeof NdtBrandFontLinks); console.log(typeof NdtWordmarkSvg); console.log(typeof NdtIconSvg);"

Resultado esperado:

function
function
function
function
function

Para testar os assets SVG:

node --input-type=module -e "import { getNdtWordmarkSvg, getNdtIconSvgDataUri } from './dist/index.mjs'; console.log(getNdtWordmarkSvg().slice(0, 80)); console.log(getNdtIconSvgDataUri().slice(0, 40));"

Resultado esperado:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 96"
data:image/svg+xml;charset=utf-8,...

Uso: dados oficiais

import {
  getNdtBrand,
  getNdtColors,
  getNdtContactEmail,
  getNdtGithubUrl,
  getNdtWebsiteUrl
} from "@ndt-digital/brand";

const brand = getNdtBrand();

console.log(brand.wordmark); // NDT digital.
console.log(brand.iconmark); // NDT.
console.log(getNdtWebsiteUrl()); // https://ndtdigital.com.br
console.log(getNdtGithubUrl()); // https://github.com/NDT-Digital
console.log(getNdtContactEmail()); // [email protected]
console.log(getNdtColors("dark").accent); // #a78bfa

Métodos disponíveis

Marca

import { getNdtBrand, ndtBrand } from "@ndt-digital/brand";

getNdtBrand();
ndtBrand;

Retorna os metadados principais da marca:

{
  name: "NDT digital.",
  shortName: "NDT",
  wordmark: "NDT digital.",
  iconmark: "NDT.",
  website: "https://ndtdigital.com.br",
  github: "https://github.com/NDT-Digital",
  contactEmail: "[email protected]"
}

Links oficiais

import { getNdtGithubUrl, getNdtLink, getNdtLinks, getNdtWebsiteUrl } from "@ndt-digital/brand";

getNdtWebsiteUrl(); // https://ndtdigital.com.br
getNdtGithubUrl(); // https://github.com/NDT-Digital
getNdtLinks();
getNdtLink("website");
getNdtLink("github");

Contato oficial

import { getNdtContact, getNdtContactEmail } from "@ndt-digital/brand";

getNdtContactEmail(); // [email protected]
getNdtContact();

Cores oficiais

import { getNdtColor, getNdtColors, ndtColors } from "@ndt-digital/brand";

getNdtColors("light");
getNdtColors("dark");
getNdtColor("accent", "light");
getNdtColor("accent", "dark");
ndtColors;

Temas disponíveis:

"light" | "dark";

Cores disponíveis:

"background";
"surface";
"ink";
"muted";
"line";
"accent";
"accentDeep";
"accentSoft";
"danger";

Fontes oficiais

import {
  getNdtFont,
  getNdtFontFamily,
  getNdtFontNames,
  getNdtFontPreconnectUrls,
  getNdtFonts,
  getNdtFontStylesheetUrl,
  ndtFonts
} from "@ndt-digital/brand";

getNdtFontNames();
getNdtFonts();
getNdtFont("sans");
getNdtFont("display");
getNdtFontFamily("sans");
getNdtFontFamily("display");
getNdtFontStylesheetUrl();
getNdtFontPreconnectUrls();
ndtFonts;

Fontes oficiais:

Inter
Space Grotesk

A Wordmark usa Space Grotesk como fonte oficial. A lib não embute arquivos de fonte, mas fornece URL de stylesheet, URLs de preconnect e o componente NdtBrandFontLinks para carregamento em projetos React/Next.

Variáveis CSS

import { getNdtCssText, getNdtCssVariables } from "@ndt-digital/brand";

getNdtCssVariables("light");
getNdtCssVariables("dark");
getNdtCssText("light");
getNdtCssText("dark");

Assets SVG

import {
  getNdtIconSvg,
  getNdtIconSvgDataUri,
  getNdtSvgAssets,
  getNdtWordmarkSvg,
  getNdtWordmarkSvgDataUri
} from "@ndt-digital/brand";

getNdtWordmarkSvg();
getNdtIconSvg();
getNdtWordmarkSvgDataUri();
getNdtIconSvgDataUri();
getNdtSvgAssets();

A regra visual dos assets é:

Wordmark: NDT digital.
Iconmark: NDT.

Exemplo:

const wordmarkSvg = getNdtWordmarkSvg({ tone: "dark" });
const iconDataUri = getNdtIconSvgDataUri({
  tone: "dark",
  backgroundColor: "#0b0d13"
});

Tons disponíveis para SVG:

"light" | "dark" | "mono";

Opções disponíveis:

{
  tone?: "light" | "dark" | "mono";
  title?: string;
  inkColor?: string;
  accentColor?: string;
  backgroundColor?: string;
}

Uso: Wordmark React

A Wordmark é um componente React pronto para uso.

Ela é compatível com Server Components do Next.js, pois não usa useState, eventos client-side ou "use client". Os estilos essenciais ficam inline. Para tokens globais e animações de hover/focus, importe @ndt-digital/brand/styles.css no projeto consumidor.

import { Wordmark } from "@ndt-digital/brand/react";

export function HeaderLogo() {
  return <Wordmark size="lg" />;
}

Resultado visual esperado:

NDT digital.

com NDT em peso maior, digital em peso médio e o ponto final na cor de destaque.

Variante curta: `NDT.`

A marca curta oficial é NDT..

Use:

<Wordmark variant="icon" />

Resultado:

NDT.

A variante padrão é:

<Wordmark variant="wordmark" />

Resultado:

NDT digital.

Uso recomendado em Next.js

No app/layout.tsx, padronize o setup da marca assim:

import "@ndt-digital/brand/styles.css";
import { NdtBrandFontLinks } from "@ndt-digital/brand/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR">
      <head>
        <NdtBrandFontLinks />
      </head>
      <body>{children}</body>
    </html>
  );
}

O import de styles.css é o padrão recomendado porque concentra tokens globais, :hover, :focus-visible, underline, glow e prefers-reduced-motion em CSS estático.

Depois use a marca em qualquer componente:

import { Wordmark } from "@ndt-digital/brand/react";

export default function Page() {
  return (
    <main>
      <Wordmark size="xl" />
    </main>
  );
}

Carregamento da fonte oficial

Para carregar a fonte oficial da Wordmark em React/Next, use NdtBrandFontLinks.

import { NdtBrandFontLinks } from "@ndt-digital/brand/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR">
      <head>
        <NdtBrandFontLinks />
      </head>
      <body>{children}</body>
    </html>
  );
}

A Wordmark também tenta usar Space Grotesk como fallback quando as variáveis de fonte não estão definidas:

var(--font-space-grotesk, "Space Grotesk"), var(--ndt-font-display, "Space Grotesk"), ui-sans-serif, system-ui, sans-serif

CSS oficial

Importe uma vez no projeto consumidor:

import "@ndt-digital/brand/styles.css";

Esse arquivo registra variáveis globais, contém os efeitos de hover/focus da Wordmark e do PoweredByNdt e habilita o tone="auto". Sem esse import, a marca ainda renderiza, mas efeitos como hoverEffect="underline", hoverEffect="glow", lift, scale e accent não aparecem visualmente, e o tom automático não acompanha o tema do projeto.

Variáveis registradas:

--ndt-color-background
--ndt-color-surface
--ndt-color-ink
--ndt-color-muted
--ndt-color-line
--ndt-color-accent
--ndt-color-accent-deep
--ndt-color-accent-soft
--ndt-color-danger
--ndt-font-sans
--ndt-font-display

Props da Wordmark

import { Wordmark } from "@ndt-digital/brand/react";

`variant`

Controla a versão da marca.

<Wordmark variant="wordmark" />
<Wordmark variant="icon" />

wordmark: renderiza NDT digital..
icon: renderiza NDT..

`size`

Controla o tamanho da marca.

Aceita presets:

<Wordmark size="xs" />
<Wordmark size="sm" />
<Wordmark size="md" />
<Wordmark size="lg" />
<Wordmark size="xl" />
<Wordmark size="2xl" />

Também aceita valores livres para combinar com textos, títulos, botões e cards:

<Wordmark size="inherit" />
<Wordmark size="1em" />
<Wordmark size="1.25rem" />
<Wordmark size={18} />
<Wordmark size="clamp(1.5rem, 5vw, 4rem)" />

Quando size recebe número, o valor é tratado como pixel:

<Wordmark size={20} /> // 20px

`tone`

Controla o tom visual da marca.

<Wordmark tone="default" />
<Wordmark tone="inverse" />
<Wordmark tone="mono" />
<Wordmark tone="inherit" />
<Wordmark tone="auto" />

default: texto escuro e ponto violeta.
inverse: texto claro e ponto violeta claro, indicado para fundos escuros.
mono: texto e ponto usam currentColor.
inherit: texto usa currentColor e o ponto mantém o violeta oficial.
auto: acompanha o tema light/dark do projeto sem JavaScript client-side.

Tema automático com `tone="auto"`

Use tone="auto" quando a mesma Wordmark precisar se adaptar a fundos claros e escuros:

<Wordmark tone="auto" />

O modo automático é compatível com tema por classe ou atributo:

<html class="dark">
<html class="light">
<html data-theme="dark">
<html data-theme="light">
<html data-mode="dark">
<html data-mode="light">
<html data-color-scheme="dark">
<html data-color-scheme="light">

Sem um tema explícito, a Wordmark usa o modo claro como fallback. Esse comportamento é compatível com projetos em que o light mode é representado pela ausência da classe .dark.

O componente continua compatível com Next.js Server Components: não usa window, useEffect, estado React nem "use client".

As cores automáticas também podem ser personalizadas pelos tokens semânticos da biblioteca:

:root {
  --ndt-color-ink: #10121a;
  --ndt-color-accent: #8b5cf6;
  --ndt-color-accent-deep: #6d28d9;
}

.dark {
  --ndt-color-ink: #e9eaf0;
  --ndt-color-accent: #a78bfa;
  --ndt-color-accent-deep: #c4b5fd;
}

`clickable`

Quando true, renderiza a Wordmark como link.

<Wordmark clickable />

Por padrão, leva para:

https://ndtdigital.com.br

`href`

Define uma URL customizada quando clickable está ativo.

<Wordmark clickable href="https://github.com/NDT-Digital" />

`target` e `rel`

Controlam o comportamento do link quando clickable está ativo.

<Wordmark clickable target="_self" />
<Wordmark clickable target="_blank" rel="noreferrer" />

`hover`

Ativa animação no hover/focus.

<Wordmark hover />

Quando clickable é true, o hover fica ativo automaticamente, salvo se for configurado de outra forma no componente.

`hoverEffect`

Controla o efeito visual do hover.

<Wordmark hover hoverEffect="lift" />
<Wordmark hover hoverEffect="scale" />
<Wordmark hover hoverEffect="glow" />
<Wordmark hover hoverEffect="accent" />
<Wordmark hover hoverEffect="underline" />
<Wordmark hover hoverEffect="none" />

Efeitos disponíveis:

lift: eleva levemente a marca.
scale: aumenta levemente a marca.
glow: adiciona brilho sutil.
accent: destaca a cor de acento.
underline: anima uma linha abaixo da marca.
none: desativa efeito visual.

Os efeitos de hover são aplicados por @ndt-digital/brand/styles.css.

`hoverAccentColor`

Sobrescreve a cor de destaque no hover.

<Wordmark hover hoverAccentColor="#c4b5fd" />

`hoverInkColor`

Sobrescreve a cor do texto no hover.

<Wordmark hover hoverInkColor="#ffffff" />

`transitionDurationMs`

Controla a duração da transição em milissegundos.

<Wordmark hover transitionDurationMs={240} />

`transitionTimingFunction`

Controla a curva de aceleração da transição.

<Wordmark hover transitionTimingFunction="cubic-bezier(0.22, 1, 0.36, 1)" />

Valor padrão:

ease

`transitionDelayMs`

Controla o atraso da transição em milissegundos.

<Wordmark hover transitionDelayMs={80} />

Valor padrão:

Configuração dos transforms de hover

A Wordmark permite customizar os transforms usados pelos efeitos lift, scale, glow e pelo ponto final.

<Wordmark
  hover
  hoverEffect="lift"
  hoverLiftTransform="translateY(-0.12em)"
/>

<Wordmark
  hover
  hoverEffect="scale"
  hoverScaleTransform="scale(1.06)"
/>

<Wordmark
  hover
  hoverEffect="glow"
  hoverGlowTransform="translateY(-0.05em)"
/>

<Wordmark
  hover
  hoverDotTransform="translateY(-0.08em) scale(1.12)"
/>

Props disponíveis:

hoverLiftTransform?: string;
hoverScaleTransform?: string;
hoverGlowTransform?: string;
hoverDotTransform?: string;

Valores padrão:

hoverLiftTransform = "translateY(-0.08em)";
hoverScaleTransform = "scale(1.035)";
hoverGlowTransform = "translateY(-0.04em)";
hoverDotTransform = "translateY(-0.06em) scale(1.08)";

`hoverGlowFilter`

Controla o filtro aplicado no efeito glow.

<Wordmark
  hover
  hoverEffect="glow"
  hoverGlowFilter="drop-shadow(0 0 0.55em var(--ndt-wordmark-accent))"
/>

Valor padrão:

drop-shadow(0 0 0.35em var(--ndt-wordmark-accent))

Configuração do underline

O efeito underline pode ser ajustado por offset, altura, raio e direção de entrada/saída.

<Wordmark
  hover
  hoverEffect="underline"
  underlineOffset="-0.22em"
  underlineHeight="0.1em"
  underlineRadius={999}
  underlineEnterTransformOrigin="left center"
  underlineExitTransformOrigin="right center"
/>

Props disponíveis:

underlineOffset?: number | string;
underlineHeight?: number | string;
underlineRadius?: number | string;
underlineTransformOrigin?: string;
underlineEnterTransformOrigin?: string;
underlineExitTransformOrigin?: string;

Valores padrão:

underlineOffset = "-0.18em";
underlineHeight = "0.08em";
underlineRadius = 999;
underlineTransformOrigin = "left center";
underlineEnterTransformOrigin = underlineTransformOrigin;
underlineExitTransformOrigin = "right center";

Quando uma prop recebe número, o valor é tratado como pixel.

underlineTransformOrigin foi mantida por compatibilidade. Para controlar a direção real da animação, prefira underlineEnterTransformOrigin e underlineExitTransformOrigin.

Direção de entrada e saída do underline

Para o underline entrar da esquerda para a direita e sair também da esquerda para a direita:

<Wordmark
  clickable
  hoverEffect="underline"
  underlineEnterTransformOrigin="left center"
  underlineExitTransformOrigin="right center"
/>

Esse comportamento funciona porque a linha cresce usando a origem da esquerda no hover e encolhe usando a origem da direita ao sair do hover.

Para entrar e sair da direita para a esquerda:

<Wordmark
  clickable
  hoverEffect="underline"
  underlineEnterTransformOrigin="right center"
  underlineExitTransformOrigin="left center"
/>

Para nascer do centro e sair para o centro:

<Wordmark
  clickable
  hoverEffect="underline"
  underlineEnterTransformOrigin="center center"
  underlineExitTransformOrigin="center center"
/>

Exemplo completo de animação customizada

<Wordmark
  clickable
  hover
  hoverEffect="underline"
  transitionDurationMs={320}
  transitionTimingFunction="cubic-bezier(0.22, 1, 0.36, 1)"
  transitionDelayMs={0}
  hoverAccentColor="#c4b5fd"
  underlineHeight="0.1em"
  underlineOffset="-0.22em"
  underlineEnterTransformOrigin="left center"
  underlineExitTransformOrigin="right center"
/>

`showDigital`

Controla se a palavra digital aparece.

<Wordmark showDigital={false} />

Resultado:

NDT.

Para a marca curta oficial, prefira:

<Wordmark variant="icon" />

`showAccentDot`

Controla se o ponto final aparece.

<Wordmark showAccentDot={false} />

Resultado:

NDT digital

`inkColor`

Sobrescreve a cor do texto.

<Wordmark inkColor="#ffffff" />

`accentColor`

Sobrescreve a cor do ponto final.

<Wordmark accentColor="#a78bfa" />

`fontFamily`

Sobrescreve a família tipográfica usada pela marca.

<Wordmark fontFamily="Inter, sans-serif" />

`gap`

Controla o espaço entre NDT e digital..

<Wordmark gap="0.2em" />
<Wordmark gap={4} />

Quando gap recebe número, o valor é tratado como pixel.

`lineHeight`

Controla a altura de linha.

<Wordmark lineHeight={1} />
<Wordmark lineHeight="1.2" />

`letterSpacing`

Controla o espaçamento entre letras.

<Wordmark letterSpacing="-0.035em" />
<Wordmark letterSpacing="-0.04em" />

`ndtWeight`

Controla o peso do trecho NDT.

<Wordmark ndtWeight={700} />
<Wordmark ndtWeight={800} />

`digitalWeight`

Controla o peso do trecho digital.

<Wordmark digitalWeight={400} />
<Wordmark digitalWeight={500} />
<Wordmark digitalWeight={600} />

`verticalAlign`

Ajusta o alinhamento vertical quando a Wordmark está dentro de texto corrido.

<Wordmark size="1em" tone="inherit" verticalAlign="baseline" />
<Wordmark size="1em" tone="inherit" verticalAlign="middle" />

`className`, `style` e atributos HTML

A Wordmark também aceita propriedades comuns de um span ou a, dependendo do uso, como className, style, title, id e aria-label.

<Wordmark id="brand" title="NDT digital." className="minha-classe" style={{ marginTop: 8 }} />

Exemplos práticos da Wordmark

Header

import { Wordmark } from "@ndt-digital/brand/react";

export function Header() {
  return (
    <header>
      <Wordmark size="lg" />
    </header>
  );
}

Header clicável

import { Wordmark } from "@ndt-digital/brand/react";

export function Header() {
  return (
    <header>
      <Wordmark size="lg" clickable hover hoverEffect="underline" />
    </header>
  );
}

Dentro de um parágrafo

import { Wordmark } from "@ndt-digital/brand/react";

export function FooterText() {
  return (
    <p>
      Desenvolvido por <Wordmark size="1em" tone="inherit" />.
    </p>
  );
}

Dentro de um título

import { Wordmark } from "@ndt-digital/brand/react";

export function HeroTitle() {
  return (
    <h1>
      Produtos da <Wordmark size="1em" tone="inherit" />
    </h1>
  );
}

Em fundo escuro

import { Wordmark } from "@ndt-digital/brand/react";

export function DarkCard() {
  return (
    <section style={{ background: "#0b0d13", padding: 32 }}>
      <Wordmark size="xl" tone="inverse" />
    </section>
  );
}

Adaptando automaticamente ao tema

import { Wordmark } from "@ndt-digital/brand/react";

export function ThemeAwareLogo() {
  return <Wordmark size="lg" tone="auto" />;
}

Com class="dark", data-theme="dark" ou preferência escura do sistema, a Wordmark usa automaticamente as cores para fundo escuro.

Monocromática

import { Wordmark } from "@ndt-digital/brand/react";

export function MonoExample() {
  return (
    <div style={{ color: "#ffffff" }}>
      <Wordmark size="lg" tone="mono" />
    </div>
  );
}

Responsiva

import { Wordmark } from "@ndt-digital/brand/react";

export function ResponsiveLogo() {
  return <Wordmark size="clamp(1.5rem, 5vw, 4rem)" />;
}

Apenas `NDT.`

import { Wordmark } from "@ndt-digital/brand/react";

export function CompactLogo() {
  return <Wordmark variant="icon" />;
}

Sem ponto final

import { Wordmark } from "@ndt-digital/brand/react";

export function NoDotLogo() {
  return <Wordmark showAccentDot={false} />;
}

Hover com linha animada

import { Wordmark } from "@ndt-digital/brand/react";

export function AnimatedLogo() {
  return <Wordmark clickable hover hoverEffect="underline" />;
}

Hover com transição customizada

import { Wordmark } from "@ndt-digital/brand/react";

export function AnimatedLogo() {
  return (
    <Wordmark
      clickable
      hover
      hoverEffect="underline"
      transitionDurationMs={320}
      transitionTimingFunction="cubic-bezier(0.22, 1, 0.36, 1)"
      underlineOffset="-0.22em"
      underlineHeight="0.1em"
    />
  );
}

Uso: PoweredByNdt

O componente PoweredByNdt monta um texto curto com a Wordmark.

import { PoweredByNdt } from "@ndt-digital/brand/react";

export function Footer() {
  return <PoweredByNdt />;
}

Resultado:

Desenvolvido por NDT digital.

Exemplo em footer

import { PoweredByNdt } from "@ndt-digital/brand/react";

export function Footer() {
  return <PoweredByNdt className="mt-2 text-center text-xs text-muted/50" tone="inverse" />;
}

Clicável

<PoweredByNdt clickable />

Por padrão, a Wordmark aponta para:

https://ndtdigital.com.br

Com hover animado

<PoweredByNdt clickable hover hoverEffect="underline" />

Com texto customizado

<PoweredByNdt text="Criado com" />

Resultado:

Criado com NDT digital.

Com link customizado

<PoweredByNdt text="Código por" clickable href="https://github.com/NDT-Digital" />

Com ajuste fino da Wordmark

<PoweredByNdt
  tone="inverse"
  clickable
  hover
  hoverEffect="underline"
  wordmarkProps={{
    gap: "0.18em",
    letterSpacing: "-0.04em"
  }}
/>

Props do PoweredByNdt

`text`

Texto exibido antes da marca.

<PoweredByNdt text="Desenvolvido por" />
<PoweredByNdt text="Criado com" />

`separator`

Separador entre o texto e a Wordmark.

<PoweredByNdt separator=" " />
<PoweredByNdt separator="·" />

`size`

Tamanho da Wordmark interna.

<PoweredByNdt size="1em" />
<PoweredByNdt size="sm" />
<PoweredByNdt size={14} />

`tone`

Tom visual da Wordmark interna.

<PoweredByNdt tone="default" />
<PoweredByNdt tone="inverse" />
<PoweredByNdt tone="mono" />
<PoweredByNdt tone="inherit" />
<PoweredByNdt tone="auto" />

`clickable`, `href`, `target` e `rel`

Controlam o link da Wordmark interna.

<PoweredByNdt clickable />
<PoweredByNdt clickable target="_self" />
<PoweredByNdt clickable href="https://github.com/NDT-Digital" />

`hover` e `hoverEffect`

Controlam o hover animado da Wordmark interna.

<PoweredByNdt hover hoverEffect="lift" />
<PoweredByNdt hover hoverEffect="scale" />
<PoweredByNdt hover hoverEffect="glow" />
<PoweredByNdt hover hoverEffect="accent" />
<PoweredByNdt hover hoverEffect="underline" />

`hoverAccentColor`, `hoverInkColor` e transição

Ajustam cor, duração, easing e delay da animação da Wordmark interna.

<PoweredByNdt
  hover
  hoverEffect="underline"
  hoverAccentColor="#c4b5fd"
  hoverInkColor="#ffffff"
  transitionDurationMs={240}
  transitionTimingFunction="cubic-bezier(0.22, 1, 0.36, 1)"
  transitionDelayMs={0}
/>

Props disponíveis:

hoverAccentColor?: string;
hoverInkColor?: string;
transitionDurationMs?: number;
transitionTimingFunction?: string;
transitionDelayMs?: number;

Configuração avançada da animação interna

O PoweredByNdt repassa para a Wordmark interna as mesmas props avançadas de animação.

<PoweredByNdt
  clickable
  hover
  hoverEffect="scale"
  transitionDurationMs={220}
  transitionTimingFunction="cubic-bezier(0.16, 1, 0.3, 1)"
  hoverScaleTransform="scale(1.06)"
/>

<PoweredByNdt
  clickable
  hover
  hoverEffect="glow"
  hoverGlowFilter="drop-shadow(0 0 0.55em var(--ndt-wordmark-accent))"
/>

<PoweredByNdt
  clickable
  hover
  hoverEffect="underline"
  underlineOffset="-0.22em"
  underlineHeight="0.1em"
  underlineRadius={999}
  underlineEnterTransformOrigin="left center"
  underlineExitTransformOrigin="right center"
/>

Props disponíveis:

hoverLiftTransform?: string;
hoverScaleTransform?: string;
hoverGlowTransform?: string;
hoverGlowFilter?: string;
hoverDotTransform?: string;
underlineOffset?: number | string;
underlineHeight?: number | string;
underlineRadius?: number | string;
underlineTransformOrigin?: string;
underlineEnterTransformOrigin?: string;
underlineExitTransformOrigin?: string;

Direção do underline no PoweredByNdt

Para a linha da Wordmark interna entrar da esquerda para a direita e sair também da esquerda para a direita:

<PoweredByNdt
  clickable
  hoverEffect="underline"
  underlineEnterTransformOrigin="left center"
  underlineExitTransformOrigin="right center"
/>

`wordmarkProps`

Envia props adicionais para a Wordmark interna.

<PoweredByNdt
  wordmarkProps={{
    accentColor: "#a78bfa",
    letterSpacing: "-0.04em"
  }}
/>

`className`, `style` e atributos HTML

O PoweredByNdt aceita propriedades comuns de span.

<PoweredByNdt className="text-xs text-muted/50" style={{ marginTop: 8 }} />

Uso: componentes SVG React

import { NdtIconSvg, NdtWordmarkSvg } from "@ndt-digital/brand/react";

export function BrandAssets() {
  return (
    <div>
      <NdtWordmarkSvg />
      <NdtIconSvg />
    </div>
  );
}

Wordmark SVG

<NdtWordmarkSvg />
<NdtWordmarkSvg tone="dark" />
<NdtWordmarkSvg tone="mono" />
<NdtWordmarkSvg inkColor="#ffffff" accentColor="#a78bfa" />

Iconmark SVG

<NdtIconSvg />
<NdtIconSvg tone="dark" />
<NdtIconSvg tone="mono" />
<NdtIconSvg inkColor="#ffffff" accentColor="#a78bfa" />

Props dos SVGs

Os componentes SVG aceitam props comuns de svg e também:

{
  tone?: "light" | "dark" | "mono";
  title?: string;
  inkColor?: string;
  accentColor?: string;
  backgroundColor?: string;
}

Exemplo:

<NdtIconSvg tone="dark" title="NDT." backgroundColor="#0b0d13" width={96} height={48} />

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@ndt-digital/brand

O que a biblioteca entrega

Requisitos

Instalação local

Comandos

Quando usar dev, build e check

Build

Teste rápido no terminal

Uso: dados oficiais

Métodos disponíveis

Marca

Links oficiais

Contato oficial

Cores oficiais

Fontes oficiais

Variáveis CSS

Assets SVG

Uso: Wordmark React

Variante curta: NDT.

Uso recomendado em Next.js

Carregamento da fonte oficial

CSS oficial

Props da Wordmark

variant

size

tone

Tema automático com tone="auto"

clickable

href

target e rel

hover

hoverEffect

hoverAccentColor

hoverInkColor

transitionDurationMs

transitionTimingFunction

transitionDelayMs

Configuração dos transforms de hover

hoverGlowFilter

Configuração do underline

Direção de entrada e saída do underline

Exemplo completo de animação customizada

showDigital

showAccentDot

inkColor

accentColor

fontFamily

gap

lineHeight

letterSpacing

ndtWeight

digitalWeight

verticalAlign

className, style e atributos HTML

Exemplos práticos da Wordmark

Header

Header clicável

Dentro de um parágrafo

Dentro de um título

Em fundo escuro

Adaptando automaticamente ao tema

Monocromática

Responsiva

Apenas NDT.

Sem ponto final

Hover com linha animada

Hover com transição customizada

Uso: PoweredByNdt

Exemplo em footer

Clicável

Com hover animado

Com texto customizado

Com link customizado

Com ajuste fino da Wordmark

Quando usar `dev`, `build` e `check`

Variante curta: `NDT.`

`variant`

`size`

`tone`

Tema automático com `tone="auto"`

`clickable`

`href`

`target` e `rel`

`hover`

`hoverEffect`

`hoverAccentColor`

`hoverInkColor`

`transitionDurationMs`

`transitionTimingFunction`

`transitionDelayMs`

`hoverGlowFilter`

`showDigital`

`showAccentDot`

`inkColor`

`accentColor`

`fontFamily`

`gap`

`lineHeight`

`letterSpacing`

`ndtWeight`

`digitalWeight`

`verticalAlign`

`className`, `style` e atributos HTML

Apenas `NDT.`

`text`

`separator`

`size`

`tone`

`clickable`, `href`, `target` e `rel`

`hover` e `hoverEffect`

`hoverAccentColor`, `hoverInkColor` e transição

`wordmarkProps`

`className`, `style` e atributos HTML