Components

Live previews of brand components. These render from the same source code as the product — they're always current.

Icon

import { EnvaraIcon } from '@/brand'

Variants × Sizes

48px

28px

16px

Light

Dark

Teal

Logo

import { EnvaraLogo } from '@/brand'

Size Presets

envara

On Dark Background

envara

Icon Only

Usage in Code

Import

// Named imports from the brand barrel
import { EnvaraIcon, EnvaraLogo, colors, semantic } from '@/brand'
 
// Or import specific modules
import { EnvaraIcon } from '@/brand/components/envara-icon'
import { colors } from '@/brand/tokens'

In Components

function AppHeader() {
  return (
    <header className="flex items-center gap-4 p-4">
      <EnvaraLogo size="sm" />
      <nav>{/* ... */}</nav>
    </header>
  )
}

In Styles (via Tailwind)

// tailwind.config.ts
import { tailwindColors } from '@/brand/tokens'
 
export default {
  theme: {
    extend: {
      colors: { envara: tailwindColors },
    },
  },
}
 
// Then in components:
<button className="bg-envara-teal text-white">Get started</button>
<p className="text-envara-slate">Secondary text</p>

For Email / Non-React

import { getIconSvg } from '@/brand'
 
// Returns raw SVG string
const svg = getIconSvg('dark', 32)

Voice & Tone Overview