Skip to content

Commit c556e43

Browse files
nullxnothingnullxnothing
committed
refactor: polish repo for hackathon presentation
- add screenshots to README (hero, editor, agent launcher, wallet) - add badges (CI, version, license, tests) - update download links to v2.0.0 - add brand assets (SVG logotypes, PNG size ladder, BRAND.md) - remove internal planning docs from root
1 parent c4c3db0 commit c556e43

38 files changed

Lines changed: 344 additions & 1406 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,5 @@ vendor/
6868
*_AUDIT*.md
6969
release-plan.md
7070
docs/
71+
!docs/screenshots/
7172
.wrangler/

‎BRAND.md‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
# DAEMON — Brand Guidelines
2+
3+
Official brand identity reference for the DAEMON IDE. Follow these rules across all marketing, UI, documentation, and community touchpoints.
4+
5+
---
6+
7+
## 1. Color Palette
8+
9+
### Core Backgrounds (Elevation Scale)
10+
11+
Dark-first. Each step lifts a surface closer to the user.
12+
13+
| Token | Hex | Usage |
14+
|--------|-----------|-------------------------------------|
15+
| `--bg` | `#0a0a0a` | Workspace pit — deepest layer |
16+
| `--s1` | `#141414` | Sidebars, titlebar, cards |
17+
| `--s2` | `#1a1a1a` | Inputs, secondary surfaces |
18+
| `--s3` | `#222222` | Hover states |
19+
| `--s4` | `#2a2a2a` | Active / pressed states |
20+
| `--s5` | `#333333` | Borders |
21+
| `--s6` | `#3a3a3a` | Strong borders / dividers |
22+
23+
### Text Scale
24+
25+
All values are WCAG AA compliant against `--bg` (#0a0a0a).
26+
27+
| Token | Hex | Contrast | Usage |
28+
|--------|-----------|----------|--------------------------|
29+
| `--t1` | `#f0f0f0` | 15.5:1 | Primary text |
30+
| `--t2` | `#a0a0a0` | 7.5:1 | Secondary text |
31+
| `--t3` | `#888888` | 6.1:1 | Tertiary / muted labels |
32+
| `--t4` | `#666666` | 4.6:1 | Disabled / placeholder |
33+
34+
### Accent Colors
35+
36+
Each accent has three states: **base**, **dim** (hover/pressed), and **glow** (ambient background).
37+
38+
| Name | Base | Dim | Glow (15% alpha) | Semantic Role |
39+
|--------|-----------|-----------|-----------------------------|--------------------|
40+
| Green | `#3ecf8e` | `#2a9d6a` | `rgba(62, 207, 142, 0.15)` | Primary accent, success, focus |
41+
| Amber | `#f0b429` | `#c99a22` | `rgba(240, 180, 41, 0.15)` | Warnings |
42+
| Red | `#ef5350` | `#c94442` | `rgba(239, 83, 80, 0.15)` | Errors, danger |
43+
| Blue | `#60a5fa` | `#4a8ad4` | `rgba(96, 165, 250, 0.15)` | Info, links |
44+
45+
### Color Rules
46+
47+
- **Green is the brand color.** It is the only accent used for focus rings, primary CTAs, active indicators, and brand marks.
48+
- **Never use raw hex in components.** Always reference CSS custom properties from `tokens.css`.
49+
- **No neon.** Glows are ambient (4-6% opacity), not flashy. Think "emission", not "laser".
50+
- **Dark mode only.** DAEMON does not have a light theme. All palette choices assume dark backgrounds.
51+
- **Selection color:** `rgba(74, 140, 98, 0.3)` — a muted green tint, not a bright highlight.
52+
53+
### Premium Surface Tokens
54+
55+
| Token | Value | Usage |
56+
|------------------------------|------------------------------------------------------------------|----------------------------|
57+
| `--surface-gradient-subtle` | `linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent)` | Felt-not-seen panel tops |
58+
| `--border-glass` | `rgba(255, 255, 255, 0.04)` | Frosted glass edges |
59+
| `--glass-bg` | `rgba(20, 20, 20, 0.85)` | Frosted glass background |
60+
| `--glass-blur` | `blur(12px) saturate(130%)` | Backdrop filter |
61+
62+
---
63+
64+
## 2. Typography
65+
66+
### Font Families
67+
68+
| Purpose | Font | Fallback Stack |
69+
|---------------|---------------------|-------------------------------------------------------|
70+
| **UI** | Plus Jakarta Sans | -apple-system, BlinkMacSystemFont, sans-serif |
71+
| **Code** | JetBrains Mono | Fira Code, Cascadia Code, monospace |
72+
73+
Both fonts are self-hosted as `.woff2` in `/public/fonts/`. No external font requests — DAEMON runs fully offline.
74+
75+
### UI Font Weights
76+
77+
| Weight | Name | Usage |
78+
|--------|------------|------------------------------------------|
79+
| 400 | Regular | Body text, descriptions, inputs |
80+
| 500 | Medium | Labels, list items, secondary emphasis |
81+
| 600 | SemiBold | Panel headers, section titles |
82+
| 700 | Bold | Primary headings, strong emphasis (rare) |
83+
84+
### Code Font Weights
85+
86+
| Weight | Name | Usage |
87+
|--------|---------|--------------------------|
88+
| 400 | Regular | Editor text, terminal |
89+
| 500 | Medium | Active line highlights |
90+
| 700 | Bold | Search matches, keywords |
91+
92+
### Type Scale
93+
94+
| Token | Size | Usage |
95+
|---------------|-------|-------------------------------|
96+
| `--font-xs` | 9px | Badges, chip labels |
97+
| `--font-sm` | 10px | Section headers, captions |
98+
| `--font-base` | 11px | Body text, inputs |
99+
| `--font-md` | 12px | List items, labels |
100+
| `--font-lg` | 14px | Panel sub-titles |
101+
| `--font-xl` | 16px | Panel titles |
102+
103+
### Typography Rules
104+
105+
- **Base font size is 11px.** This is an IDE — density matters. Don't inflate.
106+
- **Line height: 1.4** across all UI text.
107+
- **Panel headers:** 11px, SemiBold (600), uppercase, 0.5px letter-spacing, `--t2` color.
108+
- **Anti-aliasing:** Always enable `-webkit-font-smoothing: antialiased`.
109+
- **No font-size larger than 16px** anywhere in the application chrome. Marketing and external assets may use larger sizes.
110+
- **Code and UI fonts never mix** within the same component. If it shows code, it uses JetBrains Mono exclusively.
111+
112+
---
113+
114+
## 3. Logo
115+
116+
### Mark Description
117+
118+
The DAEMON logo consists of two squircle (superellipse) shapes arranged diagonally — a larger form at top-left and a smaller form at bottom-right. The top-left shape has a rounded top-right corner (72px radius) with straight left and bottom edges. The bottom-right shape mirrors this with a rounded bottom-left corner. Together they form a stylized "D" that evokes layered interfaces, stacked panels, and emergent intelligence.
119+
120+
The logotype pairs the mark with "DAEMON" set in **Plus Jakarta Sans Bold** (700), converted to SVG paths for zero font dependency.
121+
122+
### Source Files
123+
124+
Figma source: `figma.com/design/eCo9Lb32Xtz1fj0QulH85N/Logo-Vector`
125+
126+
### Exported Assets
127+
128+
#### SVG (Vector Source)
129+
130+
| File | Description |
131+
|---------------------------------------------------|--------------------------------------------|
132+
| `resources/brand/svg/mark-primary.svg` | White mark on `#0C0C0C` background |
133+
| `resources/brand/svg/mark-white-transparent.svg` | White mark on transparent — for dark BGs |
134+
| `resources/brand/svg/mark-dark-transparent.svg` | `#0C0C0C` mark on transparent — for light BGs |
135+
| `resources/brand/svg/logotype-white.svg` | Mark + "DAEMON" logotype, white |
136+
| `resources/brand/svg/logotype-dark.svg` | Mark + "DAEMON" logotype, `#0C0C0C` |
137+
| `resources/brand/svg/logotype-green.svg` | Mark + "DAEMON" logotype, `#3ECF8E` |
138+
139+
#### PNG (Raster — Full Size Ladder)
140+
141+
Each variant includes: 16, 32, 64, 128, 256, 512, 1024px.
142+
143+
| Directory | Variant | Usage |
144+
|---------------------------------------------|--------------------------------|--------------------------------|
145+
| `resources/brand/png/primary/` | White mark on dark background | App store, social, marketing |
146+
| `resources/brand/png/white-transparent/` | White mark, transparent BG | Dark UI surfaces, overlays |
147+
| `resources/brand/png/dark-transparent/` | Dark mark, transparent BG | Light surfaces, print, docs |
148+
149+
Files follow the naming pattern: `daemon-mark-{size}.png`
150+
151+
#### App Icons (Derived)
152+
153+
| File | Source | Usage |
154+
|------------------------------|-----------------------------------|------------------------------------|
155+
| `resources/icon.ico` | Generated from primary 256px | Windows taskbar, title bar |
156+
| `resources/icon.png` | Primary 256px | macOS dock, Linux desktop |
157+
| `public/favicon.ico` | Generated from primary | Embedded browser, web contexts |
158+
| `public/daemon-icon-48.png` | Primary 64px (closest available) | Notifications, small placements |
159+
160+
### Logo Colors
161+
162+
| Context | Mark Color | Background |
163+
|-------------------|-------------|--------------|
164+
| Primary (on dark) | `#FFFFFF` | `#0a0a0a` |
165+
| Accent | `#3ecf8e` | `#0a0a0a` |
166+
| Reversed (light) | `#0C0C0C` | `#f0f0f0` |
167+
| Monochrome | `#FFFFFF` | Transparent |
168+
169+
### Logo Usage Rules
170+
171+
**Do:**
172+
- Use the logo at minimum 24px for icon contexts, 48px for standalone display.
173+
- Maintain equal clear space around the mark — minimum padding equal to 25% of the mark's width on all sides.
174+
- Use the monochrome white version on busy or photographic backgrounds.
175+
- Use the logotype SVGs (`logotype-white/dark/green.svg`) when pairing the mark with the name.
176+
177+
**Don't:**
178+
- Don't add drop shadows, outer glows, or gradients to the logo.
179+
- Don't rotate, stretch, skew, or distort the mark.
180+
- Don't place the logo on backgrounds lighter than `#333333` without switching to the reversed version.
181+
- Don't outline or stroke the mark — it is always a solid fill.
182+
- Don't recreate the mark in a different typeface or with rounded rectangles — the squircle geometry is intentional.
183+
- Don't add emoji or icons adjacent to the logo.
184+
- Don't animate the logo in UI chrome. Motion is reserved for marketing contexts only.
185+
- Don't manually type "DAEMON" next to the mark — always use the logotype SVG lockup.
186+
- Don't mix colors within the lockup (e.g. green mark + white text).
187+
188+
### Logotype
189+
190+
The logotype is a **single lockup** combining the mark + "DAEMON" in Plus Jakarta Sans Bold (700), all converted to SVG paths.
191+
192+
| Variant | File | Usage |
193+
|---------|------|-------|
194+
| White | `logotype-white.svg` | Dark backgrounds (primary) |
195+
| Dark | `logotype-dark.svg` | Light backgrounds |
196+
| Green | `logotype-green.svg` | Brand accent contexts |
197+
198+
- Mark height is **115% of the text cap height** for visual balance
199+
- Gap between mark and text is **40% of the font size**
200+
- All elements share the same fill color — the lockup is always monochrome
201+
- Never reposition the mark relative to the text — use the SVG as-is
202+
203+
---
204+
205+
## 4. Spacing & Layout
206+
207+
### Spacing Scale
208+
209+
| Token | Value | Usage |
210+
|--------------|-------|----------------------------|
211+
| `--space-xs` | 4px | Tight gaps, icon padding |
212+
| `--space-sm` | 8px | Inline spacing, small gaps |
213+
| `--space-md` | 12px | Section padding, card gaps |
214+
| `--space-lg` | 16px | Panel padding |
215+
| `--space-xl` | 24px | Major sections |
216+
217+
### Border Radius
218+
219+
| Token | Value | Usage |
220+
|----------------|-------|-------------------------|
221+
| `--radius-sm` | 3px | Buttons, inputs, chips |
222+
| `--radius-md` | 4px | Cards, panels |
223+
| `--radius-lg` | 6px | Modals, dropdowns |
224+
225+
### Key Dimensions
226+
227+
| Element | Size |
228+
|---------------|--------|
229+
| Title bar | 38px |
230+
| Sidebar | 48px |
231+
| Left panel | 210px |
232+
| Right panel | 262px |
233+
| Status bar | 22px |
234+
235+
---
236+
237+
## 5. Interaction & Motion
238+
239+
### Transitions
240+
241+
| Token | Duration | Usage |
242+
|----------------------|----------|-----------------------------|
243+
| `--transition-fast` | 0.1s | Hover states, toggles |
244+
| `--transition-normal`| 0.15s | Panel transitions, fades |
245+
| `--transition-slow` | 0.25s | Modals, overlays |
246+
247+
### Easing
248+
249+
All transitions use `ease`. No bounce, no spring, no overshoot. Quiet and precise.
250+
251+
### Interactive States
252+
253+
| State | Visual Treatment |
254+
|----------|-----------------------------------------------|
255+
| Hover | `rgba(255, 255, 255, 0.04)` overlay |
256+
| Active | `rgba(255, 255, 255, 0.08)` overlay + `scale(0.98)` |
257+
| Focus | 2px `--green` outline, 2px offset |
258+
| Disabled | `--t4` text color, no pointer events |
259+
260+
### Status Indicators
261+
262+
- Use **5px colored dots** for status (online, warning, error). Never use emoji.
263+
- Dot colors map to the accent palette: green = success, amber = warning, red = error, blue = info.
264+
265+
---
266+
267+
## 6. Shadows & Depth
268+
269+
| Token | Value | Usage |
270+
|-------------------|----------------------------------------------------|-------------------|
271+
| `--shadow-lifted` | `0 2px 8px rgba(0,0,0,0.3), inset highlight` | Cards, panels |
272+
| `--shadow-float` | `0 8px 32px rgba(0,0,0,0.4), inset highlight` | Dropdowns, popups |
273+
| `--shadow-modal` | `0 16px 48px rgba(0,0,0,0.5), inset highlight` | Modals, dialogs |
274+
275+
Each shadow includes a subtle `rgba(255,255,255,0.03-0.04)` inset highlight for dimensionality.
276+
277+
---
278+
279+
## 7. Voice & Tone
280+
281+
DAEMON's brand voice matches its visual identity: **precise, minimal, technical**.
282+
283+
- **Short.** Labels are 1-2 words. Descriptions are 1 sentence. Error messages state what happened and what to do.
284+
- **Direct.** "Save failed" not "Oops! We couldn't save your file." No hedging, no apologies.
285+
- **Technical.** Users are developers. Don't simplify terminology. Say "IPC handler" not "communication layer".
286+
- **No emoji in product UI.** Marketing and social media may use them sparingly.
287+
- **Product name:** Always "DAEMON" in all-caps when used as a brand name. Lowercase "daemon" is acceptable in code, CLI references, and technical documentation.
288+
289+
---
290+
291+
## Source of Truth
292+
293+
All color, spacing, and typography values live in `styles/tokens.css`. This document describes how to apply them — the CSS file is the canonical source. If this document and `tokens.css` ever conflict, `tokens.css` wins.

0 commit comments

Comments
 (0)