https://github.com/iyashwantsaini/wloom
wloom — editorial / typewriter Flutter design system. Mono type, hairline borders, ink-on-paper palette. Ships as the wolwoloom package on pub.dev.
https://github.com/iyashwantsaini/wloom
dart design design-system flutter flutter-package flutter-widgets material-design ui-kit widgetbook
Last synced: 30 days ago
JSON representation
wloom — editorial / typewriter Flutter design system. Mono type, hairline borders, ink-on-paper palette. Ships as the wolwoloom package on pub.dev.
- Host: GitHub
- URL: https://github.com/iyashwantsaini/wloom
- Owner: iyashwantsaini
- License: mit
- Created: 2026-05-02T08:40:10.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-05-10T13:58:45.000Z (about 1 month ago)
- Last Synced: 2026-05-10T15:33:35.947Z (about 1 month ago)
- Topics: dart, design, design-system, flutter, flutter-package, flutter-widgets, material-design, ui-kit, widgetbook
- Language: Dart
- Homepage: https://iyashwantsaini.github.io/wloom/
- Size: 5.3 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# wloom · design system
> An editorial / typewriter-flavored Flutter design system. Mono typography, hairline borders, ink-on-paper palette with a periwinkle accent. Ships as the [`wolwoloom`](https://pub.dev/packages/wolwoloom) package on pub.dev. Extracted from the [`wolwo`](https://github.com/iyashwantsaini/wolwo) wallpaper app.
[](https://pub.dev/packages/wolwoloom)
[](https://pub.dev/packages/wolwoloom/score)
[](https://pub.dev/packages/wolwoloom/score)
[](https://github.com/iyashwantsaini/wloom/actions/workflows/ci.yml)
[](https://github.com/iyashwantsaini/wloom/actions/workflows/pages.yml)
[](https://github.com/iyashwantsaini/wloom/actions/workflows/publish.yml)
[](https://flutter.dev)
[](LICENSE)
**Showcase** —
* Package on pub.dev → ****
* Live web gallery → **** (auto-deploys on every push to `main`).
* Android APKs (catalog app + widgetbook) → **[Releases](https://github.com/iyashwantsaini/wloom/releases/latest)** (built on every `v*` tag).
```dart
import 'package:wolwoloom/wolwoloom.dart';
MaterialApp(
theme: WlmTheme.light(),
darkTheme: WlmTheme.dark(),
home: const MyPage(),
);
```
## Install
```sh
flutter pub add wolwoloom
```
or pin in `pubspec.yaml`:
```yaml
dependencies:
wolwoloom: ^0.3.4
```
## Showcase
Two apps live in this repo and are both built by CI on every push to `main`:
| Showcase | What it is | Where to find it |
| --- | --- | --- |
| **wloom** ([`packages/wolwoloom/example`](packages/wolwoloom/example)) | A Flutter app that opens straight into a categorised showcase of every component, with a theme toggle in the app bar. Built for Android / iOS / desktop / web. | APK on the latest [release](https://github.com/iyashwantsaini/wloom/releases/latest) — `wloom-showcase-*.apk` |
| **wloom wb** ([`apps/widgetbook`](apps/widgetbook)) | Interactive component gallery with knobs, light/dark themes, and viewport switching. Same source ships as web *and* APK. | Web: · APK: `wloom-wb-*.apk` on the latest release |
### Screenshots
Full gallery (showcase screens, demo templates, widgetbook stories) lives in [docs/README.md](docs/README.md). The recipe an agent can follow to refresh every shot is in [docs/screenshots/SKILL.md](docs/screenshots/SKILL.md).
## Components
| Group | Widgets |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Foundations | `WlmTokens`, `WlmColors`, `WlmType`, `WlmMotion`, `WlmIcons`, `WlmTheme`, `WlmThemeExtension`, `WlmBreakpoint`, `WlmResponsive`, `WlmResponsiveValue`, `WlmCenteredColumn` |
| Buttons | `WlmPrimaryButton`, `WlmSecondaryButton`, `WlmGhostButton`, `WlmIconButton`, `WlmHeaderIconButton`, `WlmFab`, `WlmButton` |
| Inputs | `WlmTextField`, `WlmSearchField`, `WlmKeyField`, `WlmCheckbox`, `WlmRadio`, `WlmToggle`, `WlmSegmentedControl`, `WlmDropdown`, `WlmCombobox`, `WlmSlider`, `WlmStepper`, `WlmDateField`, `WlmRating`, `WlmPinInput`, `WlmForm` |
| Display | `WlmBadge`, `WlmChip`, `WlmPill`, `WlmSpecRow`, `WlmDivider`, `WlmAvatar`, `WlmAvatarStack`, `WlmTag`, `WlmKbd`, `WlmStat`, `WlmCallout`, `WlmCodeBlock`, `WlmProgressBar`, `WlmProgressRing`, `WlmTooltip`, `WlmDataTable`, `WlmTimeline`, `WlmMessageBubble`, `WlmKpiCard` |
| Layout | `WlmSurface`, `WlmCard`, `WlmPageHeader`, `WlmSectionLabel`, `WlmAppBar`, `WlmAppScaffold`, `WlmAccordion`, `WlmBreadcrumbs`, `WlmDrawer` |
| Lists | `WlmListTile`, `WlmActionRow`, `WlmSwitchTile`, `WlmCheckboxTile`, `WlmRadioTile` |
| Feedback | `WlmLoader`, `WlmScanBar`, `WlmSkeleton`, `WlmGridSkeleton`, `WlmSnack`, `WlmToast`, `WlmToaster`, `WlmBanner`, `WlmEmptyState`, `WlmErrorState`, `WlmRefresh` |
| Navigation | `WlmBottomNav`, `WlmStepDots`, `WlmTabBar`, `WlmShell`, `WlmPagination`, `WlmPageRoute` |
| Overlays | `showWlmBottomSheet`, `WlmDialog`, `WlmCommandPalette`, `WlmActionSheet`, `WlmMenu`, `WlmPopover` |
| Media | `WlmNetworkImage`, `WlmProgressiveImage`, `WlmMasonryGrid` |
| Primitives | `WlmFocusable` |
`Switch`, `Checkbox`, `Radio`, `AppBar`, `SnackBar`, `BottomNavigationBar`, `Card` and `TextSelection` are restyled automatically by `WlmTheme` — use the stock Material widgets and they'll match.
## Design language
* **Typography** — JetBrains Mono everywhere, light weights (200–400), tight negative letter-spacing on headings, wide positive on labels.
* **Spacing scale** — `4 / 8 / 12 / 16 / 24 / 32` (xs..xxl).
* **Radii** — `6 / 12 / 16 / 20`.
* **Borders** — 1px hairlines on `outlineVariant @ 0.30`. No shadows, no glassmorphism.
* **Palette** —
* Dark: ink `#0A0A0A` · surface `#111114` · accent periwinkle `#8FA8FF`.
* Light: paper `#F4F4F6` · ink `#0E0E14` · accent periwinkle `#4A5BD0`.
* **Motion** — short and quiet (`fast 120ms`, `medium 220ms`, `slow 320ms`).
## Repository layout
```
wloom/
├── packages/wolwoloom/ # the publishable Flutter package
│ ├── lib/ # source
│ ├── example/ # example app (Android / iOS / Web)
│ ├── pubspec.yaml
│ └── README.md
├── apps/widgetbook/ # interactive component gallery (web + mobile)
├── reference/wolwo/ # the cloned wolwo app this system was distilled from
├── README.md (this file)
└── LICENSE
```
## Run locally
```sh
# wloom — the showcase app (runs the design system on Android / iOS / desktop / web)
cd packages/wolwoloom/example
flutter run # Android / iOS / desktop
flutter run -d chrome # Web
# wloom wb — interactive widgetbook gallery
cd apps/widgetbook
flutter run -d chrome # browse every component with knobs
flutter build web # ship the gallery as a static site
```
## CI / publishing
Three GitHub Actions workflows live under [`.github/workflows/`](.github/workflows):
| Workflow | Trigger | What it does |
| --- | --- | --- |
| [`ci.yml`](.github/workflows/ci.yml) | Push & PR to `main` | `flutter analyze` across the package, example and widgetbook · `flutter test` for the package. |
| [`pages.yml`](.github/workflows/pages.yml) | Push to `main` (paths: `apps/widgetbook/**`, `packages/wolwoloom/**`) · `workflow_dispatch` | Builds the widgetbook for web and deploys it to GitHub Pages. **One-time setup:** *Repo → Settings → Pages → Source: GitHub Actions.* |
| [`release.yml`](.github/workflows/release.yml) | Push of any `v*` tag · `workflow_dispatch` | Builds release APKs for both showcase apps (`wloom` and `wloom wb`, split-per-ABI + universal) and publishes them to a GitHub Release. Optionally signs with a keystore from repo secrets — see the comments at the top of the file. |
To cut a release:
```sh
# Showcase APKs (built and attached to a GitHub Release)
git tag v0.3.5
git push origin v0.3.5
# Publish the wolwoloom package to pub.dev (uses trusted publishing / OIDC — no token)
git tag wolwoloom-v0.3.5
git push origin wolwoloom-v0.3.5
```
## Roadmap
* `WlmAutocomplete`, `WlmRangeSlider`, `WlmTimeField`
* Charts (mono sparkline, bar, ring)
* `go_router` glue for `WlmShell`
* Generated docs site (Dartdoc + the widgetbook web build)
## Reference
The [`reference/wolwo/`](reference/wolwo) folder is a shallow clone of the wolwo wallpaper app that this design system was distilled from. Treat it as living documentation: every component in `wolwoloom` has a counterpart there showing how it was originally consumed.
## License
[MIT](LICENSE) — do whatever you want, just keep the notice. The cloned `reference/wolwo/` retains its own license.