Beyoğlu Professional UI Showroom
Production-facing design system laboratory for Client, AR and HQ. V1 locale foundation: English, Türkçe, 简体中文 and Español. English is the fallback/default.
One visual language, three operating densities
Client emphasizes explanation and whitespace; AR increases work-queue density; HQ adds cross-organization control context. Localization changes copy and typography, not the product family.
More whitespace, fewer simultaneous actions, explanatory labels and a clear next step.
Denser queues, faster filters and more simultaneous status context without shrinking type.
Highest information density with finance, regulatory and operations separated structurally.
Typography — four V1 locales
EN/TR/ES use the supplied Tilda Sans assets. Simplified Chinese uses the controlled CJK system fallback token until an approved self-hosted CJK webfont is selected. CJK tracking is not inherited blindly from Latin typography.
Packaging compliance without unnecessary friction.
Packaging compliance without unnecessary friction.
Packaging compliance without unnecessary friction.
Packaging compliance without unnecessary friction.
Ambalaj uyumunu gereksiz karmaşa olmadan yönetin.
Ambalaj uyumunu gereksiz karmaşa olmadan yönetin.
Ambalaj uyumunu gereksiz karmaşa olmadan yönetin.
Ambalaj uyumunu gereksiz karmaşa olmadan yönetin.
清晰管理包装合规，无需不必要的复杂流程。
清晰管理包装合规，无需不必要的复杂流程。
清晰管理包装合规，无需不必要的复杂流程。
清晰管理包装合规，无需不必要的复杂流程。
Gestione el cumplimiento de envases sin complejidad innecesaria.
Gestione el cumplimiento de envases sin complejidad innecesaria.
Gestione el cumplimiento de envases sin complejidad innecesaria.
Gestione el cumplimiento de envases sin complejidad innecesaria.
Colors & semantic surfaces
Neutral application canvas, white surfaces, strong dark type and restrained cyan → blue → violet accents. Burgundy remains outside the application accent system.
Spacing, radius & elevation
A compact token scale creates rhythm without wrapping every object in a card. Shadows communicate elevation only when hierarchy needs it.
Form controls & localization
Labels, help, placeholders and validation copy are supplied from the locale layer. Fixed-width English assumptions are avoided.
Navigation primitives
Desktop and mobile navigation accept localized labels. Turkish and Spanish expansion is allowed to wrap or scroll instead of clipping; mobile remains a distinct navigation pattern.
What needs your attention
Cards & financial separation
Changing language never changes currency identity. The same EUR mock values are formatted by locale while regulatory pass-through and service revenue remain separate concepts.
What needs your attention
Four countries, one clear operating view. Mock data only.
Explain this screen using approved account context and sources. Advisory only.
Tables & dense data foundation
Localized headers and status labels preserve readable table typography. Horizontal scrolling is preferred to shrinking text on narrow viewports.
Work queue
Dense enough for daily operations; readable enough to scan without micro-type.
| Client | Country | Work item | Due | Status | Action |
|---|---|---|---|---|---|
| Nordic Home GmbHMock only | Germany | Q3 declaration | 18 Sept 2026 | Funding ready | |
| Atelier Maison SASMock only | France | Registration | 31 Aug 2026 | Documents missing | |
| Mercato Verde SRLMock only | Italy | Producer review | 1 Sept 2026 | Review required | |
| Oak & Linen Ltd.Mock only | Germany | Authority response | 20 Sept 2026 | Operator action | |
| Studio Terra SLMock only | France | Q3 declaration | 22 Sept 2026 | Client signature |
Language-neutral state identity
Canonical state codes remain language-neutral. Translated labels are presentation only and are never used as persisted business identity.
Feedback & system states
All user-facing titles, descriptions and actions are caller-supplied and can be localized.
This fixture shows the empty state without removing the screen structure or navigation context.
A blocking requirement is explained with text and a next step; color alone never carries the meaning.
Overlays & localized actions
Modal action labels and accessibility labels are supplied by the locale layer rather than embedded English strings.
Documents & upload
File labels and helper copy are localized; no storage backend is connected in Phase 03.
Communication & AI entry point
Communication and AI entry-point copy is provided externally and changes with the active locale.
Explain this screen using approved account context and sources. Advisory only.
Localization stress lab
The active locale changes this representative stress fixture in real time. It covers buttons, tabs, badges, filters, table headers, form labels, alerts, modal actions, empty states, notifications and original-source-language metadata.
Localization stress fixture
Long labels, compact Chinese text and locale formatting must coexist without clipping.
| Client organization | Destination country | Compliance status |
|---|---|---|
| Example Trading Ltd. | Germany | Data required |
Client mini dashboard
Localized non-specialist SME clarity with locale-aware date, number and currency formatting.
What needs your attention
Four countries, one clear operating view. Mock data only.
Explain this screen using approved account context and sources. Advisory only.
AR work queue
Localized operational density and table expansion behavior.
Work queue
Dense enough for daily operations; readable enough to scan without micro-type.
| Client | Country | Work item | Due | Status | Action |
|---|---|---|---|---|---|
| Nordic Home GmbHMock only | Germany | Q3 declaration | 18 Sept 2026 | Funding ready | |
| Atelier Maison SASMock only | France | Registration | 31 Aug 2026 | Documents missing | |
| Mercato Verde SRLMock only | Italy | Producer review | 1 Sept 2026 | Review required | |
| Oak & Linen Ltd.Mock only | Germany | Authority response | 20 Sept 2026 | Operator action | |
| Studio Terra SLMock only | France | Q3 declaration | 22 Sept 2026 | Client signature |
HQ control overview
Localized control-plane density with finance, regulation and operations separated.
Portfolio control overview
Cross-organization, regulatory and financial context with higher density but the same product language.
| Organizations | Country | Domain | Issue | Age | Owner | Status |
|---|---|---|---|---|---|---|
| Atelier Maison SAS | France | Registration | Evidence mismatch | 3h | AR France | Review required |
| Nordic Home GmbH | Germany | Finance | Funding confirmation | 47m | HQ Finance | Registration in progress |
| Studio Terra SL | Italy | Regulatory | Impact assessment | 22m | Regulatory | Transition / informational |
Responsive + localization lab
Review 360, 390, 768, 1280, 1440 and 1920 widths. The active locale is passed into the fixture iframe; TR/ES expansion and CJK line breaking are visible at narrow widths.
Locale-aware accessibility foundation
Dynamic locale changes update the root lang/data-locale metadata. Navigation and control labels are localized; CJK tracking and line breaking receive locale-aware token treatment.
en · LTR
Supplied Tilda Sans
€1,234.56 · 31 Aug 2026
Selected representative fixture · en
Normal, Loading, Empty, Error, Blocked, Success, Long content and Dense data all use the selected locale.
What needs your attention
Four countries, one clear operating view. Mock data only.
Explain this screen using approved account context and sources. Advisory only.