The WiFi.ee design system.

One family, different people and devices

The system covers discovery, field maintenance, venue operations and quick connection. Each product keeps the controls and density that suit its task and platform. The inventory below comes from fetched default-branch source revisions inspected on 23 October 2026.

Source evidence and configured device targets are recorded here. Store distribution, a successful native build and hands-on device validation are separate checks. Sizes below use each platform’s layout units, CSS px/rem on the web and millimetres for print.

The older Meteor website is a separate legacy implementation. Archived prototypes are historical references. No dedicated Wear OS, TV or spatial-computing app is established by this inventory; those need an explicit product scope and adapter before being added as supported platforms.

Adapt to the device and the task

Shared meaning travels between products. Navigation, typography, target size and information density adapt to the available window and input. The following are system requirements for adoption and acceptance, rather than claims that every app already passes them.

Platform references: Apple · Accessibility · Android · Accessible apps.

Shared contracts, platform adapters

Standardize the role and meaning before sharing implementation. The proposed semantic layer maps into web CSS, React Native theme objects and SwiftUI system styles. It does not require every platform to render the same button or use the same navigation.

Adoption sequence: retain the existing identity → map source tokens to semantic roles → implement one adapter per product → validate on its devices → record the released revision. Admin and Café dark themes, a shared runtime token package and full native accessibility acceptance remain adoption work.

A familiar identity

Keep the established orange-and-dark badge intact. Use “WiFi.ee” in prose and “wifi.ee” for the domain. Preserve the logo’s proportions, colors and lettering. The available master here is a 100 × 32 pixel PNG; recover a vector or larger original before print or large-format use.

Orange supports recognition. Blue identifies consumer actions and web focus, teal belongs to Admin and brown to Café. Native system surfaces retain their platform semantics. These product palettes do not describe network-security ratings.

The web adapter · colors

The neutral colors below are extracted from the web stylesheet. Swatches follow the site’s selected theme. Use the appearance control in the header to switch between light and dark. Tailwind action colors retain their CSS token names so their current values are not confused with older hex approximations.

Use text as well as color for open, closed, unknown, loading and error states. A green state or orange badge must describe specific evidence, rather than imply that every listed network is secure.

The web adapter · typography

The web uses the platform system sans stack, with no custom brand font configured. Buttons use 14px semibold type. Content sizes vary by context; the shared draft proposes a common scale rather than claiming every product already uses it.

The numbers above are type specimens, not live measurements. Use sentence case, clear action verbs and tabular numerals for comparable values. Keep units and dates visible, and allow longer Estonian labels to wrap.

The web adapter · layout and shape

Try the web components

These actions use the same global button classes as the website. Use Tab to see focus, activate Save with Enter or Space, filter the example cards, and reset the preview. The disabled action stays unavailable.

<button type="button" className="btn btn-primary">
  Save example
</button>

Patterns that preserve meaning

• Unknown is a real state. Missing opening hours do not mean closed, and no speed measurement does not mean zero Mbps.
• Keep venue status, Wi-Fi availability, payment conditions and security assessment separate. Show the source and date where a claim depends on evidence.
• Loading, offline, empty and failed states need distinct text and a useful next action. Preserve entered information when retrying a request.
• Use the retained logo for identity and simple icons for navigation. A lock or signal icon alone is not proof of a security audit.

Read the measured website-quality report

Download and use

• Full product and device inventory, palettes, revisions and source hashes · JSON
• Current web tokens and source hashes · JSON
• Cross-product CVI and design guide · draft PDF
• Complete 14 October draft kit · ZIP

The kit includes the original guide, tokens, source inventory and component contracts. Its Consumer, Admin and Café previews illustrate proposed shared adapters. Downloading the kit does not change any application’s theme or native release.