TetrisUIv0.1.0

Typography

Type scale and font settings. Currently using geist / geist-mono. Change fonts in the Customize panel.

Font Stacks

Sans

Aa Bb Cc 123

var(--font-sans)

Mono

Aa Bb Cc 123

var(--font-mono)

Headings

Operations Dashboard

heading-4848px / 600 / -0.03em

Customer Overview

heading-3232px / 600 / -0.02em

Integration Status

heading-2424px / 600 / -0.015em

Inventory Management

heading-2020px / 600 / -0.01em

QuickBooks Sync

heading-1616px / 600 / -0.01em

Section Header

heading-1414px / 600 / 0

Body

Body text for longer content blocks and descriptions that need more breathing room.

copy-1616px / 400

Default body text used throughout the interface for most content.

copy-1414px / 400

Small body text for compact layouts and secondary information.

copy-1313px / 400

Labels

Button Label
label-1414px / 500
Field Label
label-1313px / 500
CAPTION TEXT
label-1212px / 500

Monospace

const customer = await db.customers.findOne({
  where: { slug: "mezcla" },
  include: { integrations: true },
});

console.log(customer.mrr); // $2,400

Used for code, numeric data in tables, terminal output, and keyboard shortcuts.

Guidelines

Do

  • Max 2 font weights per page (400 + 500, or 400 + 600)
  • Use negative letter-spacing only on headings 20px+
  • Use Geist Mono for code, numbers in data displays
  • Use label weights (500) for buttons and field labels

Avoid

  • Bold (700) body text. Use weight 500 or color contrast.
  • More than 2 font weights on one page
  • Tinted text colors (always use pure neutral grays)
  • Font sizes outside the defined scale