Getting Started

Design System

The visual language of Viana Kit — semantic color tokens, typography scale, and spacing. All values are defined as CSS variables and exposed as Tailwind utility classes.

Logos

Six variants cover all placement contexts. Choose by background color — never recolor a logo with CSS.

Wordmarks

PrimaryLogo

Light backgrounds

DarkLogo

When primary blue is too prominent

WhiteLogo

Dark backgrounds, sidebar

Symbols

PrimarySymbol

Light bg

DarkSymbol

Light bg

WhiteSymbol

Dark bg

Import

import { PrimaryLogo, DarkLogo, WhiteLogo } from "@viana/ui"
import { PrimarySymbol, DarkSymbol, WhiteSymbol } from "@viana/ui"

Colors

Use semantic token classes — never hardcode color values. All tokens adapt automatically in dark mode.

Brand

Primary

bg-primary

Primary Foreground

bg-primary-foreground

Neutrals

Background

bg-background

Foreground

bg-foreground

Muted

bg-muted

Muted Foreground

bg-muted-foreground

Border

bg-border

Input

bg-input

Ring

bg-ring

Surfaces

Card

bg-card

Card Foreground

bg-card-foreground

Popover

bg-popover

Popover Foreground

bg-popover-foreground

Semantic

Secondary

bg-secondary

Secondary Foreground

bg-secondary-foreground

Accent

bg-accent

Accent Foreground

bg-accent-foreground

Destructive

bg-destructive

Destructive Foreground

bg-destructive-foreground

Typography

Viana Kit uses Lato as the default sans-serif font. Use Tailwind's type scale — never set arbitrary font sizes.

Display

The quick brown fox

variant="display"

The quick brown fox

variant="h1"

The quick brown fox

variant="h2"

The quick brown fox

variant="h3"

The quick brown fox jumps

variant="h4"

Lead

The quick brown fox jumps over the lazy dog.

variant="lead"

Body

The quick brown fox jumps over the lazy dog. A quick movement of the lazy fox.

variant="body"

Small

The quick brown fox jumps over the lazy dog.

variant="small"

Muted

The quick brown fox jumps over the lazy dog.

variant="muted"

Mono

const value = 'hello world'

variant="mono"

Radius

Border radius is defined relative to the base --radius token. Use the Tailwind scale — never set arbitrary radius values.

rounded-sm

calc(--radius - 4px)

rounded-md

calc(--radius - 2px)

rounded-lg

--radius

rounded-xl

calc(--radius + 4px)

rounded-full

9999px

Icons

Custom SVG nav icons for the sidebar, and lucide-react for all general-purpose UI icons.

Custom Nav Icons

Viana Kit ships seven navigation icon pairs — each has a default and an active state. They are used exclusively inside AppDashboard nav items. The active state is applied automatically when isActive is set on the nav item.

NameDefaultActive

Dashboard

Site

Devices

Sensor

X-ray

Manifest

Installer

Import

import {
  DashboardIcon, DashboardActiveIcon,
  SiteIcon, SiteActiveIcon,
  // … other pairs
} from "@viana/ui/assets/icons"

These components accept all standard SVGProps. Default size is 24×24 — override with width / height props.

Usage in AppDashboard nav

Pass the icon component (not <Icon />) as the icon field in your nav section. The active/default swap is handled automatically by the sidebar.

const nav = [
  {
    items: [
      { title: "Dashboard", icon: DashboardNavIcon, isActive: true },
    ],
  },
]

Lucide React

All general-purpose icons in Viana Kit come from lucide-react. It is already installed — do not add a second icon library.

Usage

import { Search, Moon, Sun, LayoutGrid } from "lucide-react"

// Inside JSX — always set an explicit size class
<Search className="size-4" />   {/* 16px — inline / button icons */}
<Search className="size-5" />   {/* 20px — sidebar nav icons */}
<Search className="size-6" />   {/* 24px — hero / standalone */}

ClassSizeWhen to useExample

size-312pxBadges, labelsStatus dot

size-416pxButtons, inputs, inlineButton icon

size-520pxSidebar nav, list itemsNav icon

size-624pxHero, standalone calloutsEmpty state

Color

Icons inherit color from the parent's currentColor via their stroke. Set color with a Tailwind text class on the icon or a parent element — never hardcode a fill or stroke color.

<Search className="size-4 text-muted-foreground" />   {/* muted */}
<Search className="size-4 text-primary" />             {/* brand blue */}
<Search className="size-4 text-destructive" />         {/* error red */}

Rules

Always set a size-* class — never rely on the default 24px size.
Do not import from lucide-react/dist — import from the root package.
Do not add a separate icon library (heroicons, phosphor, etc.) — use lucide-react exclusively.
Do not wrap Lucide icons in custom components — use them directly.

Service Applets

Branded app imagery for each Viana service applet. Use these assets wherever a visual identifier for a product or service is needed.

Service Applets

Audience Measurement

Content Effectiveness

Hop Tracking

People Counting

Petra

SAM (Generic)

SAMi For Environment

Shelf Engagement

Traffic Management

Zone Engagement

Apps

Coatro

Journeys

Using tokens in code

All tokens are available as Tailwind utility classes. Reference them directly — do not use hardcoded hex, rgb, or hsl values, and do not override the token block in globals.css.