Design System — Team Tris

Colors

Monochrome Terminal Palette

The Trizai design language is pure monochrome — black, white, and shades of gray for a terminal-inspired aesthetic.

Core Palette — Black to White

Black (BG)

#000000

Bg Alt

#0a0a0a

Bg Card

#111111

Bg Hover

#1a1a1a

Surface

#181818

Border

#2a2a2a

Border Light

#333333

Text Muted

#666666

Accent Muted

#888888

Text Secondary

#a0a0a0

Text / Accent

#ffffff

Terminal Dots — The Only Colors

Dot Red (close)

#ff5f56

Dot Yellow (minimize)

#ffbd2e

Dot Green (maximize)

#27c93f

CSS Custom Properties

:root {
  --clr-bg: #000000;
  --clr-bg-alt: #0a0a0a;
  --clr-bg-card: #111111;
  --clr-bg-hover: #1a1a1a;
  --clr-surface: #181818;
  --clr-text: #ffffff;
  --clr-text-secondary: #a0a0a0;
  --clr-text-muted: #666666;
  --clr-border: #2a2a2a;
  --clr-border-light: #333333;
  --clr-accent: #ffffff;
  --clr-accent-muted: #888888;
  --clr-dot-red: #ff5f56;
  --clr-dot-yellow: #ffbd2e;
  --clr-dot-green: #27c93f;
  --font-mono: 'JetBrains Mono', monospace;
  --text-gradient: linear-gradient(135deg, #ffffff 0%, #aaaaaa 100%);
}
        

Typography

JetBrains Mono — Terminal First

JetBrains Mono throughout — a clean, technical monospace font for a terminal-inspired brand. No other fonts needed.

Heading 1 Team Tris

Heading 2 Section Title

Heading 3 Card Title

Body The quick brown fox jumps over the lazy dog. Body text at 16px with a comfortable line height of 1.6 for readability.

Small Secondary text at 0.85rem in muted gray

Mono const mastery = true;

Label Section Label

Font Loading

body {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}
h1, h2, h3, h4 {
  font-family: 'JetBrains Mono', monospace;
}
        

Components

UI Component Library

Reusable components with consistent styling, hover effects, and responsive behavior — all in monochrome terminal aesthetic.

Primary Button

White-filled CTA with hover outline effect.

Info Card

Content card with white top accent border and hover lift.

Card Title

Card description text here.

Chips & Tags

Inline metadata labels with border styling.

Roles/frontend.md config New

Role Card

Clickable role card with icon, hover border effect.

Frontend Developer

Stat Card

Metric display card with bold number.

19

Roles

Progress Bar

Scroll progress indicator with white fill.

65% scroll progress

Effects

Visual Effects Library

CSS-powered effects that give Trizai its distinctive terminal-inspired visual identity.

Glass Card

backdrop-filter blur + semi-transparent bg

Mesh BG

Animated radial gradients

Tilt Shine

Hover-revealed diagonal highlight

White Glow

Subtle white glow — terminal minimalist

Key CSS Classes

/* Glass morphism */
.glass-card {
  background: rgba(17,17,17,0.8);
  backdrop-filter: blur(12px);
  border: 1px solid var(--clr-border);
}

/* Hover lift */
.tilt-card:hover {
  transform: translateY(-2px);
}

/* Starfield (subtle dots) */
.starfield::after {
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.1), transparent);
}
        

Animations

Motion Design

Smooth, purposeful animations that enhance the user experience without being distracting.

Fade In Up

Elements fade and slide up when scrolled into view.

.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
          

3D Float

Gentle floating animation on hero badges and cards.

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
          

Mesh Shift

Slow-moving radial gradients for depth.

@keyframes meshShift {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
          

Pulse Dot

Pulsing opacity for status indicators (terminal dots).

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
          

Responsive

Breakpoints & Adaptations

Three-tier responsive system with mobile-first approach.

Desktop > 1024px

Full multi-column layouts, extended navigation.

Tablet 768-1024px

2-column grids, condensed spacing, smaller headings.

Mobile < 768px

Single column, slide-in nav drawer, full-width toast.

Breakpoints

/* Mobile first — base styles */
/* ... */

/* Tablets */
@media (max-width: 1023px) {
  .container { padding: 0 20px; }
  .hero h1 { font-size: 2.8rem; }
}

/* Phones */
@media (max-width: 767px) {
  .nav-links { position: fixed; right: -280px; ... }
  .hamburger { display: flex; }
}

/* Small phones */
@media (max-width: 420px) {
  .container { padding: 0 14px; }
}
        

Trizai Design Language