RED_LAB DESIGN SYSTEM :: v6.0

SebaSOFT Interface Style Guide

This guide defines the visual language, component architecture, and design patterns that maintain consistency, accessibility, and technical precision across the SebaSOFT web experience.

Built on Astro SSG with Tailwind CSS v4, shadcn/ui primitives, and Atomic Design methodology. Primary surfaces use chiseled corners via corner-shape: bevel for a HUD-inspired technical aesthetic.

LOG_ID::SYS PHI 00

Design Philosophy

Brand Personality

  • Modern Cyberpunk: High-tech, industrial aesthetic with technical precision
  • Expert Confidence: Unapologetically technical and high-contrast
  • Industrial Minimalist: Raw utility over decorative flourish

Anti-Patterns (Avoid)

  • Soft SaaS clichés: bubbly UI, rounded corners, pastel gradients
  • Hero-metric templates: oversized vanity numbers with glowy accents
  • Identical card grids: flat, shadow-heavy cards without hierarchy
LOG_ID::SYS COL 01

Color System

Brand Palette

Electric Teal

#2ad5eb

Primary data, active states, interactive elements. Also available as brand-cyan.

Cyber Red

#c5003c

SebaSOFT branding, high-priority alerts, critical data, and danger states.

Cyberpunk Yellow

#f3e600

Technical metadata, system warnings, secondary labels. Replaces the former Industrial Amber slot and remains available through the legacy brand-amber alias.

System Blue

#2871d5

Structural lines, borders, background grids, and inactive UI elements.

Surface & Text

Deep Black

#080101

Main background (bg-main). OLED-optimized base for high contrast.

Main Text

#d5cece

Primary text color (text-main). Warm off-white for readability.

Dim Text

#8ca4bf

Secondary text (text-dim). For metadata and less prominent labels.

LOG_ID::SYS TYP 02

Typography System

Font Families

Orbitron — Headlines and titles. Uppercase, mechanical character for HUD aesthetics.

Sora — Body text and paragraphs. Clean, readable sans-serif for content.

Rajdhani — Labels, metadata, and technical data. Uppercase with wide tracking for system readouts.

[ SYSTEM_READOUT :: 2026-04-26 ]

Hierarchy Rules

  • All h1, h2, h3 elements use Orbitron and are uppercase
  • All label elements use Rajdhani with uppercase and wide tracking
  • Body text defaults to Sora for optimal readability
  • Apply .chisel-font class to force Orbitron on non-heading elements
LOG_ID::SYS CHI 03

Chisel Corner System

The chiseled corner aesthetic is implemented via corner-shape: bevel with clip-path fallback. Top-left and bottom-right corners are beveled to create a technical, HUD-inspired frame language.

chisel-sm

Small chisel (0.48rem) for compact UI elements and cards.

chisel-lg

Large chisel (1.05rem) for prominent panels and sections.

chisel-btn

Button chisel (12px) for interactive controls.

Action Language

All buttons use chisel-btn for consistent corner treatment.

LOG_ID::SYS MOT 04

Motion & Animation

Motion Principles

  • Keep transitions under 300ms for responsiveness
  • Use motion to reinforce hierarchy and user flow
  • Section reveals should clarify scroll progression
  • Respect prefers-reduced-motion for accessibility

CRT Overlay Effects

The CRT Overlay provides subtle flicker and scanline effects to simulate a high-tech diagnostic display.

Flicker animation (animate-flicker) runs at 0.15s intervals with opacity variations between 0.92-0.99.

LOG_ID::SYS ACC 05

Accessibility Standards

WCAG 2.1 AA Compliance

  • Color Contrast: All text meets minimum 4.5:1 contrast ratio for body text, 3:1 for large text
  • Keyboard Navigation: All interactive elements are keyboard accessible with visible focus states
  • Semantic HTML: Proper heading hierarchy, landmark regions, and ARIA labels where needed
  • Reduced Motion: Animations respect @media (prefers-reduced-motion: reduce)
  • Screen Reader Support: Skip links, descriptive labels, and proper ARIA attributes
LOG_ID::SYS ARC 06

Component Architecture

Atomic Design Structure

Components follow Brad Frost's Atomic Design methodology for modularity and scalability:

  • Atoms: Button, Input, Kicker, SectionTitle
  • Molecules: Form groups, card headers, navigation items
  • Organisms: SiteHeader, SiteFooter, Hero, BlogGrid
  • Templates: BaseLayout, page-level composition

Technology Stack

  • Astro 6: SSG with file-system routing
  • React 18: Interactive islands (client:load)
  • Tailwind CSS v4: Utility-first styling via @theme
  • shadcn/ui: Accessible component primitives
  • TypeScript: Strict type checking
LOG_ID::SYS SPC 07

Spacing & Layout

Spacing uses Tailwind's default scale with custom tokens for brand-specific intervals. Layouts use CSS Grid and Flexbox for responsive behavior without breakpoint clutter.

Custom Tokens

  • --space-xl: 2.4rem (section spacing)
  • --chisel-size-lg: 1.05rem
  • --chisel-size-md: 0.68rem
  • --chisel-size-sm: 0.48rem

Grid Overlay

Background uses a 42×42px grid with subtle red tint (rgba(197, 0, 60, 0.02)) to reinforce technical precision and spatial awareness.

LOG_ID::SYS IMP 08

Implementation Notes

Performance First

Static-first architecture with Astro SSG ships zero JavaScript by default. React components are used sparingly as interactive islands only where client-side state is required.

Naming Conventions

  • React/Astro Components: PascalCase.tsx / PascalCase.astro
  • Hooks: useX.ts (camelCase)
  • CSS Classes: kebab-case
  • Environment Variables: VITE_*

HUD Window Pattern

Apply .hud-window class for consistent panel treatment: semi-transparent black background (rgba(8, 1, 1, 0.9)) with system-blue border.