styling-tenzir-ui

name	styling-tenzir-ui
description	Provides Tenzir design system tokens and component specifications. Use when building UI components, styling with CSS/Tailwind, choosing colors, typography, spacing, or implementing buttons, inputs, tags/badges, toasts, and other Tenzir UI elements.

Styling Tenzir UI

This skill provides Tenzir's brand and style guidelines for frontend development.

Contents

• Design System Overview
• Quick Reference
• When to Load References

Design System Overview

Tenzir's design system provides consistent styling across all Tenzir products.

When implementing frontend components, always reference the appropriate section:

Aspect	Reference	Description
Typography	typography.md	Font families, sizes, weights, line heights
Colors	colors.md	Brand colors, semantic colors, neutrals
Spacing	spacing.md	Padding and margin scale
Shadows	shadows.md	Elevation and shadow styles
Border Radius	border-radius.md	Corner radius tokens (always 5px)
Buttons	buttons.md	All button styles (standard, delete, floating)
Dropdown	dropdown.md	Dropdown trigger with chevron
Hyperlinks	hyperlinks.md	Link styling with underline
Segmented Ctrl	segmented-control.md	Toggle between mutually exclusive options
Input Field	input-field.md	Text input with title and states
Search Input	search-input.md	Search field with icon and clear
Checkbox	checkbox.md	Square multi-select control
Radio Button	radio-button.md	Circular single-select control
Toggle Switch	toggle-switch.md	Binary on/off switch
Tag	tag.md	Colored labels for categorization
Badge	badge.md	Small uppercase status indicators
Tab Bar	tab-bar.md	Horizontal navigation tabs
Toast	toast.md	Transient notification messages

Quick Reference

Fonts

• Inter - Corporate font for UI text
• JetBrains Mono - Monospace font for code

Usage Guidelines

1. Always use design tokens - Never hardcode pixel values; use the token names (e.g., text-sm, text-base)
2. Respect the type scale - Use the defined sizes; don't create custom sizes
3. Match weight to purpose - Use semi-bold for headings, medium for emphasis, regular for body text
4. Apply letter-spacing - Larger text sizes (2xl+) require negative letter-spacing

Spacing

• Scale: 0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 10, 16, 20
• Base unit: 4px (1 = 0.25rem = 4px)
• Common: p-2 (8px) for inputs, p-4 (16px) for containers, gap-4 (16px) for sections

Colors

• Primary: Blue (#0A54FF) and Green (#29E06C)
• Neutrals: 11-shade grey scale from neutral-800 (black) to neutral-50 (white)
• Semantic: Success (green), Warning (yellow), Error (red)
• Graph colors: Blue, Lightblue, Purple, Pink, Orange, Yellow (in order)

Shadows

• shadow-l - Sidepanels and modals (highest elevation)
• shadow-m - Popups
• shadow-s - Tooltips and toasts
• shadow-xs - Subtle elevation (lowest)

Buttons

• Primary - Solid blue (blue-500), main actions
• Secondary - Outlined (neutral-250 border), alternative actions
• Tertiary - Text-only, low-emphasis actions
• Sizes: XS (24px), S (28px), M (32px), L (36px)

Inputs

• Input Field - M (32px), L (36px) heights; neutral-100 background
• Search - 32px height with search icon and clear button
• Checkbox - 16px square, 5px radius
• Radio Button - 16px circle
• Toggle Switch - 32x20px with sliding knob
• Focus ring - 3px primary-200 for inputs, 2px for controls

Tags & Badges

• Tag - 24px height, 9 colors, add/remove variants
• Badge - 16px height, 8px uppercase text, 9 colors (same palette as tags)

Navigation

• Tab Bar - 48px height, 2px active indicator, notification counter support

Feedback

• Toast - 48px min-height, shadow-s, optional icon/subtitle/button/progress bar

CSS Custom Properties Naming Convention

When implementing the design system in CSS, use the --tnz- prefix for all custom properties:

:root {
  /* Typography */
  --tnz-font-sans: "Inter Variable", "Inter", system-ui, sans-serif;
  --tnz-font-mono: "JetBrains Mono Variable", "JetBrains Mono", monospace;

  /* Font Sizes */
  --tnz-text-xxs: 0.625rem; /* 10px */
  --tnz-text-xs: 0.75rem; /* 12px */
  --tnz-text-sm: 0.875rem; /* 14px */
  --tnz-text-base: 1rem; /* 16px */
  --tnz-text-lg: 1.125rem; /* 18px */
  --tnz-text-xl: 1.25rem; /* 20px */
  --tnz-text-2xl: 1.5rem; /* 24px */
  --tnz-text-3xl: 1.875rem; /* 30px */
  --tnz-text-4xl: 2.25rem; /* 36px */
  --tnz-text-5xl: 3rem; /* 48px */

  /* Border Radius - 5px is the standard */
  --tnz-radius: 5px;

  /* Spacing Scale (base unit: 4px) */
  --tnz-space-0: 0;
  --tnz-space-0-5: 0.125rem; /* 2px */
  --tnz-space-1: 0.25rem; /* 4px */
  : ; 
  : ; 
  : ; 
  : ; 
  : ; 
  : ; 
  : ; 
  : ; 
  : ; 
  : ; 
  : ; 

  
  :    - ,    - ;
  :    - ,    - ;
  :    - ,    - ;
  :    - ,    - ;

  
  :  ease;
  :  ease;
  :  ease;

  
  
  : ;
  : ;
  

  
  : ;
  : ;
  : ;
  
}

Important: Always use design tokens via CSS custom properties. Never hardcode values like font-family: 'Inter' or border-radius: 5px - use var(--tnz-font-sans) and var(--tnz-radius) instead.

When to Load References

Load the specific reference file when you need detailed specifications:

• Working on typography? Read typography.md
• Implementing colors? Read colors.md
• Adding shadows/elevation? Read shadows.md
• Building buttons? Read buttons.md
• Adding spacing? Read spacing.md