Skip to Content
Haily Design System
HAi1Y Design System

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.

66components on Android
89components, live on the web
4.5:1contrast or better
5 secondsbefore a progress bar

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.

Navy and TealHaily, from its logo
N900022A69
N9500F1E63
T100CDF3F2
T40003C4BF
T700027894
T900024E7C
Blueaction
100DCE7FE
4006CB0FF
7001D4ED8
9001E3A8A
Violetcalm information, a chart line
150D9CCF8
200C4B3F5
300AB96EE
7004E1DA2
85045208A
Rederrors, losses
100FEE2E2
300FF8A8A
600DC2626
700B4232C
800991B1B
9005F1414
Green, Amber, Pink, Slategains, chart lines, cash
G3005BE38A
G80015692D
A400FBBF24
A700B45309
P400F472B6
P700BE185D
S40094A3B8
S50064748B
Cloudlight surfaces
PaperF9FAFB
50F5F7F9
100F0F2F5
200EBEEF1
300E7EAEE
OutlineCBD2DA
Gray6005F6773
Ink1F242B
Nightdark surfaces
00B0D10
Night111418
1171B20
21C2026
3232830
42B313A
Outline3A414B
MistE6E8EB
Gold Gringottsits coin, its brand
200F8DE95
500E0A526
700A86F06
Ink3A2600
Vault Gringottsits iron surfaces
200C8CACF
70033363C
90017181B

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: and

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 Haily
h-prompt-fieldHailyPromptField · one field for asking Haily, open or as its bubble

Open 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 it
h-hai1y-tipHailyTip · ScheduledHailyTip · Haily's invitation by a control, one at a time, about a week apart

With 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 It
Collapse Filter
h-hai1y-revealHailyReveal · the chat grows out of Haily's button and shrinks back into it

Chat 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 bottom

Three 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 left
h-waitingWaiting · one stop: the drive, then a bar after 5 seconds
h-loading · h-spinnerLoading · Spinner
The plain spinner, for the first seconds.
h-problem · h-headingProblem · Heading
h-waiting-driveWaitingDrive · Haily's improvised wait; still with reduced motion
h-status-barStatusBar · one line each, for a short space
h-status-bar stackedStatusBar · the bar between its name and its words, for a view of bars alone
h-usage-barUsageBar · how much of an allowance is used, and when it resets
h-usage-metersUsageMeters · compact usage bars, small enough to sit beside a heading
h-load-screenLoadScreen · loading, a problem or loaded; focus follows the state

Actions and Dialogs Buttons.kt · Dialogs.kt

h-buttonTonalButton · DangerButton · filled, tonal, text and danger

Sell 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 finish

Its wait and its result are heard wherever focus is, from the page's announcer.

h-action-listActionList · one action a row
h-text-fieldA text field, its label always shown

Tables 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 rows
h-data-table aboutDataTable · an ⓘ beside the title, each row's title and text in its bubble
h-settings-tableSettingsTable · information only, ⓘ after it
h-name-value-tableNameValueTable · ⓘ only when a row has more to say
h-staged-settingsStagedSettings · change, then send them all
h-basics-expertBasicsAndExpert · Basics save at once
h-setting-info · h-setting-editorSettingInfo, a thought bubble · SettingEditor, a panel

Use This hands the new value back; nothing changes until then.

h-spoken-noteSpokenNote · heard, not seen

A 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 uses

Lists and Rows Lists.kt · Rows.kt · Sections.kt

h-collapsible-group · h-info-rowCollapsibleGroup · InfoRow
h-group-headingGroupHeading · a list's group title, the one heading inside it
h-collapsible-cardCollapsibleCard · a main item
h-choice-rowChoiceRow · a pick that toggles back

One pick: choosing another moves the check; activating the chosen one clears it.

h-switch-row · h-detail-row · h-soon-rowSwitchRow · DetailRow · SoonRow
h-check-row · h-radio-list · h-chip-choicesCheckRow · RadioList · ChipChoices · blue in every state

Blue 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 · Initials
h-sectionSection · an information group

Notices, Text and Choices Notice.kt · RichText.kt · Truncated.kt · Controls.kt

h-noticeNotice · information only, four tones; its action a control of its own
h-rich-textRichText · lists the way the style guide asks
h-truncated · h-full-text-overlayTruncatedText · FullTextOverlay
h-period-picker · h-segmentedPeriodPicker · SegmentedSetting
h-select-button · h-dropdown-pickerSelectButton · DropdownPicker · a choice from a list, the label and field one control

Enter, 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 used
Times Counted: 0

Only 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 act

Drag all the way across, or press Enter on it. Once confirmed, it locks and says what happened.

Conversation Chat.kt

h-bubble · h-repliesChatBubble · ReplyButtons
h-chat-historyChatHistory · earlier messages behind one button, above the current ones, a heading per day

Charts Charts.kt · Compare.kt · Brand.kt · Theme.kt

h-value-chartValueChart · arrow keys or pointer
h-value-chart · linesValueChart · several lines of one kind, never re-based
h-gain-barsGainBars · signed, read as text
h-value-barsValueBars · a value across items, any kind, read as text
h-donut · h-allocation-donutDonut · AllocationDonut
h-chart-line-row · h-chart-line-group · h-chart-limitsChartLineRow · ChartLineGroup · ChartLimits · each row one checkbox
h-grouped-allocation-donutGroupedAllocationDonut · focus a row, then zoom into its group

Tab 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 keys
XLE TGT CCJ line 4 line 5
h-markdown · .h-btn.h-tonalMarkdownText · TonalButton
On Androidno web version yet; each as Haily-design-android describes it
  • 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 it

The ⚙ opens and closes the view's settings in place; the photo or initials open the account.

h-site-nav · h-skip-linkSiteNav · a site's primary nav, the web's own: Tab reaches each link, Left and Right move between them, Home and End

Real links in a named nav, the current page bold and underlined. A page's first stop is its skip link, as this one's: press Tab at the top.

h-site-panelSitePanel · a site with many pages in groups: its navigation grows out of its logo, with Tab, arrows, Home, End and Escape

Activate the logo. The current page is filled and says so in words; a column may stack its groups, split by a diamond.

h-site-nav · markSiteNav · a link's picture beside its words, or alone with hideText, its name still its words

The picture is out of reading: the home tab is heard as "Home", its ring round the picture, the current tab underlined beneath it.

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)

Haily's Own Colorsthe library's default
An Example Brandplum, from the app's own stylesheet

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.

Brand.kt · Buttons.kt · Allocation.kt
Charts.kt · ChartHero.kt · Compare.kt
Notice.kt · Sections.kt · RichText.kt · Markdown.kt · Truncated.kt
Controls.kt · Toggles.kt · Theme.kt · ViewBanner.kt
GringottsBrand.kt, in gringotts-android
  • 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.