رموز التصميم وCSS وقليل من JavaScript الخالصة، مبنية على ما يفعله المتصفح أصلًا: ابدأ مشروعًا باستخدام LUZ، نظام التصميم Light, Usable and Zero-dependency، أو انقل مشروعك صفحةً صفحة. كل مكوّن يعمل قبل تحميل JavaScript، وكل تغيير يبدأ باختبار فاشل.
عند تفعيل JavaScript، يُرسم هنا ضوء ساعتك.
الأساس
الألوان والمقاييس والأوضاع الثلاثة كخصائص CSS مخصّصة. بلا مكوّنات: ترميزك وأصنافك. في مشروع قائم، ابدأ من هنا: لا تمسّ شيئًا.
npm install @luz-ds/tokens<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css">.cta {
background: var(--luz-brand-fill);
color: var(--luz-text-on-fill);
}
.cta:hover {
background: var(--luz-brand-fill-hover);
}
a {
color: var(--luz-brand-primary);
}الأساس + Core
المكوّنات والتخطيط فوق الرموز، في طبقة تتالٍ واحدة تغلبها أنماطك دائمًا. لبدء مشروع، أو لنقل مشروع قائم على أجزاء بواسطة luz.conditional.css.
npm install @luz-ds/tokens @luz-ds/core<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script><div class="luz-field">
<label class="luz-field__label" for="f-name">Project name</label>
<input class="luz-input" id="f-name" type="text" aria-describedby="f-name-help">
<div class="luz-field__helper" id="f-name-help">Shown on the dashboard.</div>
</div>
<div class="luz-field">
<label class="luz-field__label" for="f-slug">Slug</label>
<input class="luz-input luz-input--error" id="f-slug" type="text"
aria-invalid="true" aria-describedby="f-slug-error">
<div class="luz-field__error" id="f-slug-error">Use letters, numbers and dashes only.</div>
</div>الأساس + Core + الكتالوج
ما يحتاجه الموقع كله: البحث فيه، والسؤال عن ملفات تعريف الارتباط، وتبديل اللغة.
npm install @luz-ds/tokens @luz-ds/core @luz-ds/catalog<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css">
<!-- One link per catalog component the page uses: here the search -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js"></script><luz-search>
<a class="luz-search__fallback" href="../docs/a-z/" data-luz-search-fallback>A–Z</a>
<button class="luz-search__trigger" type="button" data-luz-search-open hidden>Search</button>
<dialog class="luz-modal luz-search" id="luz-search"
data-luz-search-src="/search-index.json">
<search class="luz-search__body">
<input class="luz-input" id="luz-search-q" type="text">
<p class="luz-search__status" role="status"></p>
<div class="luz-search__results" data-luz-search-results>…</div>
</search>
</dialog>
</luz-search>الأساس + Core + الكتالوج + موجّهك
اختر موجّه نوع موقعك والصقه في الذكاء الاصطناعي الذي تستخدمه. يسألك عمّا تحتاجه، ثم يبني موقعك، أو ينقل موقعك الحالي إلى LUZ.
صفحة واحدة تعرض فكرتك: واجهة رئيسية وأقسام وأرقام وتذييل.
مقالات على أي نظام لإدارة المحتوى: ترويسة وعناوين مقالات وجدول محتويات.
شاشات للعمل: ترويسة وشريط جانبي ولوحة معلومات.
صفحات يتعلّم منها الناس: شريط جانبي ورؤوس صفحات وأمثلة وتنقّل بين الصفحات.
نوع آخر من المواقع، أو لم تقرّر بعد؟ الموجّه العام يسأل أولًا.
ابدأ من الصفرلماذا LUZ
نظام تصميم للويب ينطلق من CSS ولا يحتاج إلى خطوة بناء. أنماط CSS الخاصة بك تغلب دائمًا، وJavaScript تحسين فقط، وكل صفحة تعمل قبل أن تُحمَّل.
شيفرة قليلة، وبلا خطوة بناء.
CSS عادية ووحدات ES صغيرة، من شبكة توصيل محتوى أو من npm. لا معالج مسبق ولا مترجم ولا خطوة بناء: ما تقرؤه في الملفات هو بالضبط ما يشغّله المتصفح. يبقى tokens وcore بأصغر حجم ممكن، ولا يُرفع سقف حجمهما أبدًا. أما catalog فخفيف لأنه يأتي قطعًا: كل مكوّن ملف مستقل، ولا تحمّل الصفحة إلا ما تستخدمه.
إمكانية الوصول هي نقطة البداية، لا إضافة لاحقة.
يستهدف WCAG 2.2 AA، وهو مستوى الإصدار 4.1.1 من المعيار الأوروبي EN 301 549 للمنتجات الرقمية المتاحة. ينطلق مما يحسنه المتصفح أصلًا، ويضيف تركيزًا مرئيًا وتباينًا وحركة مخفّضة، ويفحص ذلك بأداة axe في كل تغيير. لا يستوفي كل المعايير بعد: يعرض بيان إمكانية الوصول ما فُحص وما لم يُختبر وما يفشل.
شيفرتك أنت، لا شجرة من شيفرة غيرك.
تُنشر حزم LUZ بلا اعتماديات: CSS ووحدات ES فقط فوق ما يوفّره المتصفح أصلًا. لا شيء تثبّته لتجربتها، ولا إطار عمل تلاحقه، ولا شيء ينكسر حين تُصدر مكتبة أخرى إصدارًا رئيسيًا جديدًا.
HTML دلالي بتنسيق جاهز
اكتب العنصر الذي تقصده وسيمنحه LUZ تنسيقه، بلا أصناف. ابدأ مشروعًا باستخدام LUZ، أو انقل مشروعك صفحةً صفحة: أنماطك تغلب دائمًا.
luz.conditional.css ينسّق ما داخل [data-luz] فقط؛ وبقية صفحتك تبقى كما هي.21 من 29 مكوّنًا هي CSS فقط؛ والباقي يتحسّن بسكربت ويعمل بدونه.
اعرض كل وسوم HTML<details open>
<summary>هل أحتاج إلى أصناف؟</summary>
<p>لا. يأتي HTML منسّقًا.</p>
</details>لا. يأتي HTML منسّقًا.
بدون LUZ
لا. يأتي HTML منسّقًا.
الـ HTML نفسه، مع LUZ
<label for="email">البريد الإلكتروني</label>
<input id="email" type="email"
value="ana@example.com">
<button>حفظ التغييرات</button>بدون LUZ
الـ HTML نفسه، مع LUZ
<a class="luz-btn luz-btn--primary"
href="/docs/">اقرأ التوثيق</a>
<button class="luz-btn luz-btn--danger"
type="button">احذف المشروع</button>أوضاع الألوان
كل لون دلالي معرَّف للوضع الفاتح والداكن والتباين العالي، وسمة واحدة، data-theme، تبدّل بينها: في الصفحة كلها أو في صندوق واحد، مثل هذه. هذا ما يأتي مع core. وبقية اليوم قرارك.
Core · مُضمَّن
وضع الألوان حسب وقت اليوم · Catalog، اختياري
صرّح بلحظات يومك في HTML، من الفجر إلى الليل، ودع القارئ يختار إحداها أو يتنقّل عبر اليوم. يبقى الوضع التلقائي للنظام، والتباين العالي لا يُعاد تلوينه أبدًا.
luz-theme-time
أسئلة
إجابات قصيرة عمّا يُسأل عن LUZ: ما هو وكيف يُستخدم.
LUZ is a design system for the web in three parts: tokens, core and the catalog, with prompts so an AI can build the site with you. It lets the browser do the work, checks instead of promising, and an AI can write it without making anything up.
Tokens hold the look, core styles your HTML and gives you components, and the catalog adds what a whole site needs. Tokens are the colors, scales, type and three color modes as CSS custom properties, and they work alone. Core is the reset, the style of every HTML element, the layout objects (o-container, o-stack, o-grid), the components (.luz-btn, .luz-card, .luz-tabs) and a little optional JavaScript. The catalog is pieces for the whole site, like search and the cookie banner.
LUZ starts from the browser instead of from a framework: native HTML, no build step, any stack, and it works without JavaScript. Accessibility is checked, not promised: axe tests, every contrast computed in each mode, forced colors and reduced motion. It needs less markup, because HTML comes out complete without classes, and it is customized without a fight, with layers, :where() and tokens, never !important. It is ready for AI in a way you can verify: the prompts are generated from the packages, so they never carry an invented class.
LUZ falls short in community, in complex widgets (a date picker, a combobox, a data table), in components for React or Vue, and in maturity: it is still 0.x.
The best way is six steps, with nothing to compile:
luz-tokens.css, luz.css and luz.js from the CDN or npm._template.css and change the values.The fast lane: paste the prompt for your kind of site into an AI and review the result with luz-check.
No. Most LUZ components are CSS only, and the ones with a script work without it too. The page of each component says what you get without JavaScript.
Yes, without fighting them. Tokens are the intended way to change the whole look, and your own CSS wins: LUZ is in cascade layers, so unlayered CSS beats it with no !important. What you do not override stays: change only the color of an h1 and it keeps LUZ's size.
LUZ is for websites written in HTML, new or already built: a landing page, a blog, documentation, a company site. It fits any generator or CMS that produces HTML, Markdown included (Hugo, Astro, Eleventy), projects with no build step, and sites that must be accessible and work without JavaScript. An existing site can move to it piece by piece.
LUZ is not for utility classes in the style of Tailwind, nor for React or Vue apps that expect their framework's components: LUZ gives HTML and classes. It gives no ready-made page structure (header, hero, footer) either: you write it, or the AI does.
لم تجد سؤالك؟ مزيد من الأسئلة، عن HTML والأصناف وعن المشاريع القائمة