Design System (Filter)

Design System (Filter)

Filter is the official name of the Bloqr design system. It is the single source of truth for all Bloqr visual brand assets — colors, typography, spacing, fonts, logos, and React component primitives — and every UI-bearing Bloqr repository must consume it.

The npm package name stays @bloqr/design-system; naming the package after the system would collide with the @bloqr scope’s other packages, so only the human-facing name changed, not the package or repo identifiers.

Source of truth

Filter is published from Bloqr-Systems/bloqr-design-system:

• styles.css — global CSS entry point covering all tokens and @font-face declarations
• tokens/colors.css, tokens/typography.css, tokens/spacing.css, tokens/effects.css — CSS custom properties
• components/ — React primitives (Button, Badge, Tag, Mark, Logo, Icon, Input, Card, CodeWindow)
• assets/ — logos, favicon, OG image
• fonts/ — self-hosted Space Grotesk variable font files
• guidelines/BLOQR_BRAND_HANDOFF.md — full visual design spec, canonical :root block
• FILTER_INTEGRATION.md — per-repo integration steps

Status in this repo

frontend/ currently runs Angular Material 3 (@angular/material, @fontsource/roboto) and has not yet adopted Filter. @bloqr/design-system is not yet published to npm.

Icons are no longer part of that gap: Material Symbols (the ligature icon font) has been fully replaced with self-hosted Lucide icons — see frontend/src/app/components/icon/icon.component.ts (<app-icon>). There is no material-symbols npm dependency and no icon font/network request at runtime.

Once Filter is published, the remaining planned migration (per FILTER_INTEGRATION.md §2 bloqr-compiler) is:

1. Install @bloqr/design-system as a dev dependency for tokens
2. Import Filter’s CSS custom properties into component stylesheets
3. Reimplement Angular Material components against Filter’s CSS custom properties — Filter’s React primitives are the visual contract, not a runtime dependency for Angular
4. Self-host fonts from Filter instead of @fontsource

This migration is tracked as a follow-up effort separate from establishing “Filter” as the design system’s official name.

Rules

Must do	Must not do
Import @bloqr/design-system/styles.css once published	Hardcode hex color values in CSS or TypeScript
Use var(--color-*), var(--space-*), var(--font-*) tokens	Recreate theme/, brand/, or design/ folders
Reference logos and fonts only via @bloqr/design-system exports	Load fonts from Google Fonts CDN
Refer to the design system as “Filter” in docs and comments	Set any background to white or any light colour

See AGENTS.md (repo root) for the full set of mandatory rules.