benji/apes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: Concrete Brutalism — warm concrete palette, Inconsolata + Instrument Sans

Browse Source 
Kill the AI slop. New design language:
- Warm concrete grays (#1a1917 base) with hot orange (#F26522) accent
- Inconsolata mono for body, Instrument Sans for headings
- Zero border-radius everywhere — brutalist, no rounded corners
- Thick 4px type slabs on messages (green/red/blue/yellow)
- Thick 2px borders on all structural elements
- Agent messages in warm card bg, names in hot orange
- Ape emoji logo in sidebar
- Command terminal compose box with > prompt
- Blocky type selector buttons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
limiteinductive
2026-03-29 20:52:00 +02:00
parent 9e375fd953
commit 0ab3d64daa
7 changed files with 234 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
ui/colony/src/index.css
View File

@@ -1,13 +1,13 @@
@import "tailwindcss";
@import "@fontsource/jetbrains-mono/400.css";
@import "@fontsource/jetbrains-mono/500.css";
@import "@fontsource/jetbrains-mono/700.css";
@import "@fontsource/inconsolata/400.css";
@import "@fontsource/inconsolata/700.css";
@import "@fontsource-variable/instrument-sans";
@custom-variant dark (&:is(.dark *));
@theme inline {
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--font-sans: 'JetBrains Mono', ui-monospace, monospace;
--font-mono: 'Inconsolata', ui-monospace, monospace;
--font-sans: 'Instrument Sans Variable', system-ui, sans-serif;
--color-ring: var(--ring);
--color-input: var(--input);
@@ -32,42 +32,46 @@
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
/* message type accents */
--color-msg-result: oklch(0.72 0.19 145);
--color-msg-error: oklch(0.63 0.24 25);
--color-msg-plan: oklch(0.68 0.16 250);
--color-msg-code: oklch(0.75 0.12 80);
--color-agent-glow: oklch(0.55 0.15 250 / 0.3);
/* Zero radii — brutalist, no rounded corners */
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-xl: 0;
/* Message type accents */
--color-hot: #F26522;
--color-msg-result: #22C55E;
--color-msg-error: #EF4444;
--color-msg-plan: #3B82F6;
--color-msg-code: #EAB308;
}
:root {
--background: oklch(0.12 0.005 260);
--foreground: oklch(0.85 0 0);
--card: oklch(0.15 0.005 260);
--card-foreground: oklch(0.85 0 0);
--popover: oklch(0.15 0.005 260);
--popover-foreground: oklch(0.85 0 0);
--primary: oklch(0.85 0 0);
--primary-foreground: oklch(0.12 0.005 260);
--secondary: oklch(0.2 0.005 260);
--secondary-foreground: oklch(0.75 0 0);
--muted: oklch(0.2 0.005 260);
--muted-foreground: oklch(0.55 0 0);
--accent: oklch(0.22 0.01 260);
--accent-foreground: oklch(0.85 0 0);
--destructive: oklch(0.63 0.24 25);
--border: oklch(0.22 0.01 260);
--input: oklch(0.2 0.005 260);
--ring: oklch(0.55 0.15 250);
--sidebar: oklch(0.1 0.005 260);
--sidebar-foreground: oklch(0.7 0 0);
--sidebar-accent: oklch(0.18 0.01 260);
--sidebar-accent-foreground: oklch(0.9 0 0);
--sidebar-border: oklch(0.2 0.01 260);
/* Warm concrete palette */
--background: #1a1917;
--foreground: #d4d0c8;
--card: #1f1e1b;
--card-foreground: #d4d0c8;
--popover: #1f1e1b;
--popover-foreground: #d4d0c8;
--primary: #F26522;
--primary-foreground: #1a1917;
--secondary: #2a2825;
--secondary-foreground: #a8a49c;
--muted: #252320;
--muted-foreground: #7a756c;
--accent: #2a2825;
--accent-foreground: #d4d0c8;
--destructive: #EF4444;
--border: #3a3632;
--input: #252320;
--ring: #F26522;
--sidebar: #151413;
--sidebar-foreground: #8a857c;
--sidebar-accent: #252320;
--sidebar-accent-foreground: #d4d0c8;
--sidebar-border: #2a2825;
}
@layer base {
@@ -77,7 +81,7 @@
body {
@apply bg-background text-foreground font-mono;
font-size: 13px;
line-height: 1.5;
line-height: 1.6;
}
html, body, #root {
height: 100%;