WiFi.ee CVI & Design System 1.0.0-draft PDF guide

WiFi.ee / Current work / 14 October 2026

A place
to connect.

A familiar identity. A practical system.
Built around the places people use.

Corporate visual identity and product foundations.
Source-based guide with proposed shared standards.

WiFi.ee original logo
Find a placeConsumer & web
Keep it usefulAdmin
Welcome peopleCafé
One identity. Different jobs.
Draft for review

Retains the existing logo and product palettes. New naming, rules and examples are proposals. The examples use illustrative data.

Recognizable everywhere.

The orange badge anchors the family. Clear, useful information gives it meaning.

Useful place information,
clearly explained.

WiFi.ee connects discovery with the work of maintaining places. The proposed visual identity is local, practical and welcoming, with precise language about what is known.

Put the place first

Names, location and useful details lead the experience.

Make the next action clear

Search, save, get directions and maintain information.

Show what is known

Keep unknown, stale and unavailable information distinct.

Respect the platform

Shared meaning with familiar native controls.

Existing WiFi.ee logo, enlarged specimen½ logo heightKeep the supplied artwork intact

Existing 100 × 32 PNG, enlarged here to inspect the artwork. A vector or larger master is needed for large, print and high-density use.

WiFi.eeProse & accessible namewifi.eeDomain & original lettering

Keep proportions, color, lettering and the supplied symbol.

Reserve clear space of at least half the rendered height.

Recover a master asset before creating icon or print variants.

The supplied symbol is preserved; its appearance does not establish trademark registration. No replacement logo is introduced.

Four roles, one family.

Recognition stays orange. Product actions retain the colors already in use.

Recognition orange#F47932

Sampled from the existing logo. Proposed solid identity token.

Consumer#1D4ED8

Discovery, selection and saved places. Web primary: #2563EB.

Admin#0F766E

Teal actions with olive-tinted operational surfaces.

Café#9F4F2D

Warm brown actions with cream and sage supporting colors.

Consumer light

#F8FAFC canvas
#FFFFFF surface
#0F172A text

Consumer dark

#020617 canvas
#0F172A surface
#F8FAFC text

Admin

#F3F4ED canvas
#FFFDFA surface
#10201B text

Café

#F7F0E6 canvas
#FFFAF2 surface
#2A211C text

Color is a role, not a claim.

Orange is recognition; blue, teal and brown are actions. Green means a stated result or known venue-hours status, never a blanket network assurance. White text on the orange sample is excluded for normal text.

Type that stays out of the way.

System sans, a clear scale and enough room for both languages.

Leia Wi-Fi kohti.

Find a place nearby, see the available information and save it for later.

Õ Ä Ö Ü Š Ž
õ ä ö ü š ž

Platform system fonts. No new brand-font dependency.

Proposed shared type scale
RoleSize / lineWeight
Display48 / 54700
Page title32 / 40700
Section24 / 32600
Subheading20 / 28600
Body16 / 24400
UI label14 / 20600
Caption12 / 18400

Use rem and scalable native text. Allow text to grow and reflow. Distances, hours and speeds use tabular numerals.

Plain language

Use sentence case. Name the action. Give the next step when something fails.

“Hours unknown” / “Lahtiolekuajad teadmata”
“Changes saved” / “Muudatused salvestatud”

Truth before reassurance

“Open now” describes venue hours. A listing, badge or lock icon does not establish a fast, online or secure network. Show sources, dates and measurement scope where relevant.

A common rhythm.

Shared foundations with deliberate product geometry.

Spacing / 4 px base

4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64 logical px

Shape has a job

Input
8
Button
12
Card
16
Pill
999

Proposed shared defaults. Preserve web pill buttons; Admin section 24/padding 18 and Café section 18/padding 20 remain product adapters.

Layout

72 rem web maximum. 20 px narrow gutters; 32 px documentation gutters. A single readable column before adding list/map splits.

Elevation

Subtle card elevation; stronger overlays. Keep Android elevation and iOS shadows platform-specific.

Motion

150 ms feedback, 220 ms state changes, 280 ms entry as proposed defaults. Honor reduced motion; no endless signal pulse.

Touch & focus

44 px shared target baseline; 48 on Android. Keep focus visible and away from sticky or floating chrome.

Geometry and motion values are normalized proposals, not universal extracted implementation values. Detailed differences are in the source audits.

Try the system.

Interactive specimens use the proposed semantic adapters over existing palettes.

WiFi.ee

Find Wi-Fi places

Illustrative data

Consumer supports light and dark.

Buttons
Primary, secondary, ghost. Default, hover, focus, active, disabled and busy.

Search & filters
Visible label, explicit pressed state, count announcement and clear empty state.

Venue card
Place first. Hours separate from network status. Bookmark independent of navigation.

Full component contracts and state matrix

Known. Unknown. Unavailable.

Keep information states separate so people can make a useful decision.

Open now

Known venue hours

Use the venue’s time zone, relevant date and available source. This describes the place’s schedule.

Hours unknown

No authoritative hours

Use neutral wording. Do not infer “closed” from missing data or “open” from a map marker.

Could not load hours

Read unavailable

Offer retry. A failed read is not evidence that hours do not exist. Keep previously saved information visible.

Saved information

Offline or stale

Show cache state and last update when known. A cached “open now” status must be reevaluated or marked stale.

Forms that explain the next step

Example form. Changes stay in this specimen.

Operational actions

Show save progress, preserve entered values after a failure, and report what succeeded. Gallery uploads show per-file failures. A published label describes content status; management permission is a separate question.

For destructive changes: name the item and consequence, provide a clear cancel action and return focus after the dialog closes.

Admin/Café contracts share these behaviors while retaining their own palette and section geometry.

From screen to place.

Identity applications that remain useful in the real world.

Wi-Fi teave

Leia koht.
Vaata infot.
Ühendu.

wifi.ee
Signage layout concept · not production artwork

Venue name

Listed on WiFi.ee
Leitav WiFi.ee-s

WiFi.ee

Separate identities, clear space and a verified destination.

Photography

Use the actual place: entrance, workspace or seating context. Show useful detail. A stock image is not venue evidence. Keep private network credentials out of public imagery.

Wayfinding

Use a readable URL before a QR. Test the actual destination. A QR to information does not promise automatic joining. Preserve current router-linked poster assets and paths.

Artwork shown here is a layout proposal. No QR, endorsed venue, new logo or print-ready sticker is represented as approved.

Legibility is part of the identity.

Check pairs, behaviors and real layouts. A palette alone is not compliance.

Measured color pairs

sRGB contrast calculations from the supplied tokens
PairRatioUse

Normal text target: ≥4.5:1. Non-text control boundary target: ≥3:1. Values are not rounded to determine pass/fail.

Acceptance checklist

  • Complete keyboard path and visible, unobscured focus.
  • Text, control and meaningful icon contrast.
  • Labels, pressed/busy states and error association.
  • Reflow at 320 CSS px and text growth at 200%.
  • VoiceOver/TalkBack, Dynamic Type and reduced motion.
  • Estonian/English content, long names and venue time zones.
  • Unknown, stale, offline, loading and read-error states.

44 px shared targets and 48 px Android targets are proposed product baselines. WCAG 2.2 AA’s target-size criterion is 24 × 24 CSS px with stated exceptions.

Standards: W3C text contrast, target size, focus not obscured.

Ready to review. Built to evolve.

Keep observed implementation, proposed standards and verified adoption distinct.

The adoption sequence

  1. Recover the master identity asset.Resolve logo/icon fidelity before print or high-density use.
  2. Agree semantic token names.Add aliases, retain existing keys and product palettes.
  3. Adopt one component per surface.Verify color, geometry, state, keyboard and native behavior.
  4. Migrate patterns and close gaps.Hours, offline states, forms, map/list and gallery feedback.
Current source is the baseline.

Consumer uses NativeTabs, a UnifiedHeader and right-side drawer in current native routes. Older consumer design documents describe superseded navigation. Admin and Café retain their own palettes. Watch and macOS keep native control/material conventions.

This local package changes no production application. The examples are illustrative; the standard is a review draft. Print color matching, vector artwork, icon-family production and application rollout remain explicit adoption work.