Branding v3: homepage-canonical palette; green vector logo (white-plate variant was invisible on cream); green favicon/PWA icons; branded loading flash

This commit is contained in:
Nathan Schneider committed 2026-10-18 23:43:54 -06:00
1 parent 94b401e837
commit da996403d4
8 files changed
+61 -27

No files matched your search

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 40 KiB

+38 -25
View File
@@ -1,43 +1,56 @@
/* ============================================================
Inference Co-op branding — LibreChat overlay (v2, DOM-verified)
LibreChat's Tailwind theme resolves every color through CSS
variables set on html.light / html.dark (space-separated RGB).
Overriding those variables rebrands the WHOLE app — login page,
chat UI, dialogs — through the existing theme system.
Inference Co-op branding — LibreChat overlay (v3)
Colors are pulled from the co-op homepage's own CSS variables
(inference.coop): --cream #faf8f5, --wash #eef4ea, --green-deep
#5b8c5a, --green-mid #6ba86b, --green-light #7ab87a, --ink
#2d3327, --muted #6b7a62, --border #e8e2d8, font Figtree.
LibreChat resolves its Tailwind colors through CSS variables on
html.light / html.dark (space-separated RGB) — overriding them
rebrands the WHOLE app through the existing theme system.
============================================================ */
html.light {
--surface-primary: 250 248 245; /* cream background */
--surface-secondary: 241 237 230;
--surface-tertiary: 232 227 217;
--surface-hover: 236 234 217;
--surface-submit: 91 140 90; /* co-op green */
--surface-submit-hover: 74 122 74;
--accent-primary: 91 140 90;
--accent-primary-hover: 74 122 74;
--ring-primary: 91 140 90;
--link: 74 122 74;
--text-primary: 36 48 32;
--text-secondary: 90 107 82;
--border-light: 213 221 208;
--surface-primary: 250 248 245; /* --cream #faf8f5 */
--surface-secondary: 238 244 234; /* --wash #eef4ea */
--surface-tertiary: 232 226 216; /* --border #e8e2d8 */
--surface-hover: 232 245 232; /* #e8f5e8 (homepage wash hover) */
--surface-submit: 91 140 90; /* --green-deep #5b8c5a */
--surface-submit-hover: 107 168 107; /* --green-mid #6ba86b */
--accent-primary: 91 140 90; /* --green-deep */
--accent-primary-hover: 107 168 107; /* --green-mid */
--ring-primary: 91 140 90; /* --green-deep */
--link: 91 140 90; /* --green-deep */
--text-primary: 45 51 39; /* --ink #2d3327 */
--text-secondary: 107 122 98; /* --muted #6b7a62 */
--border-light: 232 226 216; /* --border #e8e2d8 */
}
html.dark {
--surface-primary: 31 36 27;
--surface-secondary: 38 45 34;
--surface-tertiary: 46 54 40;
--surface-hover: 49 57 45;
--surface-submit: 122 184 122;
--surface-primary: 34 39 31; /* deep pine */
--surface-secondary: 42 48 39;
--surface-tertiary: 52 59 48;
--surface-hover: 45 51 39; /* --ink */
--surface-submit: 122 184 122; /* --green-light #7ab87a */
--surface-submit-hover: 142 200 142;
--accent-primary: 122 184 122;
--accent-primary-hover: 142 200 142;
--ring-primary: 142 200 142;
--link: 142 200 142;
--text-primary: 236 233 226;
--text-secondary: 168 173 158;
--text-primary: 232 245 232; /* #e8f5e8 */
--text-secondary: 148 160 140;
--border-light: 74 82 64;
}
/* ---- Loading screen: brand the pre-React flash instead of white/black ---- */
#loading-container {
background-color: rgb(250, 248, 245); /* cream */
}
@media (prefers-color-scheme: dark) {
#loading-container {
background-color: rgb(34, 39, 31); /* deep pine */
}
}
/* ---- Remove the "Don't have an account? Sign up" line ----
The <p> wraps the register link on auth pages. :has() hides the
whole paragraph (custom2.js is the MutationObserver fallback). */
Binary file not shown.

Before

Width:  |  Height:  |  Size: 719 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.6 KiB

+23 -2
View File
@@ -1,3 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<image href="data:image/png;base64,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 truncated
<svg width="120" height="120" viewBox="0 0 130 130" fill="none" aria-label="Inference Cooperative logo">
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
<circle cx="58" cy="30" r="6" fill="#7ab87a"/>
<circle cx="74" cy="30" r="4" fill="#6ba86b"/>
<circle cx="51.5" cy="46" r="6.5" fill="#5b8c5a"/>
<circle cx="65" cy="46" r="5" fill="#7ab87a"/>
<circle cx="81" cy="46" r="4" fill="#6ba86b"/>
<circle cx="44" cy="62" r="7" fill="#6ba86b"/>
<circle cx="61" cy="62" r="5.5" fill="#5b8c5a"/>
<circle cx="76" cy="62" r="4.5" fill="#7ab87a"/>
<circle cx="89.5" cy="62" r="3.5" fill="#6ba86b"/>
<circle cx="36.5" cy="78" r="7.5" fill="#5b8c5a"/>
<circle cx="54" cy="78" r="6" fill="#7ab87a"/>
<circle cx="70" cy="78" r="5" fill="#6ba86b"/>
<circle cx="84" cy="78" r="4" fill="#5b8c5a"/>
<circle cx="97.5" cy="78" r="3.5" fill="#7ab87a"/>
<circle cx="44" cy="94" r="6.5" fill="#6ba86b"/>
<circle cx="61" cy="94" r="5.5" fill="#5b8c5a"/>
<circle cx="76" cy="94" r="4.5" fill="#7ab87a"/>
<circle cx="89.5" cy="94" r="3.5" fill="#6ba86b"/>
<circle cx="51.5" cy="110" r="5.5" fill="#5b8c5a"/>
<circle cx="65" cy="110" r="4.5" fill="#7ab87a"/>
<circle cx="81" cy="110" r="3.5" fill="#6ba86b"/>
</svg>

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 260 KiB