Entrixy — design guide

The problem

Material icons from androidx.compose.material.icons.outlined.* share a nominal size — a 24×24 grid — but the drawn part differs from one to the next. Give them all a plain Modifier.size(24.dp)and some will look big and heavy (Bolt, Delete) while others look tiny (Contacts, VpnKey). They need calibrating by hand.

The calibration method

1. Take a screenshot of the screen with the icons in their 38 dp circles — our landing slot.
2. With Python, PIL and numpy, measure the bounding box of the drawn glyph — its maximum width and height in pixels.
3. The formula: new_size = 24 × 52 / measured_px, clipped to [18..28].
4. Then centre it in the 38 dp slot, vertically and horizontally.

52 px is the reference painted glyph, Fingerprint; everything is measured against it as the unit.

The resulting size map

AutoMode

Used everywhere Bolt used to be — the Automation button on a key card, the section icon in settings. Size 26 dp, the same as Bolt.

Where the table lives in the code

IconsDebugSheet.kt — the map iconSizeByName. The debug screen is opened from SettingsScreen with the "UI icons (debug)" button: a FlowRow of calibrated icons on top and a list of names, sizes and contexts below.

We use the standard Material 3 roles, deliberately limited to four:

The scale

We agreed to work in multiples of 2 / 4 / 8 / 10 / 14 / 16 / 20. No feast or famine: identical elements get identical spacing.

Between cards in the main scroll

• The bottom sheet container: spacedBy(12.dp). Cards are 12 dp apart.
• Horizontal padding of the sheet content: padding(horizontal=20.dp).

Inside a card (RuleCard)

• Padding on every side: 16 dp.
• The header — circle, title, chevron, switch — is one row: 14 dp between the circle and the title, 12 dp between the title and the switch.
• From header to body when expanded: padding(top=16.dp).
• The body uses verticalArrangement = spacedBy(16.dp) between the major blocks.

Inside a FieldSection (label plus content)

• Columnarrangement: spacedBy(2.dp). Only 2 dp between the bold label and the status or hint beneath it, so they read as a title-and-caption pair.
• The same rule covers any paired text: 2 dp everywhere, no exceptions. It used to be 0 dp in one place and 2 dp in another, and that jarred.

Pill buttons and statuses

• From a status or hint to a pill button: Spacer(10.dp). The same in Geo, Wi-Fi connect and the Wi-Fi list.

Sliders are a special case

A Material 3 slider occupies about 48 dp of layout because of the minimum touch target, of which the visible track is only about 4 dp in the middle, with roughly 22 dp of empty touch area above and below. Hence:

• Between the status text and the slider we apply Modifier.offset(y=-16.dp) to pull the thumb up to the text.
• Below the slider we apply Modifier.sliderTrim() (a helper in GuestAutomationEditor.kt), which reports a height of 22 dp to the parent instead of 48 dp. That way the card's padding(16.dp) gives the same gap from thumb to bottom edge as on cards that end with a pill button.

Three levels of trust in a guest

Every rule — Geolocation, Wi-Fi, Time, Authorisation, Confirmation — and the Activation block takes one of three levels. The card's icon circle takes the matching colour when the switch is on.

With the switch off the circle turns grey (#9AA0A6), whatever level is selected.

Rules for the level descriptions

• Write in the third person, never "I" or "by me". Say "the guest", "the setting", "the value".
• One sentence takes no full stop (see "Text rules").

The coloured circle with an icon (38 dp)

A single 38 dp landing slot throughout the app:

• Size: 38dp, CircleShape, with the background set to the level colour.
• Inside sits the icon at its calibrated size (see section 1), in white.
• The content is centred: contentAlignment = Alignment.Center.

Radio buttons

Wrap them in Box(Modifier.size(38.dp), contentAlignment=Center) { RadioButton(...) } so that the centre of the radio circle lines up with the centre of the coloured circle above. Without the wrapper the radio drifts horizontally, because RadioButton renders with padding of its own.

Between a radio button and its text: Spacer(14.dp). Between radio rows in a group: Column(spacedBy(4.dp)).

The minimum touch target is disabled: CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) — otherwise each radio row swells to 48 dp and breaks the rhythm.

Switch

A standard Material 3 switch, to the right of the card title. It turns the whole rule off, and the level colour is then not shown — the circle goes grey.

Segmented row

A custom control for switching modes inside a rule — currently only in Wi-Fi: "By a specific network" / "By the networks around". Two items in a Row, each with weight(1f):

• The background of the whole thing: colorScheme.surface, RoundedCornerShape(10.dp), padding 4dp.
• Selected: a background of primaryContainer, RoundedCornerShape(8.dp), with SemiBold text.
• Unselected: transparent, regular weight.

Pill buttons

An outline, an icon and text, fully rounded. Used for secondary actions — "Use the current position", "Take a snapshot of nearby networks". When disabled, the outline and text drop to alpha=0.4.

Slider

See section 3 on offset(y=-16.dp) and sliderTrim(). A slider is always preceded by a StatusLine carrying status text (bodySmall, muted) — "74 m · maximum, the guest may lower it".

The level dropdown

Opened by tapping the card's title row — the whole Row except the switch. It appears directly under the header, across the full width of the card's content. For that:

• the Row is wrapped in a Box with onGloballyPositioned, and we measure its width in dp.
• The DropdownMenu receives that width through DropdownMenuItem with the modifier Modifier.width(anchorWidthDp).

The dropdown items breathe rather than being flat rows: a colour marker on the left, the label in bold, the description beneath in small muted type. They align vertically on the first line, the label.

The pulsing Activation circle

Unlike the ordinary coloured circles of the rules, Activation's header circle pulses.

• Inside the 38 dp slot: a solid 28 dp circle, with no icon.
• On top: two concentric waves drawn with drawBehind + Stroke(width=6dp).
• The wave radius grows linearly from 14 dp to 19 dp — half of 38 dp.
• The cycle lasts 2000 ms, with the second wave offset by 1000 ms.
• Easing: strictly LinearEasing. Not FastOutSlowInEasing — otherwise the cycle restart shows a visible puff.
• Alpha follows the curve sin(π·p) × 0.6: at p=0 and p=1 alpha is 0, peaking in the middle. The restart is invisible.

Punctuation

A single sentence in an interface string takes no full stop. Full stops appear only when there are two sentences or more, to separate them. This covers every description, hint, status, tooltip, heading and standalone phrase.

Whose voice we write in

• Not allowed: "I set the exact value", "I restrict nothing".
• Allowed: "The value is set", "The guest picks the setting themselves".

Choosing between a maximum and an exact value

In slider statuses in yellow (Preset) mode we state the direction of freedom plainly:

• Radius: "74 m · maximum, the guest may lower it" — smaller is stricter.
• Wi-Fi threshold: "5 of 7 · minimum, the guest may raise it" — larger is stricter.

In red (Locked): "74 m · exactly" / "5 of 7 · exactly".

The level labels are settled

"The guest decides / Preset / Locked" have stuck; we do not change them.

A switch, or a "not selected" radio option

If a rule has an off state, express it with a switch rather than a radio option like "Not required / No / Off". Otherwise the user has two ways to turn the same thing off, which is confusing.

Examples:

• Authorisation: switch off means it is not requested. Switch on reveals only the three real methods: PIN, biometrics, or PIN or biometrics.
• Confirmation: switch off means the call goes automatically. Switch on means the guest presses a button. No radio buttons are needed inside — the switch carries it all.

Coordinates and the actions on the right

In the Coordinates block the copy and delete icons sit on the right level with both lines (the label and the status). Implemented as Row { Column(weight=1f) { label; status }; CopyIcon; DeleteIcon }. The icons are centred vertically against the pair as a whole.

Showing and hiding a card's body

The body expands only when:

• the switch is on, and
• the level is not OWN — with "The guest decides" the body is pointless, since we set nothing.

Animation: expandVertically(tween(220)) + fadeIn(tween(220)) on opening, shrinkVertically(tween(180)) + fadeOut(tween(120)) on closing.

When to show the "Key added" dialog

On receiving a guest key — only if the app is on screen and the key is new rather than a repeat. Otherwise we save it silently.

• The LocationOn and LocationOff icons — agreed pixel by pixel; they are the reference.
• The ExpandMore and ExpandLess icons (the chevrons) — 22 dp, not calibrated.
• The alpha formula in PulsatingCircle — sin(π·p) × 0.6. Any simplification ruins the look.
• LinearEasing in the waves. Ease-in or ease-out make it jerk.
• The level labels — "The guest decides / Preset / Locked". The descriptions have changed over time; the labels are fixed.
• FieldSection spacedBy(2.dp) — deliberately tight, for the title-and-caption pair.