rtr-design-system

name

rtr-design-system

description

RTR (Real-time Robotics) UI/UX Design System — the complete visual language for rtrobotics.com. Use this skill whenever building, modifying, or reviewing any UI component, page, or layout for the RTR website. Trigger on: "phong cách RTR", "RTR style", "design system", "thiết kế UI", "tạo component", "tạo trang mới", "thêm section", "sửa giao diện", "responsive", "dark theme", "clip-corner", or any task that involves writing CSS/Tailwind classes, creating new pages, or styling existing elements in the RTR codebase. Also trigger when the user asks to create a landing page, card, section, or any visual element that needs to match the existing RTR aesthetic. This skill ensures visual consistency across the entire website — every new pixel should feel like it belongs.

RTR Design System — Defense-Grade Precision

RTR's design language draws from HUD (heads-up display) aesthetics — mission control interfaces, cockpit readouts, military-grade equipment dashboards. Every design decision serves a purpose: communicate authority, inspire trust, project technological precision. No decoration for decoration's sake.

The system is dark-only, amber-accented, sharp-cornered, and restrained. If you imagine the intersection of Lockheed Martin's digital presence, Anduril's product pages, and SpaceX mission control — that's the neighborhood. But RTR has its own identity through the amber #F7EC13 accent and the signature clip-corner geometry.

Core Principles

1. Every pixel has a reason. No gradients-for-fun, no shadows-for-depth, no rounded corners because "it looks friendly." If an element doesn't serve communication, remove it.
2. Dark is the canvas. #080808 is home. White text on near-black. The amber accent is a scalpel, not a paintbrush — use it on 1-2 elements per viewport, never more.
3. Sharp geometry signals precision. No border-radius. Clip-corner polygon cuts replace rounded corners. Angular = engineered.
4. Motion is purposeful. Scroll reveals, hover lifts, glow pulses — each has a reason (guide attention, confirm interaction, indicate status). Never animate for delight alone.
5. Typography hierarchy is rigid. Montserrat commands (headings). Be Vietnam Pro explains (body). JetBrains Mono labels (metadata). No mixing roles.

Quick Reference — Design Tokens

For the full token list with CSS custom properties, read references/tokens.md. Below is the working subset you'll use 90% of the time.

Colors

Token	Value	Use
--color-bg-primary	#080808	Page background
--color-bg-secondary	#0F0F0F	Cards, panels
--color-bg-tertiary	#1A1A1A	Elevated surfaces
--color-text-primary	#FFFFFF	Headings, primary text
--color-text-secondary	#BDBDBD	Body text
--color-text-muted	#999999	Captions, metadata
--color-accent	#F7EC13	CTA buttons, highlights, active states
--color-accent-dim	#E0D611	Hover state for accent
--color-accent-glow	rgba(247,236,19,0.15)	Hover background glow
--color-accent-green	#22ff88	Status: active, online, success
--color-accent-orange	#ff6b2c	Secondary accent, warnings
--color-border	rgba(255,255,255,0.06)	Default borders
--color-border-hover	rgba(255,255,255,0.12)	Hover borders
--color-glass	rgba(255,255,255,0.03)	Glass morphism fill

Typography

Role	Font	CSS var
Display / Headings	Montserrat	var(--font-display)
Body / Vietnamese	Be Vietnam Pro	var(--font-body-family)
Monospace / Labels	JetBrains Mono	var(--font-mono)

Scale (use these):

Token	Size	When
--text-display-xl	4.5rem	Hero headlines only
--text-h1	3.75rem	Page titles
--text-h2	3rem	Section headings
--text-h3	1.9rem	Sub-sections
--text-lead	1.5rem	Intro paragraphs
--text-body-lg	1.2rem	Emphasized body
--text-body	1.0625rem	Default body
--text-small	0.9375rem	Secondary info
--text-xs	0.8125rem	Fine print, badges

Always use clamp() for responsive headings: clamp(2rem, 4vw, 3.5rem). Never hardcode a single font size for headlines.

Spacing — Quantum Scale (1.5× progression)

Level	Value	Typical use
spacing-1	0.44rem	Tight gaps (icon-to-text)
spacing-2	0.67rem	Inline spacing
spacing-3	1rem	Base unit, small gaps
spacing-4	1.5rem	Card padding, list gaps
spacing-5	2.25rem	Section internal spacing
spacing-6	3.38rem	Between major blocks
spacing-7	5.06rem	Section separators

Horizontal page padding: clamp(24px, 6vw, 120px) — always fluid, never fixed. Container max-width: 1400px.

Component Patterns

Buttons

Primary CTA (amber):

clip-corner inline-flex items-center gap-1.5
px-4 py-2.5 lg:px-5 lg:py-3
bg-accent text-bg-primary
font-semibold text-[0.75rem] lg:text-[0.8rem] tracking-[0.02em]
hover:translate-y-[-2px] hover:shadow-[0_8px_40px_rgba(247,236,19,0.35)]
transition-all

Amber background, black text, clip-corner cut, hover lifts 2px with amber glow shadow.

Secondary (outline):

inline-flex items-center gap-1.5
px-4 py-2.5 lg:px-5 lg:py-3
bg-transparent text-text-primary
font-medium text-[0.75rem] lg:text-[0.8rem]
border border-border-hover
hover:border-accent hover:text-accent hover:bg-accent-glow
transition-all

Transparent with subtle border, hover reveals accent color + glow.

Icon button:

w-11 h-11 border border-border bg-bg-secondary/90
backdrop-blur-sm flex items-center justify-center
text-text-secondary
hover:border-accent hover:text-accent hover:bg-accent-glow
transition-all

Section Label (monospace header marker)

<span className="font-mono text-[0.7rem] tracking-[0.2em] uppercase text-accent
  flex items-center gap-2">
  <span className="w-1.5 h-px bg-accent" />
  SECTION NAME
</span>

Monospace, uppercase, wide tracking, 6px accent line. Used above every section heading.

Clip-Corner (signature shape)

Instead of rounded-lg, RTR uses polygon clipping:

.clip-corner {
  clip-path: polygon(
    12px 0%, 100% 0%, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 0% 100%, 0% 12px
  );
}

This cuts the top-left and bottom-right corners at 45°. Apply to buttons, cards, images, containers — anything that would normally be rounded.

Border-radius is 0 across the entire system. --radius: 0. If you catch yourself typing rounded-, stop and use clip-corner instead.

Cards / Panels

bg-bg-secondary border border-border
clip-corner p-6
hover:border-border-hover transition-all

Dark surface, barely-visible border, clip-corner, subtle hover border brighten.

Glass Morphism

For floating elements (navbar, tooltips, overlays):

backdrop-blur-[32px] backdrop-saturate-[200%]
bg-ink-900/70 border border-border

Scroll Reveal Animation

Use the ScrollReveal component wrapping content sections:

<ScrollReveal direction="up" delay={0.1}>
  <YourContent />
</ScrollReveal>

Directions: up (Y: 40px), left (X: -40px), right (X: 40px), scale (0.92). Duration 0.8s, triggers once per element, custom easing cubic-bezier(0.16, 1, 0.3, 1).

Noise Texture

A subtle SVG fractal noise overlay at opacity: 0.03 covers the entire page — it adds "film grain" that breaks digital flatness. This is already in globals.css and applies automatically. Don't remove it.

Layout Patterns

Page Section Template

<section className="py-12 lg:py-20">
  <Container>
    <SectionLabel>SECTION NAME</SectionLabel>
    <h2 className="font-display text-[clamp(2rem,4vw,3rem)] font-bold mt-3 mb-6">
      Section Heading
    </h2>
    <p className="text-text-secondary text-body-lg max-w-2xl">
      Description text.
    </p>
    {/* Content */}
  </Container>
</section>

Responsive Grid

grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4
gap-4 sm:gap-6 lg:gap-8

Navbar Awareness

The navbar detects whether the section below it is dark or light via data-section-theme attribute on <section> elements, and switches its own styling (text color, background, logo variant) accordingly. If you create a light-background section, add data-section-theme="light".

Motion & Animation

Easings

Name	Value	Use
ease-out	cubic-bezier(0.16, 1, 0.3, 1)	Default for reveals
ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	Bouncy interactions
ease-inout	cubic-bezier(0.85, 0, 0.15, 1)	Symmetric transitions

Hover Effects

• Buttons: translate-y-[-2px] lift + amber glow shadow
• Cards: border brightens from border to border-hover
• Links: color shifts to accent
• All transitions: transition-all duration-300

Reduced Motion

All animations respect prefers-reduced-motion: reduce — durations drop to 0.01ms. This is handled globally in globals.css. Never override this behavior.

Brand Assets

Located in /public/brand/:

File	Use
rtr-monogram.svg	Small icon (favicon, app icon)
rtr-wordmark-light.svg	Logo text on dark backgrounds
rtr-wordmark-dark.svg	Logo text on light backgrounds
rtr-combined-light.svg	Full logo on dark
rtr-combined-dark.svg	Full logo on light
hera-logo-white.svg	HERA product logo

Logo swap logic in navbar: dark section → light wordmark, light section → dark wordmark.

Partner/client logos: render with filter: invert(1) grayscale(1), remove grayscale on hover.

Accessibility

• Focus ring: 2px solid var(--color-amber-500) with 2px offset on all interactive elements
• prefers-reduced-motion: all animations disabled
• Skip-to-content link: fixed, translates in on focus
• Text contrast: muted text #999999 on #080808 meets WCAG AA for large text. For small text, use --color-text-secondary (#BDBDBD) minimum.

Anti-Patterns — What NOT to Do

1. No rounded corners. Ever. Use clip-corner or leave square.
2. No colorful gradients. If you need a gradient, it's black-to-slightly-less-black.
3. No light backgrounds for main content. White/light is only for contrast sections (rare) marked with data-section-theme="light".
4. No emoji in UI elements. Exception: booth platform (mobile PWA) uses emoji for quick visual cues.
5. No playful fonts. Stick to the 3-font system.
6. No more than 2 accent-colored elements per viewport. Amber is a scalpel.
7. No box-shadow for depth. Use border opacity changes instead. Exception: amber glow on CTA hover.
8. No padding/margin magic numbers. Use the quantum spacing scale or clamp().

Key Files Reference

Purpose	Path
Design tokens (CSS)	src/app/globals.css (lines 9-97)
Container component	src/components/ui/Container.tsx
ScrollReveal component	src/components/ui/ScrollReveal.tsx
SectionLabel component	src/components/ui/SectionLabel.tsx
Navbar (4-state)	src/components/layout/Navbar.tsx
Footer	src/components/layout/Footer.tsx
Brand assets	public/brand/

For the complete CSS custom property reference, read references/tokens.md.