/* ===================================================================== ARX OPERATIONS — DESIGN TOKENS The operator behind the content creator. --------------------------------------------------------------------- Import this into any HTML file that uses the ARX system: Then reference variables, e.g. color: var(--arx-orange); ===================================================================== */ /* --- FONTS ---------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Space+Mono:wght@400;700&display=swap'); :root { /* === COLOR SYSTEM ================================================ Three colors. That's it. Restraint is the brand. ----------------------------------------------------------------- */ /* Primary canvas */ --arx-black: #0A0A0A; /* Authority, depth, control. The dominant tone. */ --arx-white: #FAFAF8; /* Clarity, space, confidence. Warm off-white. */ --arx-orange: #FF6A00; /* Precision, signal, activation. The operator's mark. */ /* Functional grays — derived from black, never invented from scratch */ --arx-ink: #0A0A0A; /* alias for body text on light */ --arx-ink-90: #1A1A1A; /* near-black surfaces */ --arx-ink-70: #2E2E2E; /* heavy dividers, dark cards on dark */ --arx-ink-50: #5C5C5C; /* secondary text on light */ --arx-ink-30: #8A8A8A; /* tertiary, metadata */ --arx-ink-15: #C7C6C2; /* dividers on light */ --arx-ink-08: #E6E5E1; /* hairlines, subtle borders */ --arx-ink-04: #F1F0EC; /* low-contrast surface on light */ /* Orange variants — used sparingly, almost never as fill except CTA */ --arx-orange-pressed: #E55D00; /* hover/pressed state on orange CTA */ --arx-orange-tint: #FFE9D9; /* highlight bands, kicker chips */ --arx-orange-ink: #B34A00; /* orange text on light surfaces (rare) */ --arx-orange-on-dark: #FF7A1A; /* slightly lighter for contrast on #0A0A0A */ /* === TYPOGRAPHY ================================================== Three families, each with a job. Never mix outside their roles. ----------------------------------------------------------------- */ /* Families */ --arx-font-display: 'Bebas Neue', 'Impact', 'Arial Narrow Bold', sans-serif; --arx-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --arx-font-mono: 'Space Mono', 'SF Mono', Menlo, Consolas, monospace; /* Display scale (Bebas Neue, condensed uppercase, headlines only) */ --arx-display-xxl: clamp(72px, 11vw, 156px); /* hero hooks */ --arx-display-xl: clamp(56px, 7vw, 96px); /* section headlines */ --arx-display-lg: clamp(40px, 5vw, 64px); /* sub-headlines */ --arx-display-md: 32px; /* card headlines */ --arx-display-sm: 24px; /* small headers */ /* Body scale (DM Sans, sentence case, reading text) */ --arx-body-xl: 22px; /* lead paragraphs, pull quotes */ --arx-body-lg: 18px; /* default body */ --arx-body-md: 16px; /* secondary body */ --arx-body-sm: 14px; /* captions */ --arx-body-xs: 13px; /* dense UI */ /* Label scale (Space Mono, uppercase, tracked, system markers) */ --arx-label-lg: 14px; --arx-label-md: 12px; --arx-label-sm: 11px; /* Weights */ --arx-weight-light: 300; --arx-weight-regular: 400; --arx-weight-medium: 500; --arx-weight-semibold: 600; --arx-weight-bold: 700; /* Line heights */ --arx-lh-display: 0.92; /* tight, condensed */ --arx-lh-tight: 1.15; --arx-lh-snug: 1.35; --arx-lh-body: 1.55; /* reading */ --arx-lh-loose: 1.75; /* Letter spacing */ --arx-tracking-tight: -0.02em; --arx-tracking-normal: 0; --arx-tracking-wide: 0.04em; /* small caps body */ --arx-tracking-wider: 0.12em; /* mono labels */ --arx-tracking-widest: 0.24em; /* tagline-style spacing */ /* === SPACING ===================================================== 8pt grid. Generous whitespace is part of the brand voice. ----------------------------------------------------------------- */ --arx-space-0: 0; --arx-space-1: 4px; --arx-space-2: 8px; --arx-space-3: 12px; --arx-space-4: 16px; --arx-space-5: 24px; --arx-space-6: 32px; --arx-space-7: 48px; --arx-space-8: 64px; --arx-space-9: 96px; --arx-space-10: 128px; --arx-space-11: 192px; /* section breathing room */ /* Container max widths */ --arx-container-sm: 640px; --arx-container-md: 880px; --arx-container-lg: 1200px; --arx-container-xl: 1440px; /* === SHAPE LANGUAGE ============================================== Sharp for containers, rounded for inputs/buttons. The logo is hard squares — surfaces stay hard. Inputs/buttons get a small radius so they feel touchable. ----------------------------------------------------------------- */ --arx-radius-none: 0px; /* cards, sections, panels */ --arx-radius-xs: 2px; /* badges, chips */ --arx-radius-sm: 4px; /* inputs */ --arx-radius-md: 6px; /* buttons */ --arx-radius-lg: 8px; /* modals (rare) */ --arx-radius-pill: 999px; /* tag pills */ /* === BORDERS =================================================== */ --arx-border-hairline: 1px solid var(--arx-ink-08); --arx-border-default: 1px solid var(--arx-ink-15); --arx-border-strong: 1px solid var(--arx-ink-90); --arx-border-orange: 1px solid var(--arx-orange); --arx-border-dark-hairline: 1px solid rgba(255, 255, 255, 0.08); --arx-border-dark-default: 1px solid rgba(255, 255, 255, 0.14); /* === SHADOWS =================================================== ARX is restrained — shadows are subtle, not floaty. ----------------------------------------------------------------- */ --arx-shadow-none: none; --arx-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06); --arx-shadow-md: 0 4px 16px rgba(10, 10, 10, 0.08); --arx-shadow-lg: 0 12px 40px rgba(10, 10, 10, 0.12); --arx-shadow-orange: 0 0 0 1px var(--arx-orange), 0 8px 24px rgba(255, 106, 0, 0.25); /* === MOTION ==================================================== Quick, mechanical, no bounce. Operators don't squish. ----------------------------------------------------------------- */ --arx-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --arx-ease-in: cubic-bezier(0.4, 0, 1, 1); --arx-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --arx-dur-fast: 120ms; --arx-dur-base: 200ms; --arx-dur-slow: 320ms; /* === Z-INDEX =================================================== */ --arx-z-base: 0; --arx-z-raised: 10; --arx-z-sticky: 100; --arx-z-overlay: 500; --arx-z-modal: 1000; --arx-z-toast: 2000; } /* ===================================================================== UTILITY CLASSES Use these as building blocks. Composable, never decorative. ===================================================================== */ /* --- Type primitives ----------------------------------------------- */ .arx-display { font-family: var(--arx-font-display); font-weight: 400; text-transform: uppercase; line-height: var(--arx-lh-display); letter-spacing: var(--arx-tracking-normal); } .arx-display-xxl { font-family: var(--arx-font-display); font-weight: 400; text-transform: uppercase; line-height: var(--arx-lh-display); font-size: var(--arx-display-xxl); } .arx-display-xl { font-family: var(--arx-font-display); font-weight: 400; text-transform: uppercase; line-height: var(--arx-lh-display); font-size: var(--arx-display-xl); } .arx-display-lg { font-family: var(--arx-font-display); font-weight: 400; text-transform: uppercase; line-height: var(--arx-lh-display); font-size: var(--arx-display-lg); } .arx-display-md { font-family: var(--arx-font-display); font-weight: 400; text-transform: uppercase; line-height: var(--arx-lh-tight); font-size: var(--arx-display-md); } .arx-display-sm { font-family: var(--arx-font-display); font-weight: 400; text-transform: uppercase; line-height: var(--arx-lh-tight); font-size: var(--arx-display-sm); letter-spacing: 0.02em; } .arx-body { font-family: var(--arx-font-body); font-weight: 400; line-height: var(--arx-lh-body); font-size: var(--arx-body-lg); } .arx-body-xl { font-family: var(--arx-font-body); font-weight: 400; line-height: var(--arx-lh-snug); font-size: var(--arx-body-xl); } .arx-body-lg { font-family: var(--arx-font-body); font-weight: 400; line-height: var(--arx-lh-body); font-size: var(--arx-body-lg); } .arx-body-md { font-family: var(--arx-font-body); font-weight: 400; line-height: var(--arx-lh-body); font-size: var(--arx-body-md); } .arx-body-sm { font-family: var(--arx-font-body); font-weight: 400; line-height: var(--arx-lh-body); font-size: var(--arx-body-sm); } .arx-body-xs { font-family: var(--arx-font-body); font-weight: 400; line-height: var(--arx-lh-body); font-size: var(--arx-body-xs); } .arx-label { font-family: var(--arx-font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: var(--arx-tracking-wider); font-size: var(--arx-label-md); } .arx-label-lg { font-family: var(--arx-font-mono); text-transform: uppercase; letter-spacing: var(--arx-tracking-wider); font-size: var(--arx-label-lg); } .arx-label-md { font-family: var(--arx-font-mono); text-transform: uppercase; letter-spacing: var(--arx-tracking-wider); font-size: var(--arx-label-md); } .arx-label-sm { font-family: var(--arx-font-mono); text-transform: uppercase; letter-spacing: var(--arx-tracking-wider); font-size: var(--arx-label-sm); } /* --- Theme surfaces ------------------------------------------------ */ .arx-surface-dark { background: var(--arx-black); color: var(--arx-white); } .arx-surface-light { background: var(--arx-white); color: var(--arx-black); } /* --- Body reset ---------------------------------------------------- */ .arx-root { font-family: var(--arx-font-body); font-size: var(--arx-body-lg); line-height: var(--arx-lh-body); color: var(--arx-black); background: var(--arx-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }