kulanz

Brandkit

A single source of truth for product identity. Use this page to keep naming, color, and typography consistent across interface surfaces and docs.

Logo explanation

The mark is built from interlocking angled shapes to represent reliable movement between systems: sales events in, accounting records out. Keep it uncluttered so the geometry stays legible at a glance.

Mark

Lockup

kulanz

Purpose lockup

kulanz

FINANCIAL TOOLING

kulanz

Wordmark preview in New Astro Soft with fallback fonts.

  • Use the mark with clear space around all sides (at least one mark stroke width).
  • Prefer solid fills on clean backgrounds; avoid gradients, outlines, or shadows on the mark.
  • Do not stretch, rotate, recolor per shape, or crop the symbol.
  • When possible, pair with the lowercase wordmark: kulanz.

Logo color system

The logo mark currently uses a single evergreen tone for all shapes to keep recognition stable across docs and UI contexts.

Primary mark color

Evergreen

#1D695A

Light sample

Dark sample

For monochrome usage (printing, stamping, low-fidelity exports), use a single-color version only: either 100% dark ink on light surfaces or 100% white on dark surfaces.

How to use the lockup

kulanz
  • Use mark-only for compact UI placements (favicon-like contexts, compact nav, icon chips).
  • Use mark + wordmark for headers, footers, and brand-forward surfaces where identity should be explicit.
  • Keep minimum clear space around the full lockup equal to at least the height of the first letter in the wordmark.
  • Maintain aspect ratio; scale proportionally and avoid visual effects that alter silhouette clarity.

Light mode guidance

kulanz

On light backgrounds, use the evergreen mark directly on white or near-white surfaces. Prefer subtle containers (soft border, low-contrast tint) only when needed to separate from busy content.

  • Recommended surfaces: `--surface-strong`, `--sand`, plain white.
  • Avoid placing the mark over saturated brand gradients or noisy illustrations.

Dark mode guidance

kulanz

On dark backgrounds, place the logo inside a slightly lifted neutral container to preserve edge definition and keep the evergreen tone readable at small sizes.

  • Recommended surfaces: `--surface`, `--surface-strong` with a subtle border.
  • If contrast drops in tiny contexts, use a single-color white monochrome fallback.

Core palette

Each swatch includes intent and usage guidance so design and engineering apply color consistently. Legacy token names are shown as implementation references.

  • Violet 600

    --violet · #5b3cc4

    Primary accent for product identity and key highlights.

    Use for: CTAs, feature emphasis, and focused states.

  • Teal 500

    --teal · #1f8a86

    Operational confidence and system health signal.

    Use for: Status indicators, success paths, and service accents.

  • Blue 600

    --blue · #83ADC5

    Navigation and trustworthy interaction color.

    Use for: Links, active navigation, and secondary actions.

  • Cyan 500

    --cyan · #9ec7d9

    Fresh technical highlight to support depth layers.

    Use for: Decorative gradients, supporting accents, and separators.

  • Slate 900

    --sea-ink · #0f172a

    High-contrast text foundation for readability.

    Use for: Body text, headings, and data-heavy UI labels.

  • Slate 50

    --sand · #f8fafc

    Calm base that keeps dense interfaces breathable.

    Use for: Page background and light neutral surfaces.