Bilberry Design System

Color guidelines

Bilberry uses a token-based color system. Base colors such as --color-primary, --color-secondary, and --color-purple-500 are defined once and reused in buttons, cards, surfaces, and typography. Updating the token updates every component that references it.

Best practices

Use primary for key actions, titles, and emphasis.
Use secondary for supporting accents and less important actions.
Use surface and background to create clear layers between page background, cards, and content.
Use muted text for labels and meta-info; use full text color for main content and headings.
Use border-subtle for dividers and card borders; avoid high-contrast borders in dense layouts.

Avoid

Don’t introduce new hex colors in components; add a token instead if a new color is really needed.
Don’t rely only on color to communicate state; pair it with icons or text.
Don’t use accent colors for large background areas; keep them for smaller highlights.

In context

This example card uses --color-surface for the background, --color-primary for the title, and --color-text-muted for supporting text. Buttons use --color-primary and --color-secondary.

Analytics database

Tracks product analytics events and dashboard queries. Updated nightly.

Button guidelines

Buttons are used to trigger actions and move users through flows. They are built from shared tokens for color, spacing, and typography, so they look consistent across pages and screen sizes.

Variants & states

Primary: main action on a surface (for example, “Run query”, “Save changes”).
Secondary: supporting or cancel actions that sit next to a primary button.
Accent: special emphasis used sparingly for promotional actions.
Blueberry icon button: playful, branded action for low-risk features.

Writing labels

Use verbs that describe the result: “Run query”, “Save”.
Avoid vague labels like “OK” or “Submit”.
Keep labels short; if you need a sentence, move it into helper text.

Do & Don’t

Use one primary button per page or card.
Don’t place multiple primary buttons next to each other; use secondary buttons instead.
Don’t use playful or icon-only buttons for destructive or high-risk actions.

Recommended usage

Button variants

States

Blueberry icon button

Code reference

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
}