For years, Symfony teams solved UI scaling one of two ways.
Either you adopted a JavaScript build pipeline — Webpack Encore, Vite, npm scripts — and a utility CSS framework like Tailwind.
Or you stayed "PHP-first" and watched every project grow its own app.css, its own spacing scale, its own dark-mode hacks, and its own Bootstrap overrides.
Both paths work. Neither scales cleanly across agencies, products, and long-lived admin UIs.
UI Kernel (
color-mix(in oklch, …), @supports fallbacks, dark mode via prefers-color-scheme (pair with — Michael Lip — perceptual uniformity, relative colour syntax (oklch(from var(…) …)), color-mix— Mat Frana — practical OKLCH palette rebuild (lightness/chroma curves, P3 gamut); migration narrative rather than Token Studio/APCA
From CSS files to Symfony infrastructure
Node-centric pipelines (Style Dictionary, Tailwind config, theme JSON → build step) fit design agencies. They hurt Symfony teams who want Flex install, YAML config, and AssetMapper without a second repository for tokens.
UI Kernel inverts the default:
Tokens live as data — W3C DTCG-shaped theme layers (colour, spacing, radius, motion, typography references).
PHP resolves and validates — lineage (Balanced, Semantic, Utility), light/dark variants, OKLCH ramp math, contrast-aware semantic colours.
CSS is emitted server-side — custom properties on[data-theme="…"], ready for cache warmup.
Twig wires the page — boot script + theme CSS in the layout; no Encore entry for "theme variables."
Minimal layout:
{# templates/base.html.twig #}
<head>
{{ ui_kernel_theme_boot_script() }}
{{ ui_kernel_css()|raw }}
</head>
Configuration stays in familiar Symfony paths:
# config/packages/symfinity_ui_kernel.yaml
symfinity_ui_kernel:
default_theme: semantic
default_variant: semantic
Install is Composer + Flex — same story as any other bundle:
composer require symfinity/ui-kernel
What you do not need for theming: Tailwind as the token source of truth, a Sass pipeline for variables, or Encore/Vite solely to compile :root { --… }.
What you still use Symfony for: AssetMapper for component JS/CSS paths, Stimulus for micro-interactions, UX Twig Components for leaves — AssetMapper is plumbing, not your design system.
How this stays scalable
Semantic tokens, not utility soup
Components and UX Blocks reference roles and semantic variables (data-ui-role, --ui-color-accent, spacing rhythm) — not p-4 text-gray-600 copied across Twig files.
The kernel owns the look spine; symfinity/ux-blocks-* packages own component CSS that consumes those variables. Boundary stays explicit: kernel emits tokens and global profile rules; blocks emit role selectors.
One theme graph, many surfaces (direction)
The same resolved token graph can feed:
- Web layouts (today)
- Email HTML with inline-safe subsets (horizon)
- PDF/print (horizon)
- CLI/TUI structured output (horizon)
That is the payoff of server-resolved tokens versus "whatever landed in public/build/app.css last Tuesday."
OKLCH inside, CSS outside
Internally, Symfinity generates palettes in OKLCH for perceptual ramps and ref resolution. Public CSS still ships browser-ready strings (sRGB hex/rgb(), with P3 where supported). You get palette math without asking every integrator to hand-author oklch() literals in YAML.
Works with what you already run
UI Kernel complements Symfony UX — it does not replace Live Components, Turbo, or Stimulus.
Typical Stage A path:
- Install kernel for tokens on the layout shell.
- Drop UX Blocks into existing Twig.
- Add font-manager when typography tokens need real webfonts.
Plain Twig + your own CSS remains valid for marketing pages. The stack targets long-lived product and admin UI where theme drift hurts.
When Tailwind or Encore still make sense
Honest scope:
Tailwind — excellent for marketing microsites, rapid prototypes, or teams already standardized on utility CSS. Symfinity does not ask you to rip it out on day one.
Encore/Vite — still right when you need a heavy JS application bundle, legacy React/Vue islands, or org-wide frontend tooling unrelated to tokens.
UI Kernel draws a line: theming and design-system variables are Symfony infrastructure, not npm devDependencies.
If your pain is "every client has a different primary colour and our admin UI looks nothing like last year's project," tokens in PHP beat another tailwind.config.js fork.
Try it locally
After adding the [symfinity/recipes]:(
More package-level deep dives:
Articles on further Symfinity package tiers are planned, this is just the beginning.
Explore packages and source at github.com/symfinity.
Community-Analysen & Experten-Meinungen 0
Verwandte Story-Cluster & Quellen (Vektor-KI)
Ähnliche Beiträge
Auch interessante Nachrichten UI Kernel: Design Tokens as Symfony infrastructure
Thematisch verwandte Begriffe: Kernel, Design, Tokens, Symfony · 6 Treffer
Apple accuses OpenAI of destroying evidence as trade-secrets fight intensifies
GPT-6 Astra Release Today? OpenAI’s Next Major AI Model Is Almost Here
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
🔖 Gespeicherte Artikel
tsecurity.de App
Installiere tsecurity.de direkt auf deinen Home-Bildschirm für das ultimative Vollbild-Magazinerlebnis ohne Browser-Leisten.
Community Radar & Live Chat
📡 Aktivitäten deiner Analysten
💡 Neues Thema oder Eilmeldung einreichen
Reiche interessante Links, Zero-Days oder Debatten ein. Die Community entscheidet per Upvote über die Veröffentlichung.
SOCIAL SHARE CARD GENERATOR