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

kulanz exists to carry everyday commerce — sales and payments — into books people can trust. The logo tells that story in one line: momentum on the left, a calm name on the right, both moving toward the same finish.

Mark

The lime mark is the forward push — activity leaving the counter and landing where finance can work with it. It should feel decisive and spare: one confident color, one clear direction.

Wordmark

kulanz stays lowercase and steady — the human voice after the motion settles. In brand materials it is set in New Science Medium; in product UI the app keeps its own display typeface.

Lockup

Together they read as a single signature: the mark leads, the name follows, with the spacing and rhythm fixed in the design file. Treat the pair as one identity wherever the brand is visible.

Mark

Lockup

Purpose lockup

kulanz

Wordmark typeface: New Science Medium (design source). Lockup previews above use outlined paths from that design — not live text.

  • 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 mark uses a single lime fill per theme via --logo-mark (aligned with --brand-primary): deeper on light UI, brighter on dark UI.

Light theme

#b3db06

Token: --logo-mark

Dark theme

#d6f358

Token: --logo-mark

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

  • 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

On light backgrounds, use the lime mark 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

On dark backgrounds, place the logo inside a slightly lifted neutral container so the lime edge stays crisp 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.

Typography

Brand · wordmark & lockups

kulanz

New Science Medium — lowercase wordmark, purpose line, and full lockups in brand materials. Prefer SVG or outlined exports from this page so spacing matches the design file.

Product UI

kulanz

Bai Jamjuree — interface, dashboard, and in-app surfaces stay on the product display stack (--font-display). Do not retune the app to New Science; use it only for brand-forward lockups and external assets.

Color · lime + accent ramps

Product UI is anchored on lime primary. Supporting palettes are intentionally saturated so charts, marketing, and feature surfaces stay vivid next to neutrals. Each accent family lists ten stops for light UI (light → dark on sand / white) and dark UI (deep → bright on ink). Teal is retired in brand guidance in favor of these hues. The app consumes shared implementation tokens in styles.css — for example --brand-surface-tint, --brand-border-hover, and --brand-ring-soft — so surfaces stay aligned with this page without duplicating hex values in components.

Lime — primary & mark

Primary buttons, focus rings, calendar selection, hero accents, and the Kulanz mark (single fill per theme).

Light theme

#B3DB06

--brand-primary · --logo-mark

Dark theme

#D6F358

--brand-primary · --logo-mark

Electric violet

Use for: Highlights, feature callouts, charts, and premium emphasis next to lime.

StepLight UI ramp1 = lightest tint · 10 = deepestDark UI ramp1 = deepest on ink · 10 = brightest pop
1
#FAF5FF
#120818
2
#F3E8FF
#1E0B32
3
#E9D5FF
#3B0764
4
#D8B4FE
#5B21B6
5
#C084FC
#7E22CE
6
#A855F7
#9333EA
7
#9333EA
#C084FC
8
#7E22CE
#E9D5FF
9
#6B21B6
#F3E8FF
10
#3B0764
#FAF5FF

Electric sky

Use for: Navigation, links, data viz cool series, and trustworthy interactive chrome.

StepLight UI ramp1 = lightest tint · 10 = deepestDark UI ramp1 = deepest on ink · 10 = brightest pop
1
#F8FAFC
#050A12
2
#F0F9FF
#0C1929
3
#E0F2FE
#075985
4
#BAE6FD
#0369A1
5
#38BDF8
#0284C7
6
#0EA5E9
#0EA5E9
7
#0284C7
#38BDF8
8
#0369A1
#7DD3FC
9
#0C4A6E
#E0F2FE
10
#082F49
#F0F9FF

Hyper magenta

Use for: Labs, beta tags, playful promos, and secondary energy that contrasts lime.

StepLight UI ramp1 = lightest tint · 10 = deepestDark UI ramp1 = deepest on ink · 10 = brightest pop
1
#FDF4FF
#140514
2
#FAE8FF
#3F0D3F
3
#F5D0FE
#701A75
4
#F0ABFC
#A21CAF
5
#E879F9
#C026D3
6
#D946EF
#E879F9
7
#C026D3
#F5D0FE
8
#A21CAF
#FAE8FF
9
#701A75
#FDF4FF
10
#3F0D3F
#FEF7FF

Coral punch

Use for: Destructive actions, validation errors, and urgent attention (pair sparingly with lime).

StepLight UI ramp1 = lightest tint · 10 = deepestDark UI ramp1 = deepest on ink · 10 = brightest pop
1
#FFF1F2
#160608
2
#FFE4E6
#4C0519
3
#FECDD3
#881337
4
#FDA4AF
#BE123C
5
#FB7185
#F43F5E
6
#F43F5E
#FB7185
7
#E11D48
#FDA4AF
8
#BE123C
#FECDD3
9
#881337
#FFE4E6
10
#4C0519
#FFF1F2

Citron wash

Use for: Secondary citrus washes and charts — adjacent to primary lime, not a replacement for --brand-primary.

StepLight UI ramp1 = lightest tint · 10 = deepestDark UI ramp1 = deepest on ink · 10 = brightest pop
1
#F7FEE7
#0F1808
2
#ECFCCB
#1A2E05
3
#D9F99D
#365314
4
#BEF264
#4D7C0F
5
#A3E635
#65A30D
6
#84CC16
#A3E635
7
#65A30D
#BEF264
8
#4D7C0F
#D9F99D
9
#365314
#ECFCCB
10
#1A2E05
#F7FEE7