diff options
| author | main <main@swarm.moe> | 2026-02-25 22:50:02 -0500 |
|---|---|---|
| committer | main <main@swarm.moe> | 2026-02-25 22:50:02 -0500 |
| commit | 7b3e888fee775155679f11c0f9f68466327fc6d2 (patch) | |
| tree | 6c41a718f5933e3f22cc2fa2727ba89b8a420ff9 | |
| parent | 069974f8246558dd974aa79dc0085b7dfcda1a22 (diff) | |
| download | design-language-7b3e888fee775155679f11c0f9f68466327fc6d2.zip | |
Seed frame/font baseline artifacts
| -rw-r--r-- | .gitignore | 2 | ||||
| -rw-r--r-- | assets/fonts/oxanium-400.woff2 | bin | 0 -> 14044 bytes | |||
| -rw-r--r-- | assets/fonts/oxanium-600.woff2 | bin | 0 -> 14044 bytes | |||
| -rw-r--r-- | assets/fonts/share-tech-mono-400.woff2 | bin | 0 -> 13500 bytes | |||
| -rw-r--r-- | css/starsector-dark.frame-font.css | 91 | ||||
| -rw-r--r-- | examples/frame-font-preview.html | 43 | ||||
| -rw-r--r-- | tokens/starsector-dark.frame-font.tokens.json | 47 |
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 Binary files differnew file mode 100644 index 0000000..e5291c6 --- /dev/null +++ b/assets/fonts/oxanium-400.woff2 diff --git a/assets/fonts/oxanium-600.woff2 b/assets/fonts/oxanium-600.woff2 Binary files differnew file mode 100644 index 0000000..e5291c6 --- /dev/null +++ b/assets/fonts/oxanium-600.woff2 diff --git a/assets/fonts/share-tech-mono-400.woff2 b/assets/fonts/share-tech-mono-400.woff2 Binary files differnew file mode 100644 index 0000000..f48075f --- /dev/null +++ b/assets/fonts/share-tech-mono-400.woff2 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)" + } + } +} |