TACT Design System

Design system inspired by 3ds.com — clean, high-contrast, corporate-tech aesthetic

Colors

Primary

var(--brand-primary)

Accent

var(--brand-accent)

Dark

var(--brand-dark)

Light

var(--brand-light)

Foreground

var(--color-foreground)

Background

var(--color-background)

Muted

var(--color-muted)

Border

var(--color-border)

Typography

Display Heading

text-6xl font-light

Heading 1

text-5xl font-bold

Heading 2

text-4xl font-bold

Heading 3

text-2xl font-semibold

Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

text-base

Small text - Used for captions, labels, and secondary information.

text-sm

Buttons

VARIANTS

SIZES

STATES

Cards

Card with Image

This is a card component with an image, title, and description.

Linked Card

This card is wrapped in a link and has hover effects.

Text Only Card

A card without an image, containing only text content.

Spacing

1 (0.25rem)

2 (0.5rem)

4 (1rem)

6 (1.5rem)

8 (2rem)

12 (3rem)

16 (4rem)

Layout Grid

Responsive Preview

Mobile (360px+)

Tablet (768px+)

Desktop (1024px+)

Resize your browser window to see responsive behavior across all components. The design system is optimized for mobile (360px), tablet (768px), and desktop (1024px+) viewports.