Skip to content

brand: the site on spin-stack/brand#21 - the navy with real contrast, brand's buttons, mono headings set tight #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aledbf merged 2 commits into from
Nov 7, 2026
Merged

brand: the site on spin-stack/brand#21 - the navy with real contrast, brand's buttons, mono headings set tight #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0030eb3
brand: spin-stack/brand#21 - the navy with real contrast, its buttons…
aledbf Nov 7, 2026
2307570
ui-hill-climb: the council's verdicts, round by round
aledbf Nov 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,7 @@ pnpm-debug.log*

# the public sources task reference:public fetches
.sources/

# ui-hill-climb: the captures and the council sets are evidence, not source
ui-hill-climb/rounds/
_output/
5 changes: 3 additions & 2 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@ export default defineConfig({
title: 'Spinbox',
description:
'Self-hosted sandboxes in your own AWS account: a virtual machine per workspace, snapshots with memory, rollback, and a diff of what changed.',
// The organization's own mark (spin-stack/brand): the tile on its navy in dark, and clear in light,
// where the tile would read as a sticker. No alt: the name is written beside it.
// The organization's own mark (spin-stack/brand), clear in both: in dark with its shadow drawn
// for the navy page (mark-dark), where the tile read as a box on the header. No alt: the name is
// written beside it.
logo: { dark: './src/assets/logo.png', light: './src/assets/logo-light.png', alt: '' },
favicon: '/favicon.png',
social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/spin-stack' }],
Expand Down
Binary file modified src/assets/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Answers.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const drawn = html.replace(/<li>/g, () => `<li><span class="icon">${iconSVG(icon
.answers :global(li strong) {
display: block;
color: var(--sl-color-white);
font-family: var(--sl-font-mono);
font-family: var(--spin-font-display);
font-size: var(--sl-text-base);
margin-bottom: 0.2rem;
}
Expand Down
7 changes: 4 additions & 3 deletions src/components/Cta.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,11 @@ const { title, links } = Astro.props;
h2 {
margin: 0 auto;
max-width: 22ch;
font-family: var(--sl-font-mono);
font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
font-family: var(--spin-font-display);
font-size: var(--spin-text-h1);
line-height: 1.1;
letter-spacing: var(--spin-heading-tracking);
letter-spacing: var(--spin-display-tracking);
word-spacing: -0.12em;
color: var(--spin-brand-frost);
}
p {
Expand Down
13 changes: 7 additions & 6 deletions src/components/Hero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
// The landing page's hero: Starlight's, with a workspace's disk to work under it and the
// project's name above the title. The title's second sentence - what Spinbox does, after what it
// is - is in the accent: one color, flat, as the console sets what matters.
// is - is in the accent's text colour: one colour, flat, as the console sets what matters.
import { LinkButton } from '@astrojs/starlight/components';
import Disk from './Disk.astro';

Expand Down Expand Up @@ -59,10 +59,9 @@ const rest = cut < 0 ? '' : title.slice(cut + 2);
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--sl-font-mono);
font-size: var(--sl-text-sm);
font-weight: 600;
color: var(--spin-label);
letter-spacing: 0.04em;
}
.dot {
width: 0.5rem;
Expand All @@ -71,10 +70,12 @@ const rest = cut < 0 ? '' : title.slice(cut + 2);
background: var(--spin-label);
}
h1 {
font-family: var(--sl-font-mono);
font-size: clamp(2.3rem, 1rem + 3.6vw, 3.9rem);
font-family: var(--spin-font-display);
font-size: var(--spin-text-display);
text-wrap: balance;
line-height: 1.08;
letter-spacing: var(--spin-heading-tracking);
letter-spacing: var(--spin-display-tracking);
word-spacing: -0.12em;
font-weight: 600;
color: var(--sl-color-white);
margin: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Stats.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const stats = [
background: var(--sl-color-black);
}
.n {
font-family: var(--sl-font-mono);
font-family: var(--spin-font-display);
font-size: clamp(2.4rem, 1.5rem + 2.5vw, 3.6rem);
font-weight: 600;
line-height: 1;
Expand Down
8 changes: 3 additions & 5 deletions src/components/Story.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,11 +293,9 @@ const plain = esc(steps.map((s) => [...s.commands.map((c) => `$ ${c}`), ...stepO
gap: 0.2rem;
}
.label {
font-family: var(--sl-font-mono);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--spin-muted);
font-size: 0.8125rem;
font-weight: 500;
color: var(--spin-label);
}
.title {
font-size: 1.125rem;
Expand Down
3 changes: 1 addition & 2 deletions src/content/docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@ hero:
actions:
- text: Evaluate Spinbox
link: overview/evaluate/
icon: right-arrow
- text: Install on AWS
link: aws/overview/
variant: minimal
variant: secondary
---

import Answers from '../../components/Answers.astro';
Expand Down
2 changes: 1 addition & 1 deletion src/data/reference.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"release": "v20261027.02"
},
"brand": {
"commit": "7e17029f6a087f386a4798af03df6e9623ecfe12"
"commit": "b7e4afcc3f5def534915077a2f4fc79a867f0924"
},
"counts": {
"built": 85,
Expand Down
48 changes: 27 additions & 21 deletions src/styles/brand-starlight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,42 @@
/* Written by `task palette` from palette.toml (spin-stack/brand). Edit palette.toml, not this file. */
:root {
--sl-color-accent-low: #163D51;
--sl-color-accent: #27BFE8;
--sl-color-accent-high: #87D6EF;
--sl-color-white: #F5F8FB;
--sl-color-gray-1: #EEF2F9;
--sl-color-gray-2: #E6EDF6;
--sl-color-gray-3: #9AA9C2;
--sl-color-gray-4: #6A7EA0;
--sl-color-gray-5: #33435F;
--sl-color-gray-6: #172035;
--sl-color-black: #111827;
--sl-color-banner-bg: #1B435C;
--sl-color-banner-text: #E6EDF6;
--sl-color-accent-low: #123049;
--sl-color-accent: #1B7DB4;
--sl-color-accent-high: #A9D9F0;
--sl-color-white: #F5F7FA;
--sl-color-gray-1: #EEF1F6;
--sl-color-gray-2: #E6EBF2;
--sl-color-gray-3: #9AA5B8;
--sl-color-gray-4: #6B7894;
--sl-color-gray-5: #34405A;
--sl-color-gray-6: #161E2F;
--sl-color-black: #0E1421;
--sl-color-banner-bg: #17334C;
--sl-color-banner-text: #E6EBF2;
}
:root[data-theme='light'] {
--sl-color-accent-low: #C9DFEB;
--sl-color-accent-low: #BDD8E6;
--sl-color-accent: #0A6FA3;
--sl-color-accent-high: #0D3B5A;
--sl-color-accent-high: #0C3957;
--sl-color-white: #0A0E17;
--sl-color-gray-1: #0E131F;
--sl-color-gray-2: #111827;
--sl-color-gray-3: #4A5871;
--sl-color-gray-4: #6E7D96;
--sl-color-gray-5: #B9C6D8;
--sl-color-gray-6: #DEE6F1;
--sl-color-gray-3: #525D72;
--sl-color-gray-4: #77829A;
--sl-color-gray-5: #C4CCD8;
--sl-color-gray-6: #E1E7F0;
--sl-color-black: #FFFFFF;
--sl-color-banner-bg: #BDD7E6;
--sl-color-banner-bg: #BED7E6;
--sl-color-banner-text: #111827;
--sl-color-gray-7: #F0F4F9;
--sl-color-gray-7: #F1F4F9;
}
:root {
--sl-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--sl-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
:root {
--sl-text-h1: clamp(1.75rem, 1.421rem + 1.348vw, 2.5rem);
--sl-text-h2: clamp(1.375rem, 1.156rem + 0.8989vw, 1.875rem);
--sl-text-h3: clamp(1.125rem, 1.015rem + 0.4494vw, 1.375rem);
--sl-text-h4: clamp(1rem, 0.9452rem + 0.2247vw, 1.125rem);
}
98 changes: 67 additions & 31 deletions src/styles/brand-tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,65 @@
/* Written by `task palette` from palette.toml (spin-stack/brand). Edit palette.toml, not this file. */
:root, .spin-dark {
--spin-accent: #27BFE8;
--spin-accent-text: #27BFE8;
--spin-border: #33435F;
--spin-border-strong: #6A7EA0;
--spin-destructive: #C2304F;
--spin-error: #F57AB4;
--spin-label: #5FE3D6;
--spin-muted: #9AA9C2;
--spin-on-accent: #111827;
--spin-overlay: #273552;
--spin-page: #111827;
--spin-raised: #202C47;
--spin-success: #3DDC97;
--spin-surface: #172035;
--spin-text: #E6EDF6;
--spin-warning: #FFC857;
--spin-accent-hover: #13293A;
--spin-accent-selected: #163D51;
--spin-accent: #1B7DB4;
--spin-accent-text: #6CC6EE;
--spin-border: #34405A;
--spin-border-strong: #6B7894;
--spin-destructive: #C4384F;
--spin-error: #EE7BB0;
--spin-label: #8FB3C6;
--spin-muted: #9AA5B8;
--spin-on-accent: #FFFFFF;
--spin-overlay: #2A3550;
--spin-page: #0E1421;
--spin-raised: #1F2940;
--spin-success: #4CC38A;
--spin-surface: #161E2F;
--spin-text: #E6EBF2;
--spin-warning: #E3B04B;
--spin-accent-fill-hover: #186E9E;
--spin-accent-fill-active: #155F89;
--spin-destructive-hover: #AC3146;
--spin-destructive-active: #952B3C;
--spin-control: #1F2940;
--spin-control-hover: #2A3550;
--spin-shadow-overlay: 0 0 0 1px rgb(0 0 0 / 0.4);
--spin-success-badge: color-mix(in srgb, var(--spin-success) 12%, transparent);
--spin-warning-badge: color-mix(in srgb, var(--spin-warning) 12%, transparent);
--spin-error-badge: color-mix(in srgb, var(--spin-error) 12%, transparent);
--spin-accent-text-badge: color-mix(in srgb, var(--spin-accent-text) 12%, transparent);
--spin-accent-hover: #0F1E30;
--spin-accent-selected: #123049;
}
:root[data-theme='light'] {
--spin-accent: #0A6FA3;
--spin-accent-text: #085E8C;
--spin-border: #B9C6D8;
--spin-border-strong: #6E7D96;
--spin-destructive: #B4234A;
--spin-error: #9B1B73;
--spin-label: #0C3C84;
--spin-muted: #4A5871;
--spin-accent-text: #075A86;
--spin-border: #C4CCD8;
--spin-border-strong: #77829A;
--spin-destructive: #C0303F;
--spin-error: #9A1F60;
--spin-label: #33586E;
--spin-muted: #525D72;
--spin-on-accent: #FFFFFF;
--spin-overlay: #FFFFFF;
--spin-page: #FFFFFF;
--spin-raised: #DEE6F1;
--spin-success: #1E7046;
--spin-surface: #F0F4F9;
--spin-raised: #E1E7F0;
--spin-success: #0F6844;
--spin-surface: #F1F4F9;
--spin-text: #111827;
--spin-warning: #8A5A00;
--spin-warning: #845000;
--spin-accent-fill-hover: #09628F;
--spin-accent-fill-active: #08547C;
--spin-destructive-hover: #A92A37;
--spin-destructive-active: #922430;
--spin-control: #F1F4F9;
--spin-control-hover: #E1E7F0;
--spin-shadow-overlay: 0 12px 32px rgb(16 19 24 / 0.14), 0 2px 6px rgb(16 19 24 / 0.08);
--spin-success-badge: color-mix(in srgb, var(--spin-success) 12%, transparent);
--spin-warning-badge: color-mix(in srgb, var(--spin-warning) 12%, transparent);
--spin-error-badge: color-mix(in srgb, var(--spin-error) 12%, transparent);
--spin-accent-text-badge: color-mix(in srgb, var(--spin-accent-text) 12%, transparent);
--spin-accent-hover: #E7F1F6;
--spin-accent-selected: #C9DFEB;
--spin-accent-selected: #BDD8E6;
}
:root {
--spin-brand-blue: #2F6BE3;
Expand All @@ -54,13 +76,27 @@
--spin-line-height: 1.6;
--spin-heading-weight: 600;
--spin-heading-tracking: -0.02em;
--spin-font-heading: var(--spin-font-sans);
--spin-font-display: var(--spin-font-mono);
--spin-display-tracking: -0.035em;
--spin-numeric: tabular-nums;
--spin-text-display: clamp(2rem, 1.452rem + 2.247vw, 3.25rem);
--spin-text-h1: clamp(1.75rem, 1.421rem + 1.348vw, 2.5rem);
--spin-text-h2: clamp(1.375rem, 1.156rem + 0.8989vw, 1.875rem);
--spin-text-h3: clamp(1.125rem, 1.015rem + 0.4494vw, 1.375rem);
--spin-text-h4: clamp(1rem, 0.9452rem + 0.2247vw, 1.125rem);
--spin-measure: 72ch;
--spin-sidebar: 17rem;
--spin-radius-sm: 4px;
--spin-radius-sm: 6px;
--spin-radius: 8px;
--spin-radius-lg: 12px;
--spin-target: 24px;
--spin-target-touch: 44px;
--spin-control-sm: 28px;
--spin-control-md: 32px;
--spin-control-lg: 36px;
--spin-control-icon: 16px;
--spin-control-gap: 6px;
--spin-width-contained: 1200px;
--spin-width-detail: 1152px;
--spin-width-wide: 1600px;
Expand Down
Loading
Loading