Patterns

UI Patterns

Patterns describe how Bilberry components and foundations work together to solve common interface problems. Use these layouts as starting points for new screens so behavior and structure stay consistent across the app.

Authentication screen

The authentication pattern uses the sign-in component centered on the page, with clear hierarchy between primary and secondary actions. It works for both “Sign in” and “Create account” flows.

Guidelines

  • Center the sign-in card on the page with generous spacing above and below.
  • Keep the form focused on a small set of fields (email, password, optional remember-me).
  • Use a primary button for “Sign in” and a secondary button or link for account creation.
  • Place “Forgot password?” as subtle secondary text under the main actions.
Components used
Sign-in card (.auth-card), primary button, secondary button, body text, small text.

Sign in to Bilberry

Enter your credentials to access your databases.

Forgot your password?

Card list dashboard

The card list pattern displays multiple databases or environments in a responsive grid. Each card uses consistent padding, typography, and button placement so users can quickly scan status information.

Guidelines

  • Use a grid that collapses from 3–4 columns on desktop to 1–2 columns on smaller screens.
  • Keep card content aligned: title at the top, key metrics in the middle, primary action at the bottom.
  • Use concise labels (for example, “View”, “Open dashboard”) and avoid multiple primary actions per card.
Components used
Card, title, body text, small text, primary and secondary buttons.

Analytics DB

Queries today: 1,248
Uptime: 99.98%

Events DB

Queries today: 872
Uptime: 99.95%

Reporting DB

Queries today: 432
Uptime: 99.90%

Detail view with sidebar actions

This pattern combines a main detail panel with a right-hand sidebar for supporting actions. It is useful for viewing database details while keeping important controls close by.

Analytics database

View key configuration details, connection info, and recent activity. Use headings and spacing tokens to separate sections like “Overview”, “Performance”, and “Activity log”.

This area typically uses body text, small labels, and inline links for secondary actions.