bash-ui
ComponentsDesign systemsHow to use
Getting started
IntroductionHow to use
Design systemsSee all →
The MeridianFrontierUnderstatedCuratedStudioNeutralPlayground
ButtonsSee all →
Social link buttonsKey login buttonSend buttonArrow buttonVideo buttonApp store badgeTonal buttonLoading buttonCTA buttonInbox buttonDelete button
Top navbars & navigationSee all →
Radial navigationExpanding menuGooey tabsCount tabsApp sidebar
InputsSee all →
Sort-by headingDissolve inputSearchable selectCheckboxLock toggleNotification toggleGooey inputSearch barRange sliderDate range calendar
ChartsSee all →
GitHub activity chartRevenue bar chartDonut chartMoney flow chartIncome vs spending chartFunnel chartMetric cardPipeline chartBreakdown dialAI cost cardStick progress bar
Data displaySee all →
Tech stack logosWallet cardScore gauge
Images & mediaSee all →
Doodle portraitImage collageQR codeSaved board
Text & typeSee all →
Scramble text
ListsSee all →
Ranking tableTo-do listFAQ accordionSwipe cards
FeedbackSee all →
Feedback cardFeedback sheet
Menus & overlaysSee all →
Link previewInfo tooltipAccount menu

Neutral

Component testing baseline

A clear, adaptable foundation. Balanced greys, straightforward typography and a measured indigo accent give proportion, hierarchy and interaction space to speak for themselves.

Billing migration

In progress

Moving every workspace to usage-based plans before the March invoice run.

Workspaces
1,284
Migrated
1,102
Failed
3

States

1,102 workspaces migrated
179 scheduled for Monday
3 failed validation

System palette

Shape

Panel12px
Inset8px
Action8px

Text types

Select a type to highlight it in the card above. Select again to clear.

Rules

  1. 01

    Nothing to prove

    No brand, no warmth. Every component should still read clearly here; if it does not, it is depending on a colour it never asked for.

Accessibility

WCAG 2.2 colour contrast

Calculated from this system’s colours in both modes. These are contrast checks, not an overall accessibility score or certification.

Light · 10/13 pairs meet AA

Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.

  • AaHeading on card17.71:1 · AAA
  • AaBody on card14.89:1 · AAA
  • AaSupporting text on card6.03:1 · AA
  • AaQuiet text on card3.24:1 · Large text only
  • AaBody on inset13.55:1 · AAA
  • AaLink on card6.28:1 · AA
  • AaPrimary button label16.97:1 · AAA
  • AaInk button label17.71:1 · AAA
  • AaPositive state4.46:1 · Large text only
  • AaWaiting state4.45:1 · Large text only
  • AaNegative state5.56:1 · AA
  • AaFocus ring against card6.28:1 · AA non-text
  • AaFocus ring against ground5.76:1 · AA non-text
Dark · 12/13 pairs meet AA

Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.

  • AaHeading on card16.87:1 · AAA
  • AaBody on card12.54:1 · AAA
  • AaSupporting text on card7.06:1 · AAA
  • AaQuiet text on card3.83:1 · Large text only
  • AaBody on inset11.61:1 · AAA
  • AaLink on card9.30:1 · AAA
  • AaPrimary button label16.11:1 · AAA
  • AaInk button label17.89:1 · AAA
  • AaPositive state9.23:1 · AAA
  • AaWaiting state10.08:1 · AAA
  • AaNegative state6.11:1 · AA
  • AaFocus ring against card6.21:1 · AA non-text
  • AaFocus ring against ground6.59:1 · AA non-text

Normal text: AA ≥ 4.5:1, AAA ≥ 7:1. Large text: AA ≥ 3:1, AAA ≥ 4.5:1 (24px regular or approximately 18.67px bold). Non-text indicators: AA ≥ 3:1. Ratios are displayed rounded down; results use full precision.

AA text guidanceAAA text guidanceNon-text contrast guidance