diff --git a/web/index.html b/web/index.html
index 519d8d9..eb261e7 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,7 @@
Mission Control
+ launchpad · Fervon
diff --git a/web/src/App.tsx b/web/src/App.tsx
index de6d0dc..50f608b 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -344,6 +344,17 @@ export default function App() {
+
+
+ 🔥
+ parte de{' '}
+
+ Fervon
+
+
+ forjado al rojo vivo
+
+
{selected && (
void }) {
- Nothing running yet.
+ Aún no arde nada.
- Mission Control watches your project folders and lights them up here. Point it at a folder to
- begin.
+ Mission Control vigila tus carpetas de proyecto y las enciende aquí. Apúntalo a una carpeta
+ para empezar.
+ Add a folder
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index 6186425..ab3f9a8 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -5,9 +5,9 @@
html, body, #root { height: 100%; margin: 0; }
body {
- /* §1.1 atmosphere: faint top-center accent vignette over the deepest slate. */
+ /* Atmósfera Fervon: resplandor de brasa radial (ember) sobre el carbón. */
background:
- radial-gradient(120% 80% at 50% -10%, rgba(45, 212, 191, 0.035), transparent 60%),
+ radial-gradient(120% 80% at 50% -10%, rgba(255, 106, 0, 0.06), rgba(224, 72, 15, 0.025) 38%, transparent 64%),
var(--slate-0);
color: var(--slate-8);
font-family: var(--font-ui);
@@ -56,8 +56,9 @@ a:hover { color: var(--accent-bright); }
/* brand tile + blip */
.brand-tile {
position: relative; width: 28px; height: 28px; border-radius: var(--radius-md);
- background: var(--accent); display: inline-flex; align-items: center; justify-content: center;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+ background: linear-gradient(180deg, var(--accent), var(--accent-muted));
+ display: inline-flex; align-items: center; justify-content: center;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 4px 14px rgba(255, 106, 0, 0.28);
}
.brand-blip {
width: 4px; height: 4px; border-radius: 50%; background: var(--accent-contrast); position: relative;
@@ -145,13 +146,15 @@ a:hover { color: var(--accent-bright); }
}
.view-seg.active { color: var(--slate-9); }
-/* new button */
+/* new button — botón de fuego Fervon (.btn-fire) */
.new-btn {
- background: var(--accent); color: var(--accent-contrast); border: none;
+ background: linear-gradient(180deg, var(--accent), var(--accent-muted));
+ color: var(--accent-contrast); border: none;
border-radius: var(--radius-md); padding: 7px 14px; font-weight: 600; font-size: var(--fs-label);
- transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
+ box-shadow: 0 6px 20px rgba(255, 106, 0, 0.28);
+ transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
-.new-btn:hover { background: var(--accent-bright); }
+.new-btn:hover { box-shadow: 0 10px 26px rgba(255, 106, 0, 0.4); transform: translateY(-1px); }
.new-btn:active { transform: scale(0.97); }
.new-btn.big { padding: 11px 22px; font-size: var(--fs-body); }
@@ -666,6 +669,28 @@ a:hover { color: var(--accent-bright); }
.toast-close:hover { color: var(--slate-9); }
.toast-more { font-size: var(--fs-caption); color: var(--slate-6); text-align: center; }
+/* ============================================================ footer Fervon === */
+.app-foot {
+ flex: 0 0 auto; border-top: 1px solid var(--border-rest);
+ padding: var(--sp-5) var(--page-gutter);
+ display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
+ flex-wrap: wrap; text-align: center;
+}
+.foot-mark {
+ display: inline-flex; align-items: center; gap: 6px;
+ font-size: var(--fs-label); font-weight: 600; color: var(--slate-8);
+}
+.foot-flame { font-size: 14px; line-height: 1; filter: saturate(1.1); }
+.foot-mark a { color: var(--accent-bright); font-weight: 700; }
+.foot-mark a:hover { color: var(--accent); }
+.foot-tag {
+ font-size: var(--fs-caption); font-style: italic; color: var(--slate-7);
+}
+.foot-tag::before { content: '·'; margin-right: var(--sp-3); color: var(--slate-5); }
+@media (max-width: 639px) {
+ .foot-tag::before { display: none; }
+}
+
/* ============================================================== responsive === */
@media (max-width: 1023px) {
:root { --page-gutter: var(--sp-5); }
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index e941dda..2e8e094 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -1,34 +1,40 @@
/*
- * Mission Control — Design Tokens (DESIGN.md §1, authoritative).
- * Dark-theme-first. Every component references these by variable, never by
- * literal hex. Accent is a single-variable swap (--accent + derivatives).
- * No external fonts/icons — bundled/system stack + Unicode glyphs (SPEC §0).
+ * launchpad — Design Tokens · identidad de marca FERVON (forjado al rojo vivo).
+ * Tema "carbón + brasa": fondo carbón oscuro, texto hueso, acentos de fuego
+ * ember/ámbar. Cada componente referencia estas variables, nunca un hex literal,
+ * así que reteñir la paleta aquí re-viste todo el dashboard de un solo cambio.
+ * Sin fuentes/iconos externos — stack del sistema + glifos Unicode.
+ * Paleta canónica Fervon: --carbon #0E0B0A · --card #1A1310 · --line #2C211B
+ * --ember #FF6A00 · --brasa #E0480F · --amber #FFB02E · --bone #EFE7DC.
*/
:root {
- /* ---------- Neutral ramp: "Slate" (blue-leaning near-black) ---------- */
- --slate-0: #0b0d10; /* app background (deepest) */
- --slate-1: #101316; /* card background */
- --slate-2: #161a1f; /* raised card / hover / drawer inner panel */
- --slate-3: #1e232a; /* popover, modal, input */
- --slate-4: #272d35; /* borders (solid contexts only) */
- --slate-5: #3a424d; /* hairline dividers on light surfaces */
- --slate-6: #5a636f; /* disabled text, faint icons, idle dot */
- --slate-7: #8a929e; /* secondary text, paths, captions */
- --slate-8: #b6bdc7; /* primary body text */
- --slate-9: #edf0f4; /* headings, high-emphasis */
+ /* ---------- Fervon carbon ramp (mapeado sobre los slots "slate") ---------- */
+ --slate-0: #0e0b0a; /* fondo de la app (carbón más profundo) */
+ --slate-1: #16110e; /* fondo de tarjeta (carbon-2) */
+ --slate-2: #1a1310; /* tarjeta elevada / hover / panel interior (card) */
+ --slate-3: #211913; /* popover, modal, input */
+ --slate-4: #2c211b; /* bordes (contextos sólidos) — line */
+ --slate-5: #3a2c22; /* divisores finos — line2 */
+ --slate-6: #6b5d50; /* texto deshabilitado, iconos tenues */
+ --slate-7: #94867a; /* texto secundario, rutas — dim */
+ --slate-8: #a89a8e; /* texto de cuerpo principal — ash */
+ --slate-9: #efe7dc; /* titulares, alta énfasis — bone */
/* ---------- Borders are ALPHA (sit correctly on any elevation) ------- */
- --border-rest: rgba(255, 255, 255, 0.06);
- --border-hover: rgba(255, 255, 255, 0.1);
- --border-focus: rgba(255, 255, 255, 0.14);
+ --border-rest: rgba(239, 231, 220, 0.07);
+ --border-hover: rgba(255, 106, 0, 0.22);
+ --border-focus: rgba(255, 106, 0, 0.4);
- /* ---------- Accent: "Aurora" (cyan-teal — NOT status-green) ---------- */
- --accent: #2dd4bf;
- --accent-bright: #5eead4;
- --accent-contrast: #04201e;
- --accent-muted: #1c7a82;
- --accent-subtle: #0e2a2e;
- --accent-ring: rgba(45, 212, 191, 0.14);
+ /* ---------- Acento: "Brasa" (ember/ámbar de fuego Fervon) ------------ */
+ --accent: #ff6a00; /* ember */
+ --accent-bright: #ffb02e; /* amber */
+ --accent-contrast: #1a0e06;
+ --accent-muted: #e0480f; /* brasa */
+ --accent-subtle: #2a1408;
+ --accent-ring: rgba(255, 106, 0, 0.18);
+
+ /* ---------- Acento de producto launchpad dentro de Fervon (verde) --- */
+ --ac: #8fd06b;
/* ---------- Status: color + (paired with) shape + motion ------------- */
--status-idle: #5a636f; --status-idle-dim: rgba(90, 99, 111, 0.55); --status-idle-glow: rgba(90, 99, 111, 0);