Files

T

xavierk c9be45d3c3 fix(web): link the fork's own source host and drop the upstream star count

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.

2026-11-06 18:22:17 +05:30

6.3 KiB

Raw Blame History

name, description, colors, typography, rounded, spacing

name

description

colors

typography

rounded

spacing

Voculinux website

Linux voice dictation marketing site in the Carbon-mapped house-palette language

paper	paper-deep	paper-bright	ink	muted-copy	faint	line	brand	brand-dark	brand-soft	brand-softer	dark-ink	sun	red	terminal	terminal-fg
#f4f1e8	#ebe5d8	#fffdf7	#14231c	#58625c	#5f6861	#c9c8bd	#0f6b57	#0b493d	#cfe9dc	#e5f2eb	#0b1a15	#e9b949	#de6a57	#0b1a15	#cfe9dc

display	body	mono
"Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif	ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif	ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace

sm	md	lg
0.45rem	1rem	1.4rem

shell	section-y
min(1180px, calc(100% - 2rem))	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

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

6.3 KiB Raw Blame History Unescape Escape