Website visual identity

Website specimens

Real website roles and controls. Both themes use the declarations in theme.css; these samples remain available without JavaScript.

Light · website

A clear place to start.

Fira Sans for reading and controls. Readable emphasis, Czech characters: Příští déšť.

Supporting text still carries useful contrast.

Set up your PebbleDesign principlesFocus exampleNo changes to save

Links open real guides. Tab shows keyboard focus; the final button is genuinely disabled.

Page

--bg#e8edf0

Reading surface

--paper#f8fafb

Text

--ink#172127

Supporting text

--muted#53616c

Action

--accent#006bb6

Link

--accent-text#0065aa

Focus

--focus#006bb6

Border

--line#bcc9d2

Dark · website

A clear place to start.

Fira Sans for reading and controls. Readable emphasis, Czech characters: Příští déšť.

Supporting text still carries useful contrast.

Set up your PebbleDesign principlesFocus exampleNo changes to save

Links open real guides. Tab shows keyboard focus; the final button is genuinely disabled.

Page

--bg#171d21

Reading surface

--paper#20282d

Text

--ink#f1f6fa

Supporting text

--muted#b3c0c9

Action

--accent#29afff

Link

--accent-text#64c5ff

Focus

--focus#69c8ff

Border

--line#4c5d68

Spacing in use

8px

12px

16px

24px

36px

Common existing gaps and article padding, not a new global token scale.

Shape roles

small · 4px

control · 7px

pane · 14px

Six identities, one family

These product accents identify the presentation. Blue remains the website action colour.

DynamicClock + changing readingsAdapting bands · #397cffHalftoneClock + dithered bezelOrange dots · #ff650bTimerHourglassTime arcs · #9584ffDashboardDistinct panelsPanel grid · #5bceb2Open ActivityArrow entering a paneDirectional path · #b99affČHMÚ WeatherSun, cloud and rainAtmospheric contours · #82d6f0

The specimens above use this website’s real CSS and product marks. The website family is cool silver and graphite, blue actions, Fira typography and restrained physical depth. Product accents distinguish the apps; they do not replace the interaction colour.

These are web and marketing rules. Phone settings and native watch interfaces have their own typography, controls and palette constraints.

Colour and material

Use semantic roles from theme.css, not a convenient product accent. --ink and --muted distinguish text roles; --accent-text is for links, --accent with --accent-ink for prominent actions, and --focus for a visible keyboard boundary.

Page, reading, control and product-stage surfaces have different jobs. Reading areas are opaque and quiet. Fine highlights and contact shadows group a control or stage; do not add a floating panel around every sentence. Supporting text still needs readable contrast in both themes.

/* Reuse the existing roles in a website component. */
.example-reading { color: var(--ink); background: var(--paper); }
.example-link { color: var(--accent-text); }
.example-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

The website’s theme control offers System, Light and Dark. Explicit choices persist across navigation. Forced colours, reduced transparency and reduced motion need usable fallbacks; colour must not be the only indication of selection, failure or focus.

Typography and the name

Use Fira Sans for reading and controls, and Fira Sans Condensed for headings. Ordinary headings use weight 700; prominent home/product headings can use 800. The existing documentation body is 1.0625rem with line-height1.8 on larger screens, and 1rem/1.75 on narrow screens. Its reading width is bounded rather than filling a large monitor.

The outlined XOCE wordmark uses Fira Sans Condensed ExtraBold and follows the foreground colour. The X favicon uses the same letter on blue. The name means Xef’s Open Computing Ecosystem. Keep the supplied vector’s proportions and clear space; do not reconstruct it with live text or add a background tile.

Fonts are self-hosted Latin/Latin Extended WOFF exports, including Czech. Font provenance pins their sources and hashes, and the OFL accompanies them. Historical Inter and Space Grotesk assets retain their original credits.

Spacing and shape

Reuse the existing component before inventing a new measurement. Current shape roles are 4px for small corners, 7px for controls and 14px for panes. Common local gaps include 8, 12, 16 and 24px; the desktop article gutter is 36px and narrows with the viewport. These are existing applications, not a requirement to snap every composition to one grid.

Keep related labels, values and help close together; leave more space between tasks. Ordinary touch controls need a comfortable target, with 44px as the starting target used by the site. Test the real narrow layout and enlarged text rather than relying on nominal dimensions.

Pages and controls

Blue identifies links and actions across all product pages. The primary action should name its destination or result. A quieter action stays on the parent surface. Hover, press and keyboard focus are distinct; a focus ring must remain visible over both silver and graphite.

Desktop pointer controls may depress slightly while pressed. Touch controls stay stationary and respond through colour and light. A disabled action uses an actual disabled control and an understandable reason; appearance alone cannot disable a link. The disabled specimen is a native button, while the other specimens are working documentation links.

Home and Software group two watchfaces, three watch apps and a separate phone plugin. Product pages put purpose, a genuine demonstration and installation/compatibility information together. On mobile the introduction is followed by the demonstration, then the longer detail. The docs remain a calm reading surface with explicit navigation.

Product artwork and images

Use the six symbols and motifs above as a family. Keep the monochrome silhouette clear at small sizes. Device treatment, title typography, spacing and the small XOCE endorsement tie banners together; composition and meaningful geometry belong to each product. Halftone keeps orange dots rather than donating its separator to every other app.

Website marks follow the page theme; marks on graphite stages are white. Store icons are one-colour black glyphs on a transparent background with binary alpha, marked icon_tintable; tiles, shadows and device frames are not baked into them. The current native launcher exports are black on transparent, chosen for actual firmware rows; they are separate files from the Store and website marks.

Banners are 720×320 marketing compositions. Standalone Store screenshots are raw, unframed native PNGs: 200×228 for Emery and 260×260 for Gabbro. Website device previews use the credited official frame files without changing their proportions or source pixels.

Dynamic’s side-by-side states and Open Activity’s labelled Dynamic→Timer example are separate real captures, not a synchronized recording or invented helper interface. ČHMÚ has no watch screen: its hero presents actual browser settings and links to the full image. The image provenance distinguishes artwork, emulator rendering and simulated phone previews.

Maintaining the identity

theme.css owns colours/material roles; identity.css owns the approved presentation; guide.css owns reading geometry. The specimens read the production theme declarations at build time. Keep shared navigation, wordmark and preview components in use.

Append new versioned artwork and provenance when assets change. Historical images, official device frames, app screenshots, licences and earlier review bundles retain their bytes and credits. Validate desktop/mobile, both themes, keyboard focus and reduced-motion/forced-colour behaviour on the rendered page.