3cosystem
Design System

The Meaning of "3"

R3SET Enterprises is a Delaware B-Corp. The numeral "3" in every surface name carries meaning across three dimensions — and is the visual thread tying the ecosystem together.

Architecture — Endorsed Brand Model

User Journey Pipeline

The "3" Naming Convention

Pattern: [PREFIX]3[SUFFIX] — the "3" replaces a vowel or acts as the word's structural hinge. These rules are non-negotiable.

Logo Construction

All 11 Surface Palettes

Each surface defines tokens mapping to --l-* CSS custom properties. Click any swatch to copy its hex value. Primary colors meet WCAG AA on their dark backgrounds.

Font System

General Sans is the ecosystem default. M3ET uses Cabinet Grotesk + Satoshi for its warm, premium networking personality. All fonts are loaded via Fontshare.

Type Scale (Major Third — 1.25×, base 16px)

Letter Spacing Rules

4px Base Unit

All spacing values are multiples of 4. The grid uses 12 columns on desktop, 8 on tablet, 4 on mobile. Content max-width is 1200px, centered with auto margins.

Layout Grid

UI Components

All components read from --l-* tokens, never hardcoded hex values. Tokens auto-adapt per surface context via data-surface attribute.

Buttons

Cards

Badges

Input

Avatar

Motion System

All animations use the standard easing curves. Reduced motion must be respected. Never apply scroll-behavior: smooth globally — use it only for programmatic anchor navigation.

Easing Curves

Duration Scale

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Stagger: 50ms per item, cap at 200ms for lists > 5 items */
.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
.list-item:nth-child(4) { animation-delay: 150ms; }
.list-item:nth-child(5+) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* Fade is the only allowed fallback — never skip entirely */
  .fade-transition { transition: opacity 150ms ease !important; }
}

Writing for the 3cosystem

The parent R3SET voice is confident, warm, cooperative, and direct. Each surface adapts tone while maintaining shared vocabulary and core values.

Per-Surface Tone

WCAG 2.2 AA Minimum

Accessibility is non-negotiable across all surfaces. AAA is the target for body copy. All primary colors meet at minimum AA on their dark backgrounds.

Non-Negotiable Consistency

These 11 rules apply to every surface without exception. They ensure the 3cosystem feels cohesive even as individual surfaces express distinct personalities.

Dark / Light Theme System

Dark mode is the default for landing and login pages. In-app respects prefers-color-scheme. The lightness inversion formula generates light-mode starting points from any dark token.

[data-surface="surface-id"] {
  --l-primary:       #XXXXXX;
  --l-primary-dark:  #XXXXXX;
  --l-primary-light: #XXXXXX;
  --l-primary-glow:  rgba(R,G,B, 0.12);

  --l-surface-dark:  #XXXXXX; /* Page bg */
  --l-surface:       #XXXXXX; /* Card bg */
  --l-surface-2:     #XXXXXX; /* Nested */
  --l-border:        #XXXXXX;

  --l-text:          #XXXXXX;
  --l-text-muted:    #XXXXXX;

  /* Semantic (derived) */
  --l-focus-ring:    var(--l-primary);
  --l-btn-primary-bg: var(--l-primary);
}

function useTheme() {
  const [theme, setTheme] = useState(
    () => localStorage.getItem('r3set-theme')
      ?? (window.matchMedia(
            '(prefers-color-scheme: dark)'
         ).matches ? 'dark' : 'light')
  );

  useEffect(() => {
    document.documentElement
      .setAttribute('data-theme', theme);
    localStorage.setItem('r3set-theme', theme);
  }, [theme]);

  return {
    theme,
    toggleTheme: () =>
      setTheme(t => t === 'dark' ? 'light' : 'dark')
  };
}

Lightness Inversion Formula

[data-theme="light"] {
  --l-surface-dark: #FFFFFF;       /* hsl(0, 0%, 100%) */
  --l-surface:      #F8F8FA;       /* hsl(240, 11%, 97%) */
  --l-surface-2:    #F0F0F5;       /* hsl(240, 14%, 95%) */
  --l-border:       rgba(0, 0, 0, 0.08);
  --l-text:         #1A1A2E;       /* hsl(240, 27%, 14%) */
  --l-text-muted:   #6B6B80;       /* hsl(240, 9%, 46%) */
  /* Primary colors are UNCHANGED across themes */
}

:root {
  --l-primary:      #DE0201;
  --l-primary-dark:  #B50100;
  --l-primary-light: #FF6B6A;
  --l-primary-glow:  rgba(222, 2, 1, 0.12);
  --l-surface-dark:  #0E0F12;
  --l-surface:       #15161A;
  --l-surface-2:     #1C1D24;
  --l-border:        #2A2B36;
  --l-text:          #EDEDF0;
  --l-text-muted:    #8B8C99;
}