/* ========================================================================= Repla — shared design tokens ========================================================================= The same file in all three products: ReplaMail, ReplaChat, ReplaTicket. Copy it in whole and do not edit it, except for the ONE block marked "THIS PRODUCT" near the top. Everything else — the greys, the shapes, the shadows, the type — stays identical across the family. That is what makes them look like siblings rather than three unrelated apps. ONE RULE ABOUT THE ACCENT ------------------------- If words touch it, use --rp-accent-strong. If they do not, use --rp-accent. words touch it words do not -> --rp-accent-strong -> --rp-accent a link a progress bar a button with a label on it a focus ring an active tab a border or a dot text inside a badge the logo a selected-row tint Why: teal and amber are too light to carry text. At their normal weight they measure 3.7:1 and 3.2:1 against white, and the standard for normal text is 4.5:1. The -strong step passes in all three products. Indigo would pass either way, but one rule across three products beats a per-product exception that somebody will forget. ========================================================================= */ :root { /* ====================================================================== THIS PRODUCT — the only block that differs between the three. Uncomment one. Leave the rest of the file alone. ====================================================================== */ /* ReplaRank — amethyst. Settled 12 September 2026 by searching the gamut, not by eye. 6.5 from its nearest neighbour (ReplaMail indigo, protanopia) on the trusted views and 6.8 on tritan: above the family floor of 6 on every row, and the best that remains — nothing in sRGB still reaches the target of 8. Numbers and the method are in BRANDING.md. */ --rp-accent: #8760cb; /* decoration only: never under words */ --rp-accent-strong: #6f4caa; /* links, button backgrounds, badge text */ --rp-accent-deep: #573c86; /* a button being hovered */ --rp-accent-soft: #f8f5ff; /* tinted background */ --rp-accent-line: #dccffd; /* border on a tinted background */ --rp-accent-on-dark: #b892ff; /* the accent on a dark surface */ /* ReplaMail — indigo --rp-accent: #4f46e5; --rp-accent-strong: #4338ca; --rp-accent-deep: #3730a3; --rp-accent-soft: #eef2ff; --rp-accent-line: #c7d2fe; --rp-accent-on-dark: #818cf8; */ /* ReplaChat — teal --rp-accent: #0d9488; --rp-accent-strong: #0f766e; --rp-accent-deep: #115e59; --rp-accent-soft: #f0fdfa; --rp-accent-line: #99f6e4; --rp-accent-on-dark: #2dd4bf; */ /* ReplaTicket — amber --rp-accent: #d97706; --rp-accent-strong: #b45309; --rp-accent-deep: #92400e; --rp-accent-soft: #fffbeb; --rp-accent-line: #fde68a; --rp-accent-on-dark: #f0a024; */ /* ====================================================================== SHARED — identical in all three products ====================================================================== */ /* --- the family navy ------------------------------------------------- The sidebar, the headings, the dark half of the logo. This colour is the family, more than the accent is. */ --rp-navy: #14162b; --rp-navy-soft: #1d2040; --rp-navy-text: #a9b0d0; /* text on navy */ /* --- surfaces --------------------------------------------------------- */ --rp-bg: #f6f7fb; /* the page behind everything */ --rp-surface: #ffffff; /* cards, panels, tables */ --rp-surface-2: #fafbfd; /* table headers, quiet fills */ /* --- text ------------------------------------------------------------- The first two carry body text. The third is for small uppercase labels and timestamps only — it measures 3.2:1, which is fine for those and not fine for a sentence. */ --rp-text: #171a2b; /* body */ --rp-text-2: #5a6280; /* secondary, help text */ --rp-text-3: #8a90a8; /* labels and timestamps only */ /* --- lines ------------------------------------------------------------ */ --rp-border: #e5e8f0; /* between rows and cards */ --rp-border-2: #d3d8e6; /* around inputs */ /* --- saying what happened --------------------------------------------- Identical across the family, so green always means the same thing whichever product somebody is looking at. Each is a TEXT colour that also serves as a solid background under white text. Both jobs need 4.5:1, which is why they are a shade darker than the obvious Tailwind-600 choice. The -soft value is the tint each sits on. */ --rp-success: #047857; --rp-success-soft: #ecfdf5; --rp-warning: #b45309; --rp-warning-soft: #fffbeb; --rp-danger: #b91c1c; --rp-danger-soft: #fef2f2; --rp-info: #0369a1; --rp-info-soft: #f0f9ff; /* --- shape ------------------------------------------------------------- Rounded, but not bubbly. 12px is the family's corner. */ --rp-radius: 12px; --rp-radius-sm: 8px; --rp-radius-lg: 18px; /* --- depth ------------------------------------------------------------- Two levels only. A card, and a thing floating above a card. */ --rp-shadow: 0 1px 2px rgba(20, 22, 43, .05), 0 4px 14px rgba(20, 22, 43, .05); --rp-shadow-lg: 0 12px 40px rgba(20, 22, 43, .14); /* --- type -------------------------------------------------------------- Inter, with a real fallback stack so nothing shifts if it fails to load. Never use a second typeface for headings. */ --rp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* --- spacing ----------------------------------------------------------- Everything is a multiple of 4. It is not a rule anyone will notice, but the absence of it is. */ --rp-space-1: 4px; --rp-space-2: 8px; --rp-space-3: 12px; --rp-space-4: 16px; --rp-space-5: 24px; --rp-space-6: 32px; --rp-space-7: 48px; } /* ========================================================================= DARK MODE ========================================================================= Only ReplaTicket has a dark theme today. These values are here so that when the others add one, the three still match. The accent goes LIGHTER on a dark surface, not darker. --rp-accent-strong is the wrong way round in the dark: indigo #4338ca on the family navy measures 2.8:1, which is unreadable. Use --rp-accent-on-dark instead. ========================================================================= */ :root[data-theme="dark"], :root.dark { --rp-bg: #0f1120; --rp-surface: #181b2f; --rp-surface-2: #1f2338; --rp-text: #e8eaf4; --rp-text-2: #a9b0c9; --rp-text-3: #7a82a0; --rp-border: #2a2f4a; --rp-border-2: #363c5c; /* words touch it -> the lighter step */ --rp-accent-strong: var(--rp-accent-on-dark); --rp-accent-soft: #1e2145; --rp-accent-line: #343a6b; } /* --------------------------------------------------------------------------- ReplaCRM — grass. Swap these five lines into repla.css to rebrand the app. --------------------------------------------------------------------------- */ :root.theme-crm { --rp-accent: #3f6212; --rp-accent-strong: #365314; --rp-accent-deep: #1a2e05; --rp-accent-soft: #f7fee7; --rp-accent-line: #bef264; --rp-accent-on-dark: #a3e635; } /* --------------------------------------------------------------------------- ReplaReputation — magenta. --------------------------------------------------------------------------- */ :root.theme-reputation { --rp-accent: #8c0b6c; --rp-accent-strong: #6e0855; --rp-accent-deep: #55063f; --rp-accent-soft: #fdf2fa; --rp-accent-line: #f5c2e7; --rp-accent-on-dark: #e879c4; } /* --------------------------------------------------------------------------- ReplaProject — azure. Settled 11 September 2026, found by searching the gamut rather than by eye: 15.4 from its nearest neighbour on the trusted views, against a target of 8. DO NOT DARKEN IT. For a red-green-blind viewer this and ReplaMail's indigo both read as a blue, and the whole margin between them is lightness. --------------------------------------------------------------------------- */ :root.theme-project { --rp-accent: #328afa; --rp-accent-strong: #066cd9; --rp-accent-deep: #0054c0; --rp-accent-soft: #eff8ff; --rp-accent-line: #b8dcff; --rp-accent-on-dark: #479dff; } /* --------------------------------------------------------------------------- ReplaRank — amethyst. Settled 12 September 2026. The family had run out of room: with seven accents, the four status colours and the navy all on screen, NOTHING left in sRGB reaches the target of 8. This is the best that remains and it clears the floor of 6 on every row, including tritan, which most of the alternatives did not. Do not brighten or desaturate it. Its two nearest neighbours are ReplaMail's indigo (protanopia) and the orchid reserved for ReplaForm (tritanopia), and both margins are thin. --------------------------------------------------------------------------- */ :root.theme-rank { --rp-accent: #8760cb; --rp-accent-strong: #6f4caa; --rp-accent-deep: #573c86; --rp-accent-soft: #f8f5ff; --rp-accent-line: #dccffd; --rp-accent-on-dark: #b892ff; }