Brand Guidelines
& UI Toolkit

Welcome to the Renitiate Design System. Use this live, interactive toolkit to build consistent, responsive, and highly polished Deep-Tech interfaces while honoring our brand's styling legacy.

1. Core Color Palette

Our legacy brand colors reflect deep-tech complexity, architectural depth, and premium quality. Click on any color block to copy its hex value directly.

Deep Space Purple#2f0644 | var(--primary)

Amber Gold#fdba31 | var(--accent)

Deep Obsidian#1c032a | R&D Dark BG

2. Custom Brand Gradients

Used sparingly for text highlights, hero backdrops, and active button backgrounds to emphasize physical intelligence.

Signature Hero Gradient

CSS: bg-linear-to-r from-[#7711ac] via-[#fdba31] to-[#7711ac]

3. Typography & Hierarchy

We leverage custom web-safe sans-serif fonts to enforce clean technical readability and modern geometric shapes.

Headers (Space Grotesk)

Bridging Physical Intelligence

font-family: Space Grotesk, sans-serif; font-weight: 700;

Technical Readouts (Roboto Mono)

renitiate --compile --target=edge-silicon [Success: compiled 1.8B active states]

font-family: Roboto Mono, monospace; font-weight: 400;

4. Reusable UI Components

These premium, interactive, and responsive components are configured out-of-the-box and can be used on any page.

Interactive BrandButton

<BrandButton 
  text="Explore Products"
  variant="light"
  isIconRotating
  icon={<Compass className="w-5 h-5 text-white" />}
/>

Hover-Highlight Tech Card

Quantization Compilers

Pruning and compiler execution targeting custom domain silicon chips.

<div className="rounded-2xl border border-white/20 p-6 bg-white/5 backdrop-blur-xs text-white transition-all duration-300 hover:border-accent hover:-translate-y-1">
  <div className="w-10 h-10 rounded-lg bg-accent/20 text-accent flex items-center justify-center mb-4">
    <Compass className="w-5 h-5" />
  </div>
  <h4 className="font-bold text-base">Quantization Compilers</h4>
  <p className="text-xs text-white/75 mt-2 leading-relaxed">
    Pruning and compiler execution targeting custom domain silicon chips.
  </p>
</div>

5. Responsiveness & Adaptive Breakpoints

Renitiate strictly enforces standard adaptive grid transitions to protect aesthetics across all viewport sizes.

Mobile (Up to 767px)grid-cols-1 | font sizes clamp

Components stack vertically. Text scales dynamically using clamp functions to avoid screen overflows.

Tablet (768px - 1023px)grid-cols-2 | sm:px-6

Lists adapt to 2 columns. Navigation changes to toggle sliders, and horizontal paddings expand.

Desktop (1024px+)grid-cols-3 or 5 | lg:px-12

Full scale immersive grids. Advanced hover micro-animations and spatial connectors render at 60fps.

Brand Guidelines & UI Toolkit