Visual Overview
Design Principles
Loxation follows iOS Human Interface Guidelines with a modern, minimal aesthetic. The interface uses familiar iOS patterns, clear hierarchy, and strong accessibility contrast in both light and dark modes.
Styling Architecture
The app uses structured .style files to define variables (colors, spacing, typography), presets (elevation, text styles), and conditions (e.g., system theme). The key files include:
- theme.style: conditional theme switching (iOS light/dark)
- light.style and dark.style: per-theme variables
- colors.style: shared color tokens
- typography.style: font families and text scale
- common.style: spacing, radii, elevation, forms
- tabs/profile.style: tab-specific styles (e.g., Profile)
How Theme Switching Works
Loxation detects the system appearance and loads the appropriate theme automatically.
{
"import": [
{
"condition": "ios:UIScreen.main.traitCollection.userInterfaceStyle == .light",
"files": ["light"]
},
{
"condition": "ios:UIScreen.main.traitCollection.userInterfaceStyle == .dark",
"files": ["dark"]
}
],
"variables": {
"--system-theme": "ios:UIScreen.main.traitCollection.userInterfaceStyle == .dark ? 'dark' : 'light'"
}
}
Color System
Loxation uses an iOS-native palette with a primary blue and complementary purple, plus semantic colors for success, error, warning, and info. Surfaces and text adapt for light and dark appearances.
Light Theme
Dark Theme
Color tokens are defined in light.style, dark.style, and colors.style for reuse across components (buttons, text, containers, and forms).
Typography
Font Families
- Primary: Inter
- Secondary: Roboto
- Monospace: JetBrains Mono
Text presets include headings, body, caption, and code blocks with consistent sizes and line heights for legibility.
Text Scale
{
"presets": {
"heading1": { "fontSize": 24, "lineHeight": 32, "fontWeight": "700" },
"heading2": { "fontSize": 20, "lineHeight": 32, "fontWeight": "600" },
"body": { "fontSize": 16, "lineHeight": 24, "fontWeight": "400" },
"caption": { "fontSize": 14, "lineHeight": 20, "fontWeight": "400" },
"code": { "fontFamily": "JetBrains-Mono", "backgroundColor": "var(--text-code-bg-color)" }
}
}
Components & Tokens
Spacing & Radius
Spacing scale: 4, 8, 16, 24, 32. Radius: 4, 8, 12, round (9999). These ensure consistent layout rhythm and shape language.
Elevation
iOS-native shadows at low/medium/high levels with tuned offsets, opacity, and radius. Used on cards, menus, and dialogs.
Forms & Buttons
Form elements standardize height (44px), font size (16px), and borders. Buttons come in primary, secondary, and danger variants with pressed states.
Location-Aware UI
BLE Beacon Registration
Loxation registers devices to a physical location when a BLE beacon is detected. This registration enables the app to adapt interface content, especially profile views, to the user’s current place.
What Changes with Location?
- Profile content and available actions
- Contextual components and menus
- Brand accents or messaging tied to place
These behaviors are part of the Loxation runtime and work together with the styling system to present the most relevant interface at each location.
Passwordless Authentication
No Logins. No Emails. No Passwords.
Loxation does not require usernames, email addresses, or passwords. Instead, access is granted contextually: the app authenticates you only when and where it makes sense.
- Privacy by Design: No traditional login credentials to create, store, or breach.
- On-Device First: Sensitive authentication state is handled on-device and scoped to place.
- Frictionless UX: Nothing to remember, nothing to reset.
TOTP at Registered (Geofenced) Locations
Devices are registered to a location when a BLE beacon is detected. That registration enables TOTP (Time-Based One-Time Password) to authenticate the user at that specific place.
- When a known beacon is detected, or the user enters a known geofence, the app runs a background flow to establish trust.
- Upon success, TOTP is generated and verified for that location.
This approach ties access to physical presence while keeping personal identifiers out of the equation.
Technical Details
Style Files Overview
Styles are defined in Figma compatible JSON .style files:
theme.style: imports light/dark based on iOS system appearancelight.style/dark.style: theme-specific variablescolors.style: shared color tokens and component color mappingscommon.style: spacing, radii, elevation, forms, menus, liststypography.style: text variables and presetstabs/profile.style: tab-level customizations
Explore the schema: loxation-style-schema.json
Example Variables
{
"variables": {
"--primary-color": "#007AFF",
"--secondary-color": "#5856D6",
"--background-color": "#FFFFFF",
"--text-color": "#000000",
"--button-primary-bg-color": "var(--primary-color)",
"--form-element-height": 44
}
}
Typography Preset
{
"presets": {
"heading1": {
"fontSize": 24,
"lineHeight": 32,
"fontWeight": "700",
"fontFamily": "Inter"
}
}
}
Why This Approach?
This system provides a designer-friendly, declarative way to manage themes, tokens, and component styles across platforms. It blends iOS-native behavior (light/dark detection) with flexible variables and presets for rapid iteration and consistency.