diff --git a/frontend/src/app.css b/frontend/src/app.css
index 20ae13c..13bdbe8 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,16 +1,18 @@
-/* goodNews calm design system.
- Warm but crisp: cream surfaces, sage accent, a serif voice for headlines,
- strong readable contrast, generous space. No urgency colors (no red). */
+/* Upbeat Bytes calm design system.
+ Sand, sea, and sun: warm paper surfaces, a vivid-azure accent, gold highlight,
+ a serif voice for headlines, strong readable contrast, generous space.
+ No urgency colors (no red). Built around the logo's #0083ad azure. */
:root {
- --bg: #faf6ee;
+ --bg: #f7f4ec;
--surface: #fffdf8;
- --ink: #21281f;
- --muted: #616c60;
- --sage: #2f7d5b;
- --sage-deep: #235e44;
- --sage-soft: #e6efe6;
- --line: #e7e1d4;
- --gold: #a9802f;
+ --ink: #16263a;
+ --muted: #5d6b78;
+ --accent: #0083ad;
+ --accent-deep: #006b8e;
+ --accent-soft: #e0eef3;
+ --line: #e8e3d8;
+ --gold: #b3892b;
+ --gold-bright: #e6cd42;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -42,7 +44,7 @@ h1, h2, h3 {
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
-::selection { background: var(--sage-soft); }
+::selection { background: var(--accent-soft); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
diff --git a/frontend/src/app.html b/frontend/src/app.html
index fe3ad42..2f44b24 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -5,7 +5,7 @@
-
+
Upbeat Bytes — calm, constructive news
%sveltekit.head%
diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte
index 697c922..5ffcba8 100644
--- a/frontend/src/lib/components/ArticleCard.svelte
+++ b/frontend/src/lib/components/ArticleCard.svelte
@@ -81,16 +81,16 @@
.body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.74rem; }
.tag {
- background: var(--sage); color: #fff; border-radius: 999px;
+ background: var(--accent); color: #fff; border-radius: 999px;
padding: 2px 9px; font-weight: 600; text-transform: capitalize;
}
- .tag.soft { background: var(--sage-soft); color: var(--sage-deep); }
+ .tag.soft { background: var(--accent-soft); color: var(--accent-deep); }
/* Source on its own line below the tags, left-justified, for uniformity. */
.src { color: var(--muted); font-size: 0.78rem; margin: -2px 0 2px; }
h3 { font-size: 1.18rem; }
- h3 a:hover { color: var(--sage-deep); }
- .desc { margin: 2px 0 0; color: #3c463a; }
+ h3 a:hover { color: var(--accent-deep); }
+ .desc { margin: 2px 0 0; color: #3b4754; }
.paywall {
margin: 0; font-size: 0.78rem; color: var(--gold);
display: inline-flex; align-items: center; gap: 5px;
@@ -98,7 +98,7 @@
.paywall::before { content: '🔒'; font-size: 0.72rem; filter: grayscale(0.3); }
.why {
margin: 2px 0 0; font-style: italic; color: var(--muted);
- font-size: 0.9rem; padding-left: 12px; border-left: 2px solid var(--sage-soft);
+ font-size: 0.9rem; padding-left: 12px; border-left: 2px solid var(--accent-soft);
}
/* Keep heights even: clamp variable-length text on tiles. */
.tile h3, .why {
@@ -113,8 +113,8 @@
background: none; border: none; padding: 0; color: var(--muted);
font-size: 0.76rem; border-bottom: 1px dotted var(--line);
}
- .actions button:hover { color: var(--sage-deep); border-bottom-color: var(--sage); }
- .actions .replace { color: var(--sage-deep); border-bottom-color: var(--sage-soft); }
+ .actions button:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
+ .actions .replace { color: var(--accent-deep); border-bottom-color: var(--accent-soft); }
@media (hover: hover) {
.actions button:not(.replace) { opacity: 0; transition: opacity 0.16s ease; }
article:hover .actions button:not(.replace),
@@ -126,13 +126,13 @@
.tile .body { padding-top: 18px; }
.tile .body::before {
content: ''; display: block; width: 30px; height: 3px;
- background: var(--sage); border-radius: 2px; margin-bottom: 10px; opacity: 0.85;
+ background: var(--accent); border-radius: 2px; margin-bottom: 10px; opacity: 0.85;
}
.tile::after {
content: attr(data-topic);
position: absolute; right: 10px; bottom: -8px;
font-family: var(--serif); font-size: 3.4rem; line-height: 1;
- color: var(--sage); opacity: 0.05; text-transform: lowercase; letter-spacing: -0.02em;
+ color: var(--accent); opacity: 0.05; text-transform: lowercase; letter-spacing: -0.02em;
pointer-events: none; user-select: none;
}
.tile .tags, .tile .src, .tile h3, .tile .why, .tile .actions { position: relative; }
@@ -141,13 +141,13 @@
.hero { display: grid; grid-template-columns: 1.1fr 1fr; }
.hero .media {
position: relative; display: block; height: 100%; min-height: 300px;
- background: linear-gradient(135deg, var(--sage-soft), #f1ece0);
+ background: linear-gradient(135deg, var(--accent-soft), #f1ece0);
}
.hero .media img { width: 100%; height: 100%; object-fit: cover; }
/* Soft feed images read as atmospheric, not broken. */
.hero .media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
- background: linear-gradient(180deg, rgba(33, 40, 31, 0) 55%, rgba(33, 40, 31, 0.16));
+ background: linear-gradient(180deg, rgba(10, 22, 38, 0) 55%, rgba(10, 22, 38, 0.18));
}
.hero .body { padding: 30px 32px; justify-content: center; gap: 12px; }
.hero h3 { font-size: 1.95rem; }
@@ -156,14 +156,14 @@
.herotype {
position: relative; overflow: hidden;
background:
- radial-gradient(120% 140% at 100% 0%, var(--sage-soft) 0%, transparent 55%),
+ radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 55%),
var(--surface);
}
.herotype::after {
content: attr(data-topic);
position: absolute; right: 12px; bottom: -18px;
font-family: var(--serif); font-size: clamp(4rem, 12vw, 8rem); line-height: 1;
- color: var(--sage); opacity: 0.07; text-transform: lowercase; letter-spacing: -0.02em;
+ color: var(--accent); opacity: 0.07; text-transform: lowercase; letter-spacing: -0.02em;
pointer-events: none; user-select: none;
}
.herotype .body { position: relative; padding: 40px 36px; gap: 12px; }
diff --git a/frontend/src/lib/components/BottomNav.svelte b/frontend/src/lib/components/BottomNav.svelte
index 774ed47..8b5dc57 100644
--- a/frontend/src/lib/components/BottomNav.svelte
+++ b/frontend/src/lib/components/BottomNav.svelte
@@ -39,7 +39,7 @@
color: var(--muted); font-size: 0.7rem; letter-spacing: 0.02em;
}
.bottomnav button svg { width: 23px; height: 23px; }
- .bottomnav button.active { color: var(--sage-deep); }
- .bottomnav button.active svg { stroke: var(--sage); }
+ .bottomnav button.active { color: var(--accent-deep); }
+ .bottomnav button.active svg { stroke: var(--accent); }
}
diff --git a/frontend/src/lib/components/BoundariesPanel.svelte b/frontend/src/lib/components/BoundariesPanel.svelte
index 26cfc46..5e069c1 100644
--- a/frontend/src/lib/components/BoundariesPanel.svelte
+++ b/frontend/src/lib/components/BoundariesPanel.svelte
@@ -106,7 +106,7 @@
}
.head { display: flex; align-items: baseline; justify-content: space-between; }
.head h2 { font-size: 1.3rem; }
- .close { background: none; border: none; color: var(--sage-deep); font-size: 0.85rem; text-decoration: underline; }
+ .close { background: none; border: none; color: var(--accent-deep); font-size: 0.85rem; text-decoration: underline; }
.reassure { margin: 4px 0 16px; color: var(--muted); font-size: 0.85rem; }
.group { margin-bottom: 16px; }
.label {
@@ -118,16 +118,16 @@
flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
font-size: 0.92rem; background: var(--bg);
}
- .addrow input:focus { outline: none; border-color: var(--sage); }
- .add { border: 1px solid var(--sage); background: var(--sage); color: #fff; border-radius: 9px; padding: 9px 16px; font-size: 0.88rem; }
+ .addrow input:focus { outline: none; border-color: var(--accent); }
+ .add { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 9px; padding: 9px 16px; font-size: 0.88rem; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill {
display: inline-flex; align-items: center; gap: 4px;
- background: var(--sage-soft); color: var(--sage-deep);
+ background: var(--accent-soft); color: var(--accent-deep);
border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.85rem;
}
.pill small { color: var(--muted); }
- .pill button { background: none; border: none; color: var(--sage-deep); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 4px; }
+ .pill button { background: none; border: none; color: var(--accent-deep); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.empty { margin: 0; color: var(--muted); font-size: 0.85rem; font-style: italic; }
.reset { background: none; border: none; color: var(--muted); font-size: 0.82rem; text-decoration: underline; margin-top: 4px; }
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
index 691205f..09f717c 100644
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -5,15 +5,7 @@
-
- UpbeatBytes
+ 