swarm repositories / source
aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.gitignore2
-rw-r--r--assets/fonts/oxanium-400.woff2bin0 -> 14044 bytes
-rw-r--r--assets/fonts/oxanium-600.woff2bin0 -> 14044 bytes
-rw-r--r--assets/fonts/share-tech-mono-400.woff2bin0 -> 13500 bytes
-rw-r--r--css/starsector-dark.frame-font.css91
-rw-r--r--examples/frame-font-preview.html43
-rw-r--r--tokens/starsector-dark.frame-font.tokens.json47
7 files changed, 183 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..69a1834
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+*.tmp
diff --git a/assets/fonts/oxanium-400.woff2 b/assets/fonts/oxanium-400.woff2
new file mode 100644
index 0000000..e5291c6
--- /dev/null
+++ b/assets/fonts/oxanium-400.woff2
Binary files differ
diff --git a/assets/fonts/oxanium-600.woff2 b/assets/fonts/oxanium-600.woff2
new file mode 100644
index 0000000..e5291c6
--- /dev/null
+++ b/assets/fonts/oxanium-600.woff2
Binary files differ
diff --git a/assets/fonts/share-tech-mono-400.woff2 b/assets/fonts/share-tech-mono-400.woff2
new file mode 100644
index 0000000..f48075f
--- /dev/null
+++ b/assets/fonts/share-tech-mono-400.woff2
Binary files differ
diff --git a/css/starsector-dark.frame-font.css b/css/starsector-dark.frame-font.css
new file mode 100644
index 0000000..9fc5968
--- /dev/null
+++ b/css/starsector-dark.frame-font.css
@@ -0,0 +1,91 @@
+/*
+ Conservative Starsector baseline for cross-project reuse.
+ Scope: frame primitives + typography only.
+*/
+
+@font-face {
+ font-family: "Remnant UI";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("../assets/fonts/oxanium-400.woff2") format("woff2");
+}
+
+@font-face {
+ font-family: "Remnant UI";
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+ src: url("../assets/fonts/oxanium-600.woff2") format("woff2");
+}
+
+@font-face {
+ font-family: "Remnant Mono";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("../assets/fonts/share-tech-mono-400.woff2") format("woff2");
+}
+
+:root {
+ --swarm-font-ui: "Remnant UI", system-ui, -apple-system, "Segoe UI", sans-serif;
+ --swarm-font-mono: "Remnant Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+
+ --swarm-frame-radius: 0px;
+ --swarm-frame-stroke: 1px;
+
+ --swarm-frame-page-bg: #04080d;
+ --swarm-frame-bg: rgba(6, 10, 16, 0.64);
+ --swarm-frame-bg-elevated: #0f2430;
+
+ --swarm-frame-edge: rgba(0, 104, 128, 0.62);
+ --swarm-frame-edge-strong: rgba(68, 152, 176, 0.86);
+ --swarm-frame-edge-inset: rgba(0, 0, 0, 0.86);
+
+ --swarm-frame-glow-soft: 0 0 18px rgba(28, 152, 252, 0.16);
+ --swarm-frame-glow-strong: 0 0 30px rgba(28, 152, 252, 0.24);
+
+ --swarm-frame-shadow: 0 0 0 1px var(--swarm-frame-edge-inset) inset;
+ --swarm-frame-shadow-elevated: var(--swarm-frame-shadow), var(--swarm-frame-glow-soft);
+}
+
+html,
+body {
+ background: var(--swarm-frame-page-bg);
+ font-family: var(--swarm-font-ui);
+}
+
+.swarm-font-ui {
+ font-family: var(--swarm-font-ui);
+}
+
+.swarm-font-mono,
+code,
+pre,
+kbd,
+samp,
+tt {
+ font-family: var(--swarm-font-mono);
+}
+
+.swarm-frame,
+.swarm-surface {
+ border-radius: var(--swarm-frame-radius);
+ border: var(--swarm-frame-stroke) solid var(--swarm-frame-edge);
+ background: var(--swarm-frame-bg);
+ box-shadow: var(--swarm-frame-shadow);
+}
+
+.swarm-surface-elevated {
+ border-radius: var(--swarm-frame-radius);
+ border: var(--swarm-frame-stroke) solid var(--swarm-frame-edge-strong);
+ background: var(--swarm-frame-bg-elevated);
+ box-shadow: var(--swarm-frame-shadow-elevated);
+}
+
+.swarm-frame-header {
+ border-radius: var(--swarm-frame-radius);
+ border: var(--swarm-frame-stroke) solid var(--swarm-frame-edge);
+ background: linear-gradient(180deg, rgba(0, 104, 128, 0.12), rgba(0, 104, 128, 0.02));
+ box-shadow: var(--swarm-frame-shadow-elevated);
+}
diff --git a/examples/frame-font-preview.html b/examples/frame-font-preview.html
new file mode 100644
index 0000000..fb148ab
--- /dev/null
+++ b/examples/frame-font-preview.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>Design Language Preview</title>
+ <link rel="stylesheet" href="../css/starsector-dark.frame-font.css" />
+ <style>
+ body {
+ margin: 0;
+ padding: 2rem;
+ }
+ .stack {
+ display: grid;
+ gap: 0.75rem;
+ max-width: 960px;
+ }
+ .swarm-frame,
+ .swarm-surface,
+ .swarm-surface-elevated,
+ .swarm-frame-header {
+ padding: 0.75rem 0.9rem;
+ }
+ .label {
+ opacity: 0.9;
+ font-size: 0.95rem;
+ }
+ .mono {
+ margin-top: 0.5rem;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="stack">
+ <div class="swarm-frame-header">Frame Header</div>
+ <div class="swarm-frame">
+ <div class="label">Frame Surface</div>
+ <div class="mono swarm-font-mono">SHA: deadbeefcafefade</div>
+ </div>
+ <div class="swarm-surface-elevated">Elevated Surface</div>
+ </div>
+ </body>
+</html>
diff --git a/tokens/starsector-dark.frame-font.tokens.json b/tokens/starsector-dark.frame-font.tokens.json
new file mode 100644
index 0000000..19f9efa
--- /dev/null
+++ b/tokens/starsector-dark.frame-font.tokens.json
@@ -0,0 +1,47 @@
+{
+ "meta": {
+ "name": "Starsector Dark Frame + Font Baseline",
+ "source": "Derived from /home/main/swarm-ui Starsector dark theme",
+ "scope": [
+ "frame design",
+ "surface palette",
+ "font families"
+ ],
+ "excluded": [
+ "button styling",
+ "key highlight states",
+ "semantic status colors"
+ ]
+ },
+ "font": {
+ "family": {
+ "ui": "\"Remnant UI\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+ "mono": "\"Remnant Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace"
+ },
+ "assets": {
+ "ui_400": "../assets/fonts/oxanium-400.woff2",
+ "ui_600": "../assets/fonts/oxanium-600.woff2",
+ "mono_400": "../assets/fonts/share-tech-mono-400.woff2"
+ }
+ },
+ "frame": {
+ "radius": "0px",
+ "stroke_width": "1px",
+ "palette": {
+ "page_bg": "#04080d",
+ "surface_bg": "rgba(6,10,16,0.64)",
+ "surface_bg_elevated": "#0f2430",
+ "edge": "rgba(0,104,128,0.62)",
+ "edge_strong": "rgba(68,152,176,0.86)",
+ "edge_inset": "rgba(0,0,0,0.86)"
+ },
+ "glow": {
+ "soft": "0 0 18px rgba(28,152,252,0.16)",
+ "strong": "0 0 30px rgba(28,152,252,0.24)"
+ },
+ "shadow": {
+ "surface": "0 0 0 1px rgba(0,0,0,0.86) inset",
+ "header": "0 0 0 1px rgba(0,0,0,0.86) inset, 0 0 18px rgba(28,152,252,0.16)"
+ }
+ }
+}
swarm source