Android, Web and Terminal · Version 0.1.0
Haily Design SystemAccessible components in Haily's palette, for Android, iOS, the web and the terminal, shared by every MobA11y app.
Chapter 1
Two Products, One Library
The whole palette and every component are Haily. Each app adds one brand color of its own: Gringotts adds gold and vault iron, kept in its own app and marked in gold on this page.
Haily Owns
- Haily itself: its tone, habits and know-how
- The chat in every app (in Gringotts, only the chat)
- This design system: its components and rules
- The whole palette: navy and teal, blue, violet, neutrals, status
Gringotts Owns
- The investment app: accounts, trading, ledger, buy plans
- Strategies, models and research
- Its brand: gold, vault iron, the coin, the banners
- The server, the API and the screens around the chat
Chapter 2
Palette
Every color the library defines, from Palette.kt, the one place colors live. Screens never use a hex value, only roles.
Chapter 3
Color Carries Meaning
A color is never decoration. Each one tells you something, and status always comes with words or a sign too.
Blue: You Can Act
Buttons, links, toggles, ⓘ and ⚙, reply buttons, the chosen tab. Nothing else.
Values: Bold Text
Amounts, prices, percentages, a setting's value, semi-bold with fixed-width digits, never a color: $1,284.50
Violet: Calm Information
Notices that inform and ask nothing of you.
Navy and Teal: Haily
Section tints and headings, Haily's badges, your chat bubbles. Never an action, whatever the active color.
Gain and Loss
Always signed, with an arrow and words:
Everything Else: Text
Headings included. Weight and size make the hierarchy.
Chapter 4
Every Component, Live
Each one below is the real web version from hai1y-design-web, working: tap, drag, use the keyboard. Grouped as they are in the Android library. Every component also works with a screen reader.
Haily Chat.kt · PromptField.kt · Brand.kt
h-hai1y-buttonHailyButton · tap it, or bring in a message from Hailyh-prompt-fieldHailyPromptField · one field for asking Haily, open or as its bubbleOpen a bubble, type, then press Enter; Shift+Enter starts a new line. ✕ closes any of them to its bubble; the first two also close when left empty.
h-sphereHailySphere · Haily's mark at any size; decorative, so screen readers skip ith-hai1y-tipHailyTip · ScheduledHailyTip · Haily's invitation by a control, one at a time, about a week apartWith a tip id it waits its turn, and opening or dismissing it finishes it on this device; this one has none, so it always shows.
h-about-button · h-about-headingAboutButton · AboutDialog · AboutHeading · an ⓘ whose bubble ends in Ask Haily About Ith-hai1y-revealHailyReveal · the chat grows out of Haily's button and shrinks back into itChat with Haily
Shown closed: open, it fills the window. Focus goes to the chat's heading, and back to the button when it closes (Escape, or Close the Chat).
h-hai1y-announcementHailyAnnouncement · what Haily has to say, in a sheet, its actions and Ask Haily About It at its bottomThree stocks in today's news, each with the reason it's here.
Shown closed: open, it rises from the window's bottom in full. Focus goes to its title, and back to the button when it closes (Escape, ✕, a click outside, or Ask Haily About It).
Waiting and Progress Progress.kt · Components.kt
h-progressProgressBar · steps and time lefth-waitingWaiting · one stop: the drive, then a bar after 5 secondsh-loading · h-spinnerLoading · Spinnerh-problem · h-headingProblem · Headingh-waiting-driveWaitingDrive · Haily's improvised wait; still with reduced motionh-status-barStatusBar · one line each, for a short spaceh-status-bar stackedStatusBar · the bar between its name and its words, for a view of bars aloneh-usage-barUsageBar · how much of an allowance is used, and when it resetsh-usage-metersUsageMeters · compact usage bars, small enough to sit beside a headingh-load-screenLoadScreen · loading, a problem or loaded; focus follows the stateActions and Dialogs Buttons.kt · Dialogs.kt
h-buttonTonalButton · DangerButton · filled, tonal, text and dangerSell Everything asks first, in h-confirm-dialog (ConfirmDialog): focus starts on Cancel. Shown closed, as it's modal.
h-busy-buttonBusyButton · one stop from start to finishIts wait and its result are heard wherever focus is, from the page's announcer.
h-action-listActionList · one action a rowh-text-fieldA text field, its label always shownTables and Settings Settings.kt · Tables.kt · DataTable.kt
h-data-tableDataTable · GroupedTable · a title, columns at their own width, the first staying put; groups as full-width rowsh-data-table aboutDataTable · an ⓘ beside the title, each row's title and text in its bubbleh-settings-tableSettingsTable · information only, ⓘ after ith-name-value-tableNameValueTable · ⓘ only when a row has more to sayh-staged-settingsStagedSettings · change, then send them allh-basics-expertBasicsAndExpert · Basics save at onceh-setting-info · h-setting-editorSettingInfo, a thought bubble · SettingEditor, a panelUse This hands the new value back; nothing changes until then.
h-spoken-noteSpokenNote · heard, not seenA screen reader hears "Added IPO Bounce." Nothing appears on screen: feedback lives in Haily's chat.
HAi1Y.formatValue · HAi1Y.dayWordsMoney, percents and dates, the words every element usesLists and Rows Lists.kt · Rows.kt · Sections.kt
h-collapsible-group · h-info-rowCollapsibleGroup · InfoRowh-group-headingGroupHeading · a list's group title, the one heading inside ith-collapsible-cardCollapsibleCard · a main itemh-choice-rowChoiceRow · a pick that toggles backOne pick: choosing another moves the check; activating the chosen one clears it.
h-switch-row · h-detail-row · h-soon-rowSwitchRow · DetailRow · SoonRowh-check-row · h-radio-list · h-chip-choicesCheckRow · RadioList · ChipChoices · blue in every stateBlue while they can be acted on; only the unavailable switch is gray.
h-stat · h-stat-row · h-change-pill · h-pill · h-initialsStat · StatRow · ChangePill · Pill · Initialsh-sectionSection · an information groupNotices, Text and Choices Notice.kt · RichText.kt · Truncated.kt · Controls.kt
h-noticeNotice · information only, four tones; its action a control of its ownh-rich-textRichText · lists the way the style guide asksh-truncated · h-full-text-overlayTruncatedText · FullTextOverlayh-period-picker · h-segmentedPeriodPicker · SegmentedSettingh-select-button · h-dropdown-pickerSelectButton · DropdownPicker · a choice from a list, the label and field one controlEnter, Space or the arrows open the list; arrows, Home and End move; Enter chooses; Escape closes it unchanged.
HAi1Y.thoughtBubble(button, content, { pinned: true })A thought bubble that stays open while the page is usedOnly its ⓘ again or Escape closes it. It follows its content as it changes, and always takes the page's colors.
h-slide-switch · h-slide-to-confirmSlideSwitch · SlideToConfirm · a full slide to actDrag all the way across, or press Enter on it. Once confirmed, it locks and says what happened.
Conversation Chat.kt
h-bubble · h-repliesChatBubble · ReplyButtonsh-chat-historyChatHistory · earlier messages behind one button, above the current ones, a heading per dayCharts Charts.kt · Compare.kt · Brand.kt · Theme.kt
h-value-chartValueChart · arrow keys or pointerh-value-chart · linesValueChart · several lines of one kind, never re-basedh-gain-barsGainBars · signed, read as texth-value-barsValueBars · a value across items, any kind, read as texth-donut · h-allocation-donutDonut · AllocationDonuth-chart-line-row · h-chart-line-group · h-chart-limitsChartLineRow · ChartLineGroup · ChartLimits · each row one checkboxh-grouped-allocation-donutGroupedAllocationDonut · focus a row, then zoom into its groupTab to a row: its slice turns to the bottom. Enter, or the magnifier, zooms into a group; Back to Total or Escape zooms out.
h-compare-plot · h-chart-steps · h-readout · h-line-sample · h-compare-table · h-on-blackMarkets' chart, on black · tap it, then ‹ › or arrow keysh-markdown · .h-btn.h-tonalMarkdownText · TonalButton- ChartHero: The comparison chart at the top of a screen, as Markets shows it: lines on true black from the very top, ⚙ for its options, and ‹ « › » steps while it's touched.
- MarketStatusBadge: The market's dot on the Markets tab: filled green while it's open, a hollow ring while it's closed, so shape says it too.
- ViewBanner: A view's title with ⚙ for its settings, sliding away while the page scrolls down. On the web it's h-view-banner, at the top of a view, so it isn't shown in a card here.
Also in the library: .h-sheet-scroll (SheetScroll: a scroll area inside a sheet that never drags the sheet) and .h-theme, Haily's own theme on any container.
Views ViewBanner.kt
h-view-bannerViewBanner · who's signed in, the view's title, and its own settings in a panel just under itThe ⚙ opens and closes the view's settings in place; the photo or initials open the account.
h-site-panelSitePanel · a site with many pages in groups: its navigation grows out of its logo, with Tab, arrows, Home, End and EscapeActivate the logo. The current page is filled and says so in words; a column may stack its groups, split by a diamond.
Chapter 5
An App's Brand, Kept Apart
An app paints its one brand color onto Haily's components through the --h-brand-* tokens, in its own files. Its own pieces stay in its app: Gringotts' coin, banners and gold and vault iron live in gringotts-web's brand/ and gringotts-android's GringottsBrand.kt, never here.
One Component, Two Brands an app's theme sets the brand tokens (GringottsTheme in Gringotts)
Chapter 6
In the Terminal
The components that make sense as text, from Haily-design-terminal's hai1y_term.py, in Haily's colors (no gold). Run it to see them in color: hai1y-term
── ProgressBar ───────────────────────────────────────────────── Backtesting Energy ████████████░░░░░░░░░░░░ 13 of 26 (50%) about 8 minutes left Haily Is Writing ░░░░░░███░░░░░░░░░░░░░░░ running 0:12 Publishing the Library ████████████████████████ done ✓ Replaying Your Strategies █████████░░░░░░░░░░░░░░░ stopped early ✗ ── SettingsTable ─────────────────────────────────────────────── ┌───────────────────────┐ │ Stop Loss 8% │ │ Largest Position 20% │ │ Take Profit Off │ └───────────────────────┘ ⓘ Stop Loss: Sells a stock once it falls this far below what was paid. ⓘ Largest Position: The most of the account one stock may hold. ── NameValueTable ────────────────────────────────────────────── ┌───────────────────────────────┐ │ Return +12.1% │ │ Worst Drop −24.8% │ │ Period 2000 to 2025 │ │ Liquidity Floor $2,000,000 │ │ Trades a Year 298 │ └───────────────────────────────┘ ⚠ Worst Drop: The biggest fall from a high. ◷ Period: The years it replayed. ── GroupedTable ──────────────────────────────────────────────── ┌───┬──────────────────────┬───────────────────────────┐ │ # │ Post │ Watch for │ ├───┴──────────────────────┴───────────────────────────┤ │ Android Series │ ├───┬──────────────────────┬───────────────────────────┤ │ 1 │ Intro │ │ │ 2 │ What TalkBack Reads │ 5 demos │ ├───┴──────────────────────┴───────────────────────────┤ │ iOS Series │ ├───┬──────────────────────┬───────────────────────────┤ │ 3 │ Intro │ │ │ 4 │ What VoiceOver Reads │ Reading order from memory │ └───┴──────────────────────┴───────────────────────────┘ ── DetailRow · SwitchRow ─────────────────────────────────────── Account •••• 4821 Buy Plans [ ●] On When one is ready to approve or decline. Sales [● ] Off When a stock sells, with its gain or loss. ── SegmentedSetting · PeriodPicker ───────────────────────────── Trading [ Active ] Inactive Sell Now Period [ Week ] Month 3 Months Year ── Pill · Stat ───────────────────────────────────────────────── (Chosen) (SPY) (Paper) (Failed) +12.1% 17 of 26 t 1.40 Return Years Ahead Reliability ── Notice ────────────────────────────────────────────────────── ✦ New from Haily Ask me to compare any two strategies. ⓘ Rebalance Pending Shares even out after tonight's settlement. ⚠ Trading Inactive No new buys; positions still sell at the right time. ── CollapsibleGroup · ChoiceRow ──────────────────────────────── ▾ Data-Driven Strategies (3) ├ Seasonal Retail +2.4% ├ Energy −1.1% └ Yearly Bounce Back No Stocks ✓ Seasonal Retail Chosen → Energy → Yearly Bounce Back ── RichText ──────────────────────────────────────────────────── Two ways to step back: • Trading Inactive: no new buys; positions sell at the right time. • Sell Now: sells everything, then holds cash. ── ChatBubble · ReplyButtons ─────────────────────────────────── Haily │ Energy's backtest is ready. Shall I compare it with SPY? You How did it do last year? │ [ Yes, Compare It ] [ No, That's All ] ── ValueChart ────────────────────────────────────────────────── Account value this week, up 4.2% ▁▁▁▂▂▂▁▁▁▄▄▄▄▄▄▆▆▆███ Mon $1,000.00 → Tue $1,042.00 +$42.00 ── GainBars ──────────────────────────────────────────────────── XLE │████████████████ +6.2% CCJ │████████ +3.1% TGT ██████│ −2.4% M ████████████│ −4.8% ── AllocationDonut, as shares ────────────────────────────────── Seasonal Retail ██████████████ $469.00 45% Energy ███████████ $365.00 35% Cash ██████ $208.00 20% Total $1,042.00 ── ActiveReadout ─────────────────────────────────────────────── Oct 22 · changes from Oct 12 XLE $92.40 +$4.30 ▲ 4.88% TGT $146.90 −$4.30 ▼ 2.84% CCJ $56.30 +$4.30 ▲ 8.27% ── MarkdownText ──────────────────────────────────────────────── Energy, Last Year It beat SPY by 4.7 points a year. • Bought about 300 times a year ┌────────────┬────────┬────────┐ │ Measure │ Energy │ SPY │ ├────────────┼────────┼────────┤ │ Return │ +12.1% │ +7.3% │ │ Worst Drop │ −24.8% │ −33.7% │ └────────────┴────────┴────────┘ ── Problem ───────────────────────────────────────────────────── ✗ The ledger didn't load. Check the connection and try again. [ Try Again ]
Chapter 7
All 66 Components
By file, as they sit in hai1y-design-android, then Gringotts' own pieces, outlined in gold, which live in its app and are shown there.
- HailySphere
- AllocationDonut
- Donut
- GroupedAllocationDonut
- TonalButton
- BusyButton
- ValueChart
- GainBars
- ValueBars
- ChartHero
- MarketStatusBadge
- ComparePlot
- ActiveReadout
- LineSample
- CompareTableView
- ChartStepsOverlay
- GringottsTheme
- GringottsCoin
- AnnouncementBanner
- AccountBanner
- VaultButton
Tested by :design:testDebugUnitTest, published by each design repository's ./publish.sh. The guide for builders is Haily-design-android's README.md; Haily's own guide is in its chat instructions.