trusty / system core
Calm structure for responsibilities that matter.
trusty is a professional, family-friendly interface system for organizing household employment, documents, payroll preparation, and compliance follow-through.
Design mission
Make every next action clear without making the user feel judged or overwhelmed. The visual language balances official-looking structure with a welcoming, human pace.
Use measured hierarchy and direct labels for money, dates, deadlines, and records.
Use light surfaces and gentle accent colors without decorative clutter or novelty.
Describe what is known, what needs review, and what must happen outside the product.
foundation
Brand Color Palette
Orange provides a human primary action. Blue carries guidance and reliable navigation. Green, amber, and red are reserved for semantic status.
Headings, primary text, financial figures.
Application background and quiet breathing room.
Primary actions, progress, selected navigation.
Warm emphasis, onboarding, review surfaces.
Links, secondary actions, official guidance.
Informational panels and low-pressure grouping.
Semantic accents
foundation
Typography Scale
Newsreader gives the product a composed editorial voice for major headings. DM Sans keeps forms, records, and operational detail crisp.
foundation
Mobile & iOS Native Layout Metrics
trusty favors platform conventions so the interface feels dependable when users are entering sensitive information on a phone.
44 px touch target
Every interactive control, including compact icon actions, needs a usable target of at least 44 by 44 pixels.
min-height: 44px;
16 px screen margin
Keep core content comfortably inset on small screens. Let long records scroll rather than compressing the type.
padding-inline: 16px;
8 px spacing rhythm
Use 4, 8, 12, 16, 24, 32, and 40 for consistent gaps and predictable scanning.
gap: var(--space-16);
Safe areas are native
Let the platform handle notches, status bars, keyboards, and home indicators. Avoid custom screen offsets.
safeAreaPadding()
components
Form Inputs
Inputs explain the requested value, preserve a calm focus state, and make validation specific enough to act on.
components
Mobile UI Patterns
Operational pages prioritize scanning, review, and a clear route to the next task.
Mobile bottom tab navigator
Dashboard
Today at a glance
One place to see people, documents, and the next compliance action.
Current document version is ready to inspect.
Cross-platform implementation
.trusty-primary {
background: #D96B39;
min-height: 44px;
border-radius: 6px;
}const button = {
backgroundColor: tokens.orange,
minHeight: 44,
borderRadius: 6,
};TrustyButton("Review payroll")
.trustyTone(.primary)
.frame(minHeight: 44)components
Trust States
Status language keeps the product legally careful: it distinguishes an action the user completed from a result that still needs external review.
Use for recorded completion
The user supplied the value or completed the step. Do not imply that an external agency accepted it.
Use before a consequential action
The product has prepared a calculation or document and the user must inspect it.
Use for unfinished work
A required value, document, or external action has not been confirmed.
Use to fail closed
Never present an estimate as a valid result when the state or rule is not supported.
handoff
Design Tokens (JSON)
Use the same semantic names in web, React Native, and SwiftUI implementations.
Copy the token object for implementation work.
{
"brand": {
"ink": "#20303D",
"canvas": "#F7FAFC",
"surface": "#FFFFFF",
"orange": "#D96B39",
"orange_soft": "#FDEBE2",
"blue": "#2E78A6",
"blue_soft": "#E6F2F8",
"success": "#237A59",
"warning": "#A96712",
"danger": "#B5433D",
"border": "#D6E0E6"
},
"typography": {
"display": "Newsreader",
"body": "DM Sans",
"body_size": "16px",
"line_height": 1.55
},
"layout": {
"space_unit": "8px",
"touch_target": "44px",
"control_radius": "6px"
}
}