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:

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 */
  --tnz-space-1-5: 0.375rem; /* 6px */
  --tnz-space-2: 0.5rem; /* 8px */
  --tnz-space-3: 0.75rem; /* 12px */
  --tnz-space-4: 1rem; /* 16px */
  --tnz-space-5: 1.25rem; /* 20px */
  --tnz-space-6: 1.5rem; /* 24px */
  --tnz-space-7: 1.75rem; /* 28px */
  --tnz-space-8: 2rem; /* 32px */
  --tnz-space-10: 2.5rem; /* 40px */
  --tnz-space-16: 4rem; /* 64px */
  --tnz-space-20: 5rem; /* 80px */

  /* Shadows */
  --tnz-shadow-xs: 0px 8px 16px -8px #0e10171a, 0px 3px 6px -3px #0e10171a;
  --tnz-shadow-s: 0px 8px 16px -8px #0e101733, 0px 3px 6px -3px #0e101733;
  --tnz-shadow-m: 0px 10px 20px -8px #0e101733, 0px 4px 8px -6px #0e101733;
  --tnz-shadow-l: 0px 20px 40px -16px #0e101733, 0px 8px 16px -8px #0e101733;

  /* Transitions */
  --tnz-transition-fast: 0.15s ease;
  --tnz-transition-base: 0.2s ease;
  --tnz-transition-slow: 0.3s ease;

  /* Colors - see colors.md for full palette */
  /* Primary Blue */
  --tnz-primary-500: #0a54ff;
  --tnz-primary-600: #0043e0;
  /* ... etc */

  /* Neutrals */
  --tnz-neutral-50: #fdfdfe;
  --tnz-neutral-100: #f7f8fa;
  --tnz-neutral-200: #f0f1f5;
  /* ... etc */
}

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