https://buninux.com/ 2026-10-24 https://buninux.com/design-tokens 2026-10-26 https://buninux.com/images/design-tokens/anatomy-structure.png Design token anatomy: hex value #ffffff connected to token name theme.icon.default, which applies to a star icon. https://buninux.com/images/design-tokens/token-hierarchy.png Token alias chain: raw #ffffff in global.color.base.0, aliased by theme.icon.default to style a UI icon element. https://buninux.com/images/design-tokens/use-case.png One design token theme.icon.default aliased to two different icons — Icon A and Icon B — so a single value controls both. https://buninux.com/images/design-tokens/global.png?v=3 Global token subgroups (color, effects, typography, size-unit, radius, border) feeding into Theme and Component token groups. https://buninux.com/images/design-tokens/theme.png?v=2026-10-26-2 Theme tokens folder: Surface subgroup where page, container and overlay alias Global tokens, showing grey-1 to grey-3 in Light mode and light-1 to light-3 in Dark mode. https://buninux.com/images/design-tokens/component.png?v=2 Button component tokens: spacing, icon-size, font-size, line-height, and radius across Medium and Small size modes. https://buninux.com/images/design-tokens/modes.png?v=3 theme.surface.page token aliasing global.color.base.1 and global.color.base.10, rendering as light and dark mode phone screens. https://buninux.com/images/design-tokens/anatomy-name.png?v=3 Token name anatomy for global.color.base.1: parts labeled Group (global), Classifier (color), Identifier (base), and Value (1). https://buninux.com/images/design-tokens/anatomy-theme.png GTC taxonomy: theme.button.primary.blue.hover broken into five levels — Group, Element, Classifier, Identifier, and State. https://buninux.com/images/design-tokens/model.png?v=2026-07-03-1 GTC model: global branches into theme.button/surface/icon/text and component.button/input/control/tabs on a specificity axis. https://buninux.com/design-systems 2026-10-28 https://buninux.com/images/design-systems/ds-1.webp GTC design tokens emblem — white cube over a geometric grid, Global, Theme, Component https://buninux.com/images/design-systems/ds-2.webp Design tokens panel — global and theme token tree with hex, OKLCH and CSS variable values https://buninux.com/images/design-systems/ds-3.webp Design system generator for an AI agent — color, typography, radius and motion controls with live buttons https://buninux.com/images/design-systems/ds-4.webp Crypto wallet app, dark theme — balance, activity and settings screens https://buninux.com/images/design-systems/ds-5.webp iPhone 16 Pro, Pro Max and Plus mockups in four color variants with layered Figma structure https://buninux.com/images/design-systems/ds-6.webp Kanban board, desktop and mobile — task cards tagged AI, iOS and web https://buninux.com/images/design-systems/ds-7.webp Dark UI component sheet — transactions, calendar, OTP input, chat, file upload, payment form https://buninux.com/images/design-systems/ds-8.webp Light fintech app — currency picker, monthly payments donut chart, stock watchlist https://buninux.com/images/design-systems/ds-9.webp AI agent session tracker — step timeline with cost, tokens and duration per tool call https://buninux.com/images/design-systems/ds-10.webp EUR/USD trading terminal, web and mobile — candlestick chart with sell and buy actions https://buninux.com/images/design-systems/ds-11.webp Frames X landing page — design systems in sync with Figma, code and your AI agents