Jatin K MalikandGitHub
b501235f1e
* feat(web): deslop marketing site with workstation craft identity Replace generic AI SaaS landing patterns with a deliberate Linux desk utility look: cool paper palette, Bricolage + Source Sans, solid type, editorial feature rows, and terminal install as first-class proof. Adds PRODUCT.md, DESIGN.md, and WEB-DESLOP-NOTES.md. Drops unused geist and react-intersection-observer. No product claim changes. * chore(web): drop local deslop working notes from PR WEB-DESLOP-NOTES.md was a firstmate/session artifact, not product docs. * fix(web): stop mobile horizontal overflow and harden viewport layout Long install URLs expanded the page past the phone width. Constrain terminal pre with break-all, min-w-0 columns, and overflow-x clip. Tighten mobile hero type and full-width CTAs. Add Playwright viewport QA script and jest checks that assert no overflow at desktop/tablet/mobile. * refactor(web): drop browser speech preview from marketing home Remove the cloud SpeechRecognition demo section and nav Demo link. Keep product truth: hero install, features, screenshots, engines. Fold shortcut/engine/audio links into the features intro. Delete unused LiveDemo component and its unit test. * chore(web): remove orphaned demo overlay and double-press hook Only LiveDemo used these; gone with the browser preview section. * feat(web): borrow PR #546 craft language into deslop home Merge closed redesign language onto feat/web-deslop-craft: pure white and near-black iron surfaces, emerald-committed palette, asymmetric hero with real app screenshots, full-bleed install strip, feature bento with tray/settings shots, and install-to-dictation steps. Keep Bricolage + Source Sans (not Geist), no browser speech demo, and mobile overflow guards. Update screenshots homepage expectations. * docs(design): align DESIGN.md tokens with PR #546 iron/emerald palette * fix(web): drop settings screenshot from installer details Uninstall sat too far below the list once the general-settings shot was in that column. Keep checklist, requirements, and uninstall only. * fix(web): raise light-mode primary and footer contrast Darken light emerald so white button text hits ~5:1 (was 3.4). Brighten install-strip and footer secondary text for legibility. Verified light/dark × desktop/tablet/mobile with no overflow. * fix(web): compact feature cards to kill empty vertical space Right-column tiles were h-full + justify-between next to a tall screenshot, so short copy left large voids. Use content-height cards with denser padding and inline link rows instead. * fix(web): pair settings shot with full feature rail Replace three orphan cards beside a tall dialog with a six-row feature panel that stretches with the screenshot frame. Crop the settings image with object-cover/object-top so heights match and no void sits next to the UI shot. * feat(web): apply homepage craft language to SEO child pages Rewrite SeoSubpageShell chrome (fixed nav, install pill, iron footer) to match the deslop home. Add subpage utilities and retoken all templated child routes: borders, radii, mono kickers, single emerald accent, terminal panels, no rainbow icon tiles or gradient cards. * fix(web): avoid invalid @apply hover:border-primary/40 in subpage-card * fix(web): rewrite subpage CSS without invalid Tailwind @apply * fix(web): color comparison X icons rose-red on alternatives Use soft rose (#c45c5c / #e08b8b) for no/cons marks so they read as distinct from emerald yes/checks without looking like form errors. * docs(web): move product/design docs under web/ and drop impeccable markers Keep PRODUCT.md and DESIGN.md next to the Next app (not repo root), add web/AGENTS.md as the entry point, and point the root AGENTS website section at those files. Strip tool-specific schema comments. * fix(web): use icon-only copy control on install terminal Replace the chunky Copy/Copied chip with a quiet clipboard icon that turns into a check on success. * fix(web): restyle system requirements as a spec rail Replace the nested bullet card with mono-label / value pairs under the installer section so it matches the craft language used elsewhere. * fix(web): center engine rows and quiet the Default badge Align name/badge with multi-line engine details on sm+; replace the filled green pill with a small mono outline chip.
167 lines
5.7 KiB
Markdown
167 lines
5.7 KiB
Markdown
---
|
||
name: Vocalinux website
|
||
description: Offline Linux voice dictation marketing site — workstation craft, not SaaS chrome
|
||
colors:
|
||
ink: "#09090b"
|
||
paper: "#ffffff"
|
||
paper-raised: "#f4f4f5"
|
||
surface-muted: "#f4f4f5"
|
||
primary: "#1a7f4e"
|
||
primary-deep: "#14663e"
|
||
primary-soft: "#ecfdf3"
|
||
terminal: "#0a0a0c"
|
||
terminal-fg: "#6ee7a8"
|
||
muted: "#52525b"
|
||
border: "#e4e4e7"
|
||
status-no: "#c45c5c"
|
||
status-no-dark: "#e08b8b"
|
||
dark-bg: "#0c0c0e"
|
||
dark-raised: "#16161a"
|
||
dark-muted: "#a1a1aa"
|
||
typography:
|
||
display:
|
||
fontFamily: "var(--font-display), ui-sans-serif, system-ui, sans-serif"
|
||
fontSize: "clamp(2.25rem, 5vw, 3.75rem)"
|
||
fontWeight: 600
|
||
lineHeight: 1.08
|
||
letterSpacing: "-0.03em"
|
||
headline:
|
||
fontFamily: "var(--font-display), ui-sans-serif, system-ui, sans-serif"
|
||
fontSize: "clamp(1.75rem, 3vw, 2.5rem)"
|
||
fontWeight: 600
|
||
lineHeight: 1.15
|
||
letterSpacing: "-0.025em"
|
||
body:
|
||
fontFamily: "var(--font-body), ui-sans-serif, system-ui, sans-serif"
|
||
fontSize: "1.0625rem"
|
||
fontWeight: 400
|
||
lineHeight: 1.65
|
||
label:
|
||
fontFamily: "var(--font-body), ui-sans-serif, system-ui, sans-serif"
|
||
fontSize: "0.8125rem"
|
||
fontWeight: 600
|
||
lineHeight: 1.4
|
||
letterSpacing: "0.02em"
|
||
mono:
|
||
fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||
fontSize: "0.875rem"
|
||
rounded:
|
||
sm: "6px"
|
||
md: "10px"
|
||
lg: "14px"
|
||
spacing:
|
||
section-y: "5rem"
|
||
gutter: "1.5rem"
|
||
content-max: "72rem"
|
||
---
|
||
|
||
# Design system: vocalinux.com
|
||
|
||
## Overview
|
||
|
||
**Creative north star: "The Linux desk utility"**
|
||
|
||
Pure white / near-black iron surfaces, committed emerald, real app screenshots as proof, full-bleed install strip, asymmetric home hero. Not generic AI SaaS (purple mesh, gradient text, icon-card grids, browser-fake demos).
|
||
|
||
Home is a persuade surface: first viewport shows product + screenshot; conversion lives in the install strip; then desktop proof. Child pages share the same shell and tokens via `SeoSubpageShell`.
|
||
|
||
**Key characteristics**
|
||
- Pure white / zinc iron surfaces (not cream, not purple)
|
||
- Display (Bricolage Grotesque) + body (Source Sans 3); mono for install only
|
||
- Real `public/screenshots/` on the home feature section
|
||
- Full-bleed dark install strip as primary conversion
|
||
- Feature rail + dense engine list instead of rainbow icon cards
|
||
|
||
## Colors
|
||
|
||
Committed emerald on pure iron neutrals.
|
||
|
||
### Primary
|
||
- **Signal green** (`#1a7f4e` light / `#50c878` dark): buttons, focus, success marks, key links
|
||
- **Deep canopy** (`#14663e`): hover/pressed primary
|
||
|
||
### Neutral
|
||
- **Ink** (`#09090b` / `#fafafa` dark): primary text
|
||
- **Iron white** (`#ffffff`): page background (light)
|
||
- **Surface** (`#f4f4f5` / `#16161a`): elevated panels
|
||
- **Muted** (`#52525b` / `#a1a1aa`): secondary text
|
||
- **Seam** (`#e4e4e7` / `#27272a`): borders
|
||
- **Terminal night** (`#0a0a0c`) / **Terminal leaf** (`#6ee7a8`): install command surfaces
|
||
|
||
### Status (comparison tables)
|
||
- **Yes:** primary emerald
|
||
- **No:** soft rose `#c45c5c` light / `#e08b8b` dark (distinct without form-error noise)
|
||
|
||
### Named rules
|
||
**The one signal rule.** Emerald is the only chromatic accent on marketing pages (except status-no rose on comparison marks). No purple, cyan glow pairs, multi-colored metric chips, or rainbow icon tiles.
|
||
|
||
**The iron surface rule.** Backgrounds stay pure white or near-black iron. Never warm cream/beige as the default, and never purple-to-blue gradients.
|
||
|
||
## Typography
|
||
|
||
**Display:** Bricolage Grotesque
|
||
**Body:** Source Sans 3
|
||
**Mono:** system UI monospace for install commands only
|
||
|
||
No Geist/Inter as the whole-page face.
|
||
|
||
### Hierarchy
|
||
- **Display** (600, clamp 2.25–3.75rem): home hero
|
||
- **Headline** (600, clamp 1.75–2.5rem): section titles
|
||
- **Title** (600, ~1.125rem): card/row titles
|
||
- **Body** (400, ~17px, 1.65 lh, max ~70ch)
|
||
- **Label** (600, ~0.8125rem): nav, meta; mono uppercase only for short kickers
|
||
|
||
### Named rules
|
||
**The no costume mono rule.** Monospace is for shell commands, paths, and config keys, not marketing labels.
|
||
|
||
## Layout
|
||
|
||
- Content max width ~72rem
|
||
- Section vertical rhythm ~4–6rem; more space above a heading than below it
|
||
- Home first viewport: asymmetric offer + screenshot when wide; stacked on small screens
|
||
- Install strip full-bleed dark band
|
||
- Features: settings shot paired with a stretched feature rail (matched heights)
|
||
- Child pages: breadcrumbs + content in `max-w-6xl`, shared shell chrome
|
||
|
||
## Elevation and shapes
|
||
|
||
Flat by default. Soft shadows only on terminal / primary elevated panels, not hairline + wide glow together.
|
||
|
||
- Panels and cards: 6–14px radius (use 12px as the common surface radius)
|
||
- Pills only for small controls (Install nav chip, default engine badge)
|
||
|
||
## Components
|
||
|
||
### Buttons
|
||
- Primary: solid signal green, white text, full-pill on marketing CTAs
|
||
- Secondary/ghost: border + background, no scale-bounce hover
|
||
- Focus: 2px ring in primary
|
||
|
||
### Feature rail
|
||
- Single bordered panel, divided rows, link affordance on the row
|
||
- No oversized icon tiles stacked above headings
|
||
|
||
### Terminal panel
|
||
- Near-black surface, leaf green command text, copy in chrome
|
||
- Long URLs wrap (`break-all` / `overflow-wrap`) so mobile never overflows
|
||
|
||
### Navigation
|
||
- Fixed translucent bar, seam border
|
||
- Home: simple links + Install pill
|
||
- Child: category dropdowns + Install pill + theme toggle
|
||
|
||
## Do's and don'ts
|
||
|
||
### Do
|
||
- Lead with install and real product proof (screenshots)
|
||
- Keep product claims accurate (offline local engines; remote only when configured)
|
||
- Keep marketing copy short and specific
|
||
|
||
### Don't
|
||
- Gradient text, animated mesh/orb backgrounds, or cyan+green dual glows
|
||
- Repeated icon-in-rounded-square feature cards as the page structure
|
||
- Tracked uppercase eyebrows on every section
|
||
- Scatter identical fade-up motion on every block
|
||
- Invent metrics, testimonials, or "blazing" claims
|