Magpie Design System

Controls

Buttons name their action. Primary is reserved for the one action that commits the user's work.

Buttons

.mds-button with --primary, --subtle and --small.

Quiet actions

.mds-link-button and .mds-icon-button for secondary and toolbar actions.

Dropdown menu

initSelect() draws the menu with the same theme as the control.

Managed dropdown

A disabled control keeps its current value visible.

Segmented tabs

.mds-tabs with initTabs(): arrow keys, Home and End.

The form panel is showing.

Settings

Label on the left, control on the right. Rows stack when the group itself is narrower than 560px.

Network connection

Connecting and signing in are separate. Closing the window keeps the app in the menu bar.

Open at login

Listen address

HTTP and SOCKS share this entry point.

Loopback addresses only.

Device nameOptional

How this device appears to others.

Mode

Direct IPv6

Let direct connections use IPv6.

Managed setting

Disabled controls keep their value visible.

MTU

Largest packet size.

bytes

1280–9000. Default 1400.

Proxy DNS

Resolved through the selected exit.

Port must be between 1 and 65535.

Proxy domains

One per line. Subdomains match.

Section notes sit outside the group, for consequences that apply to the whole page. Inline code uses the mono face.

Feedback

Each message names the problem and the way forward.

The configuration on disk has changed

Your draft is kept. Reload the latest configuration before saving so other changes are not overwritten.

The action did not finish

The network service did not respond. Check that it is running, then try again.

Version 0.5.0 is ready to install

Installing ends the current connection and restarts the app.

Status

.mds-status with data-tone.

Connected Exit unavailable Service stopped Disconnected

Pills

One pending action in the titlebar.

Toast and dialog

toast() and openDialog().

Loading

Reading the local configuration…

Code

A panel for a live file preview, and .mds-pre for logs.

Configuration preview

config.yamlUnsaved draft

# Local proxy entry pointlisten: 127.0.0.1:17890dns:  proxy: 8.8.8.8  fake_ip: truerules:  mode: split

2026-11-10 09:41:07 INFO  service ready
2026-11-10 09:41:08 INFO  exit node selected: relay-tokyo
2026-11-10 09:41:12 WARN  exit unavailable, traffic held until it returns

Colour

Values read live from the current theme. Switch the theme in the toolbar to compare.

Type and icons

Montserrat for large titles and actions, regular Monda for headings, and Lato for body copy and other interface text.

Large title

Montserrat · 600 · 1.25rem

Change the Tailscale network?

Heading

Monda · 400 · 1rem

Connection settings

Action

Montserrat · 500

Body

--mds-text-body · 0.875rem

Choose an exit you are authorised to use. 选择已获准使用的出口设备。

Note

--mds-text-note · 0.8125rem

Applies to direct connections only.

Caption

--mds-text-caption · 0.75rem

Only this device can open this page

Mono

--mds-mono · code, addresses, files

tail12345.ts.net · 172.31.255.2:53

Icons

icons/icons.svg · Phosphor Regular · 256px grid