PESA

Design systems

Application
system.

I designed and built the interface system for Secura. It had to stay simple on limited hardware and work across mobile and desktop.

Secura applet launcher with color-coded presets

Interface foundations.

Geist and Geist Mono, neutral surfaces, and distinct colors for status and product identity.

Appearance / all specimens
GeistMedium / 500

Sphinx of black
quartz, judge
my vow.

Regular Medium Semibold
Geist MonoRegular / 400

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
0123456789

Technical values & labels
Base 50Base 100Base 200Base 300
Accent #21ADE4
Success #0F766E
Warning #B45309
Error #BE185D
Information #2E679B
IconographyPhosphor · Fill
squares-four layout arrows-left-right play broadcast video-camera camera monitor-play shield lock users warning
Theme values Selected tokens
Primary#0A0A0A
Secondary#737373
Base 50#FAFAFA
Base 100#F5F5F5
Base 200#E7E5E4
Base 300#d6d3d1
Primary border#171717
Secondary border#A3A3A3
Accent#21ADE4

Interface
components.

Examples from the library. Each pairs the interface with its behavior and a compact API reference.

01 / Bar

Plus action

The Pulse live multiview pattern. The plus expands into a split toolbar.

components/PlusAction.svelte
Open the bar to inspect the expanded toolbar.
LiveFloatingToolbar API Properties & events
Pulse · LiveFloatingToolbar
PropertyTypeDefault
controlsExpandedbooleanrequired
activeLayoutLabelstringrequired
cycleIntervalLabelstringrequired
isCycleEligibleLayoutbooleanrequired
hasAudioTilesbooleanrequired
hasMapTilesbooleanrequired
isFullscreenbooleanrequired

Events: onToggleControls, onBack, onOpenLayout, onOpenCycle, onOpenAudio, onToggleMap, onTogglePicker, onToggleFullscreen.

02 / Menu

Plus action

The SwitchStream preset pattern. The plus opens replaceable list content.

components/PlusAction.svelte
Open the menu to inspect the preset list.
PresetActionModal API Properties & events
SwitchStream · PresetActionModal
PropertyTypeDefault
showbooleanrequired
presetsWorkspacePresetActionInfo[]required
close() => voidrequired
onCreatePreset() => voidrequired
onPresetSelect(preset: WorkspacePresetActionInfo) => voidrequired
devices{ txs: DeviceWithComponents[]; rxs: DeviceWithComponents[] }undefined

The original click handler only logged the preset and closed. onPresetSelect is the extracted selection callback.

WorkspacePresetActionInfo
PropertyTypeDefault
presetIdstringrequired
namestringrequired
descriptionstringundefined
gridType'item' | 'folder'undefined
gridIconstringundefined
gridColorstringundefined
gridLightColorstringundefined
gridDarkColorstringundefined
03 / State

Status toggle

Used in table rows and access settings. Position and color distinguish the state; keyboard focus stays visible.

components/Toggle.svelte
Off
toggleOn: false
On
toggleOn: true
Unavailable
disabled: true
Focus
focus-visible
Change a toggle to inspect its aria-checked state.
Toggle API Properties & events
components/Toggle.svelte
PropertyTypeDefault
flexDirectionstring'flex flex-row'
labelstring''
labelStylingstring'font-sans font-semibold text-sm'
controlNamestring''
onClick() => voidnoop

Events: change: boolean.

04 / Composition

Sectioned dropdown

One trigger, grouped options. The component separates the menu’s content, sections, and selectable items.

Dropdown.svelte
DropdownContent · DropdownSection
DropdownItem
Closed by default
Open example

Status

Placement, width, and outside-click behavior are configurable.
Dropdown API Properties & events
components/Dropdown.svelte
PropertyTypeDefault
buttonTextstring''
buttonClassstring'btn btn-sm'
dropdownClassstringSecura surface classes
position'bottom-left' | 'bottom-right' | 'top-left' | 'top-right''bottom-left'
widthstring'240px'

Events: open, close, toggle: boolean.

Composes DropdownContent, DropdownSection, and DropdownItem.

05 / Configuration

Preset identity

An icon and a paired light/dark color identify a preset. Configure the identity once and keep both appearances together.

components/IconPicker.svelte
components/DarkModeColorPicker.svelte
video camera Light#4338ca
video camera Dark#a49ee5
Icon
Color
The color picker keeps separate lightValue and darkValue properties.
Identity API Properties & events
components/IconPicker.svelte
PropertyTypeDefault
selectedIconstringdefaultPhosphorIcon()
inputDisabledbooleanfalse
components/DarkModeColorPicker.svelte
PropertyTypeDefault
lightValuestring'#4338ca'
darkValuestring'#a78bfa'
presetColorsArray<{ color; name }>12 presets
onchange(event: CustomEvent<{ lightColor; darkColor }>) => voidundefined

Built in code.

The implementation context, without a separate architecture diagram.

TailwindStyling utilities.
DaisyUIUI styling foundation.
Svelte components Reusable controls with explicit state, configuration, and events.
Ethan Fox

Copyright

© 2026 Ethan James Fox