xavierk
c9be45d3c3
The header badge fetched the star count of VocaHQ/vocalinux at build time and labelled it as Voculinux's. The fetch and the count are gone; the header, footer and social "source" links now go to the fork repository at git.bongbetic.com/xavierk/voculinux, as do the issue links, the docs anchors, the home page JSON-LD and the xbps release card. Upstream GitHub stays only where it is the real artefact or provenance and is labelled as such: the install script, the AppImage release card, the upstream card and the changelog release links. The changelog now says its entries are upstream history, the open-source page no longer claims VocaHQ membership or an active GitHub community, and the organization JSON-LD drops the upstream author as founder. DESIGN.md and PRODUCT.md follow.
163 lines
6.3 KiB
Markdown
163 lines
6.3 KiB
Markdown
---
|
||
name: Voculinux website
|
||
description: Linux voice dictation marketing site in the Carbon-mapped house-palette language
|
||
colors:
|
||
paper: "#f4f1e8"
|
||
paper-deep: "#ebe5d8"
|
||
paper-bright: "#fffdf7"
|
||
ink: "#14231c"
|
||
muted-copy: "#58625c"
|
||
faint: "#5f6861"
|
||
line: "#c9c8bd"
|
||
brand: "#0f6b57"
|
||
brand-dark: "#0b493d"
|
||
brand-soft: "#cfe9dc"
|
||
brand-softer: "#e5f2eb"
|
||
dark-ink: "#0b1a15"
|
||
sun: "#e9b949"
|
||
red: "#de6a57"
|
||
terminal: "#0b1a15"
|
||
terminal-fg: "#cfe9dc"
|
||
typography:
|
||
display: '"Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif'
|
||
body: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
|
||
mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
|
||
rounded:
|
||
sm: "0.45rem"
|
||
md: "1rem"
|
||
lg: "1.4rem"
|
||
spacing:
|
||
shell: "min(1180px, calc(100% - 2rem))"
|
||
section-y: "5.5rem"
|
||
---
|
||
|
||
# Design system: voculinux.com
|
||
|
||
## Overview
|
||
|
||
**Creative north star: the Linux desk, Carbon-mapped to the house palette**
|
||
|
||
Voculinux.com is the fork site. It adopts Carbon's spacing, type-role, motion, and contrast discipline remapped to the house palette — warm paper, deep green ink, one teal accent, editorial type, flat surfaces, and real product proof. Carbon blue and Carbon typefaces are not adopted; system stacks only. Bongbetic appears only as attribution chrome in the header and footer, linking hosted assets.
|
||
|
||
The Linux-specific job is to show local desktop dictation with distribution and display-server truth. Pair a GTK-style window (not macOS traffic lights) with a terminal. Explain the user outcome before the install command.
|
||
|
||
Child pages share the same shell, tokens, and paper canvas. Paper is the only
|
||
marketing theme. There is no site-wide dark mode. The screenshots gallery is
|
||
the exception: a page-local Light/Dark flip shows the captured GTK shots in
|
||
both appearances, defaulting to `prefers-color-scheme` until the visitor
|
||
overrides it for that tab.
|
||
|
||
## Colors
|
||
|
||
Warm paper with one product teal. No second chromatic brand color.
|
||
|
||
### Surfaces
|
||
- **Paper** `#f4f1e8`: page canvas
|
||
- **Deep paper** `#ebe5d8`: recessed bands (install, engines)
|
||
- **Bright paper** `#fffdf7`: windows and cards
|
||
- **Dark ink** `#0b1a15`: panel bar, terminal, optional dark band
|
||
|
||
### Ink
|
||
- **Ink** `#14231c`: headings and strong borders
|
||
- **Muted copy** `#58625c`: body
|
||
- **Faint** `#5f6861`: metadata
|
||
- **Line** `#c9c8bd`: quiet borders
|
||
- **Line dark** `#9ea59f`: window outlines
|
||
|
||
### Accent
|
||
- **Brand teal** `#0f6b57`: primary buttons, links, live marks
|
||
- **Dark teal** `#0b493d`: hover / pressed
|
||
- **Mint** `#cfe9dc` / **mint soft** `#e5f2eb`: tags and chips
|
||
|
||
### Annotations only
|
||
- **Sun** `#e9b949`: focus rings
|
||
- **Red** `#de6a57`: recording dot, never as a brand fill
|
||
|
||
### Named rules
|
||
**The family paper rule.** Backgrounds stay warm paper, with dark ink only for the tray bar, terminal, and ribbon. Not zinc white, not a second site-wide dark theme, not purple mesh.
|
||
|
||
**The one signal rule.** Teal is the only chromatic accent on marketing pages. Yellow and red are physical details (focus, recording), not competing brands.
|
||
|
||
**The no-gradient rule.** Solid fills only. No linear, radial, or conic gradients.
|
||
|
||
## Typography
|
||
|
||
System-first, system stacks only; no remote webfonts.
|
||
|
||
- **Display:** Avenir Next / Helvetica Neue / Segoe UI / Arial
|
||
- **Body:** system UI sans
|
||
- **Mono:** system UI monospace for commands, tags, and metadata
|
||
|
||
No remote webfonts. No Geist, Inter, or Bricolage as the page face.
|
||
|
||
### Hierarchy
|
||
- **Hero display:** clamp ~3.7–7.4rem, weight ~780, tracking -0.075em, line-height ~0.92
|
||
- **Section title:** clamp ~2.2–4.7rem, tracking -0.065em
|
||
- **Body:** 16–18px, line-height ~1.65. Reflow with the shell; do not pretty-wrap or cap titles at 20ch
|
||
- **Mono tags:** ~0.7rem, used sparingly
|
||
|
||
Accent words in a headline use the same family, `font-style: normal`, brand color. Do not mix a second family into a heading.
|
||
|
||
## Layout
|
||
|
||
- Shell: `min(1180px, calc(100% - 2rem))`
|
||
- Sticky paper header, ~70px, one line of nav on desktop
|
||
- Home first viewport: split offer + Linux workbench when wide; stacked on small screens
|
||
- Section padding ~5.5–9rem desktop, ~4–6rem mobile
|
||
- Alternate paper / deep paper for rhythm
|
||
- Child pages: breadcrumbs + content in the same shell
|
||
|
||
## Elevation and shapes
|
||
|
||
Flat fills, 1px borders, paper-window shadows. Small rotations only on decorative notes, never on long copy or controls.
|
||
|
||
- Controls: 0.45rem radius
|
||
- Windows: ~10–14px radius
|
||
- Pills only for tiny tags (engine badge, section tag)
|
||
|
||
## Components
|
||
|
||
### Buttons
|
||
- Primary: brand teal, paper-bright text, 44px min height
|
||
- Homepage / closing CTA: "Install Voculinux", jumps to `#install`
|
||
- Secondary: transparent with a 3:1 control outline
|
||
- Hover: 2px lift, no bounce scale as the only affordance
|
||
- Focus: 3px sun outline, 3px offset
|
||
|
||
### Linux window
|
||
- GTK-style headerbar: title, then window controls on the **right**
|
||
- Grey control circles, not red/yellow/green traffic lights
|
||
- Bright paper body, dark ink panel bar above (tray analogue)
|
||
|
||
### Terminal
|
||
- Dark ink surface, mint command text, copy in the chrome
|
||
- GTK headerbar: copy on the left, title centered, grey window controls on the **right**
|
||
- Prompt is `user@linux:~$` with colored user, host, and path, not a Mac `$`
|
||
- Long URLs wrap (`break-all` / `overflow-wrap`) so mobile never overflows
|
||
|
||
### Navigation
|
||
- Sticky paper bar, mark + name, 3–5 text links, a "Source" link to the fork repository on desktop (no star count)
|
||
- Mobile menu keeps Install Voculinux as the conversion action
|
||
- Real mobile disclosure with `aria-expanded`
|
||
- Resource-rich footer, not a second mega-menu in the header
|
||
|
||
### Screenshot gallery
|
||
- Paper chrome stays paper; do not put `html.dark` on this page
|
||
- Light/Dark is a sliding switch over stacked light and dark PNG pairs
|
||
- Default from the browser color scheme; `sessionStorage` holds a tab override
|
||
|
||
## Do's and don'ts
|
||
|
||
### Do
|
||
- Lead with the dictation outcome, then the install command
|
||
- Use real screenshots and a faithful Linux window, not a fake SaaS dashboard
|
||
- Keep product claims accurate (offline local engines; remote only when configured)
|
||
- Honor `prefers-reduced-motion`
|
||
|
||
### Don't
|
||
- CSS gradients, gradient text, mesh/orbs, or glass panels
|
||
- macOS traffic-light chrome on Linux surfaces
|
||
- Tracked uppercase eyebrows on every section
|
||
- Invent metrics, testimonials, or "AI-powered" claims
|
||
- Recolor the Voculinux mark
|