happenings_ui

Name: Happenings UI Registry
Author: Happenings Group A/S

0.2.4Flutter

Cross-platform Flutter implementation sharing the same design tokens, zinc palette, 4px spatial rhythm, and scale-down press feedback.

Install

flutter pub add happenings_ui

Or add to pubspec.yaml

dependencies:\n  happenings_ui: ^0.2.4

Quick Start

import 'package:happenings_ui/happenings_ui.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HappeningsUiConfig(
      child: MaterialApp(
        theme: AppTheme.light(),
        darkTheme: AppTheme.dark(),
        home: const HomeScreen(),
      ),
    );
  }
}

Design Tokens

Colors

ZincColors.zinc50 – zinc95011-step neutral palette, backbone of every surface

BrandColors.indigoPrimary brand accent

BrandColors.greenSuccess / positive states

BrandColors.blueInfo / links

Spacing (4px base)

HapSpacing.xs = 4Tight: icon gaps, inline elements

HapSpacing.sm = 8Small: between related elements

HapSpacing.md = 12Medium: input padding, card gaps

HapSpacing.lg = 16Default: card padding, section gaps

HapSpacing.xl = 20Large: sheet body padding

HapSpacing.xxl = 24Extra-large: page padding

HapSpacing.xxxl = 32Section-level spacing

Typography

AppTypography.pageTitle()32px bold — page headings

AppTypography.sectionHeading()20px bold — section headings

AppTypography.cardTitle()16px bold — card headings

AppTypography.body()14px regular — body text

AppTypography.caption()12px medium — labels and captions

AppTypography.overline()11px medium — categories and tags

Haptics

LightDefault button press, card tap

MediumDestructive actions, confirmations

HeavyReserved — major, irreversible moments

SelectionToggles, pickers, tab switches

Components

Interaction Primitives

HappeningsPressable

Foundation of every interactive element. Scale-down animation (0.97x, 100ms ease-out) with configurable haptic feedback. Replaces Material ripple entirely.

HappeningsButton

Three variants: primary (solid zinc), secondary (outlined), ghost (text-only). Leading icon, loading shimmer pill, disabled opacity.

SwipeToConfirmButton

Horizontal slider requiring 70% drag to confirm. Label fades, checkmark scales in. Thumb rolls back on failure. Deliberate friction for irreversible actions.

Form Inputs

HappeningsInput

Rounded border (8px), animated focus ring (3px spread, 150ms). Label, hint, error state, prefix/suffix icons.

HappeningsTextarea

Multi-line input with auto-grow, configurable max lines, and character counter.

HappeningsSelect

Dropdown trigger styled like HappeningsInput. Lightweight MenuAnchor popover with checkmark selection.

HappeningsOtpInput

Six digit slots grouped in threes. Each digit pops in with easeOutBack (200ms). Blinking caret, backspace navigation, autofill support.

Layout & Surfaces

HappeningsCard

1px zinc border, 12px corners, 16px padding. Optionally tappable via HappeningsPressable wrapping.

HappeningsSheet

Modal bottom sheet with 30px header radius, drag handle, scrollable body, sticky footer. Capped at 80% screen height.

HappeningsAppBar

Cupertino-inspired with collapsing large title (32px bold) and adaptive backdrop blur based on scroll position.

HappeningsBottomNavBar

Two styles: elevated (frosted glass) and iOS-clean (translucent). Scale-down on press (0.92x elevated, 0.96x iOS) with selection haptics.

Feedback & State

HappeningsToast

Slides from top (400ms ease-out). Icon, title, description, action button. Auto-dismiss, swipe-up dismiss.

HappeningsStateCard

Inline alert with four severities: info (blue), warning (amber), error (red), success (green).

HappeningsEmptyState

Centered placeholder: large muted icon, title, subtitle, optional CTA. Zero-data and first-run states.

HappeningsShimmer

Skeleton loading with zinc-themed shimmer. Light: zinc200/zinc100. Dark: zinc800/zinc700. Default 8px radius.

Content & Media

HappeningsAvatar

Circular with cached network image, two-letter initials fallback, 1px zinc border. Responsive sizing.

HappeningsBadge

Label chip with 6px corners and zinc defaults. Status tags, category labels, counters.

HappeningsMarkdown

GitHub-flavored markdown with zinc typography. Custom @mention protocol, code blocks, tables, images with safe URL filtering.

Social & Onboarding

MentionOverlay

Autocomplete popup triggered by @. Filtered user list with avatar, name, subtitle. 200px max height.

MutualFriendChips

Overlapping circular avatars (Instagram-style). Up to three faces with "+N" overflow badge.

HappeningsOnboarding

Paged flow with animated dot indicator and configurable page transitions (easeOutBack).

Platform Parity

Web and Flutter share identical design tokens and interaction patterns.

Concept	Web (Tailwind)	Flutter
Press feedback	active:scale-[0.97]	HappeningsPressable(0.97)
Color palette	oklch() CSS vars	ZincColors.zinc50–950
Spacing	4px grid (p-1 = 4px)	HapSpacing.xs–xxxl
Border radius	--radius: 0.625rem	12px cards, 8px inputs
Loading	Skeleton + animate-pulse	HappeningsShimmer
Typography	Inter via next/font	Geist via google_fonts
Icons	@fortawesome/pro-*	Configurable iconBuilder

Design Manifest·Web Components

Happenings Group A/S