Skip to content

Design System

Live interactive showcase of the By JTT design system. Every component, token, and interaction pattern.

0

Interactive Components

interaction

Stateful UI components with hover, active, and focus states. Built with React hooks for real-time interactivity.

Accent
#f72585
Secondary
#4361ee
Success
#06d6a0
Warning
#ffd166
Error
#ef476f
Bg
#0a0a0b
Surface
#121214
Border
#1e1e22

Color System

visual

Curated color palette with semantic naming. Every color meets WCAG AA contrast ratios against the dark background.

Glass Panel

This panel uses backdrop-filter: blur(12px) combined with a semi-transparent background to create the glass effect. It maintains readability while adding visual depth to the interface.

Glass Morphism

visual

Modern glass-panel effect using backdrop-filter blur and semi-transparent backgrounds. Creates depth without distraction.

The quick brown fox jumps over the lazy dog
12px — Caption (w400)
The quick brown fox jumps over the lazy dog
14px — Body (w400)
The quick brown fox jumps over the lazy dog
16px — Body Large (w400)
The quick brown fox jumps over the lazy dog
20px — H4 (w500)
The quick brown fox jumps over the lazy dog
24px — H3 (w600)
The quick brown fox jumps over the lazy dog
32px — H2 (w600)
The quick brown fox jumps over the lazy dog
48px — H1 (w700)

Typography Scale

system

Systematic type scale from caption to hero. Monospace for code and data, proportional for body and headings.

Scale on Hover
Glow Effect
Border Shift
Background Swap

Transition System

interaction

Consistent 200ms transition on all interactive elements. Border, background, and color transitions for cohesive feel.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Layout System

system

Consistent max-width page container, responsive grid, and spacing scale. Every component fits the system.

6
Components
8
Color Tokens
7
Type Scale
200ms
Transition
12
Grid Columns