erselaktaş Contact
02

Selected work02 / 092025 — now

ng-alda

Angular design system & component library

The library I wished I had on every project. It now runs inside Ulory, iDenote and parts of Noctua.

Studio
AstroNote
Years
2025 — now
Role
Design, engineering, documentation
Scope
60 components, theming engine, Figma kit, docs site, licensing
Acme Console, the docs' demo app built entirely from ng-alda, with an open date picker and live toasts
Acme Console, the docs' demo app built entirely from ng-alda, with an open date picker and live toasts

ng-alda grew out of client work. The same app bar, data table, page wizard and tree kept appearing in CWEX and then in Tallsoft, so in early 2026 I pulled them out into a library of their own. Version 1.0 shipped in February; it is on 2.1 now.

It is built on Angular’s newest primitives (signals, standalone components, OnPush), themed entirely through CSS custom properties, documented on ng-alda.astronote.co and in TypeDoc, and tested to around 95% coverage.

A theme starts from one colour: the engine builds the palette from a colour harmony and checks every pair against WCAG contrast. It ships in five locales, right-to-left included, and is sold under AstroNote.

Overview & launch

The docs site doubles as the product page: sixty components, five languages, AA accessibility and test coverage in the mid-nineties, sold as perpetual licences through AstroNote.

Launch frame for the AstroNote site: “New Angular UI Kit”
Docs home: 60 components, 5 languages, AA, 94% test coverage
Launch frame for the AstroNote site: “New Angular UI Kit” · Docs home: 60 components, 5 languages, AA, 94% test coverage

Components

The pieces products are actually made of: form controls in three styles and three sizes, date and range pickers with presets, alerts, toasts and menus, a data grid that keeps 50,000 rows smooth by rendering only the twenty-five you can see, a kanban, and canvas charts with no charting library underneath.

Forms: three styles side by side, date picker and range picker open, language selector, input states
Forms: three styles side by side, date picker and range picker open, language selector, input states
Feedback and status: alerts, stacked toasts, a context menu with badges, avatars, progress, segmented tabs and badges
Feedback and status: alerts, stacked toasts, a context menu with badges, avatars, progress, segmented tabs and badges
Data: AldaGrid with export and pagination, and the sprint kanban
Data: AldaGrid with export and pagination, and the sprint kanban
Canvas charts with no charting library: Sankey, treemap, radar, stacked bar, area and donut
Canvas charts with no charting library: Sankey, treemap, radar, stacked bar, area and donut

Theming, dark mode & RTL

Give it one colour and the theme builder works out the rest through one of six harmonies. Every colour gets a ten-step ramp, and a live matrix checks each text and background pair against WCAG. Swap the preset and a whole app follows; the same tokens run dark mode and a fully mirrored Arabic layout.

Theme Builder, 10-step ramps and the live contrast matrix
Theme Builder, 10-step ramps and the live contrast matrix
One console, re-themed: Royal Purple, Ocean Blue, Forest Green, Sunset Orange, Rose Pink, and dark
One console, re-themed: Royal Purple, Ocean Blue, Forest Green, Sunset Orange, Rose Pink, and dark
Dark mode, and the Arabic locale with the whole shell mirrored
Dark mode, and the Arabic locale with the whole shell mirrored

Docs & developer experience

One icon component with nine icon libraries behind it, token docs that say which variable goes where, live playgrounds for the charts and a TypeDoc reference for every public class.

Docs: one icon API over nine libraries, the type scale, and token docs that say which variable goes where
Docs: one icon API over nine libraries, the type scale, and token docs that say which variable goes where

Built on ng-alda

The library is not a showcase; products run on it. Ulory, AstroNote's task and project app, takes its kanban, backlog and calendar views straight from ng-alda.

Ulory, AstroNote's task and project app: 'Bee Ulorious'
Ulory, AstroNote's task and project app: 'Bee Ulorious'

The method behind it

Lineage
  1. 2025·02CWEX: first shared components
  2. 2025·08Tallsoft: second generation
  3. 2026·02ng-alda 1.0, now 2.1
  4. 2026Ulory, iDenote, Noctua
Numbers
60Components
9Icon sets
5Locales, incl. RTL
~95%Test coverage
Theming 
// Ulory's whole palette, from one colour
changeTheme('#2A7AED', TRIADIC);
// → primary #2A7AED · secondary #ED2A7A · WCAG-checked
Default
#EB4037accent
#EB9A37secondary
#2A7AEDulory
#ED2A7Atriadic

Next03 / 09

BirtechBrand architecture for an infrastructure-monitoring company · rebrand, product logos, packaging, 3D

All selected workThe archiveContact