الأساسيات

التخطيط والحركة

سلّم مسافات بخطوة 4 بكسل، وأربعة أنصاف أقطار للزوايا، وأسطح مسطّحة، وحركة قصيرة وهادئة.

المسافات

الرمز	القيمة	الاستخدام
`space-1`	4px	Proposed. Hairline gaps, icon-to-label.
`space-2`	8px	Proposed. Tight stacks; stroke weight of the cover's arches.
`space-3`	16px	Proposed. Control padding, gaps between related items.
`space-4`	24px	Proposed. Card padding.
`space-5`	40px	Proposed. Between groups within a section.
`space-6`	64px	Proposed. Between sections.
`space-12`	12px	Input padding, compact control padding, table cell padding.
`space-32`	32px	Page gutters on desktop, space between cards.
`space-48`	48px	Large section gaps in product pages.

الزوايا

الرمز	القيمة	الاستخدام
`radius-sm`	8px	Small controls inside dense tables, tags, thumbnails.
`radius-control`	10px	Buttons, inputs, selects, menu items and nav items. Rectangular controls, never pills.
`radius-md`	14px	Cards, panels and table cards.
`radius-lg`	18px	Dialogs, bottom sheets and popovers.
`radius-xl`	32px	Image frames and hero panels.
`radius-pill`	9999px	From the deck: the section tabs (GOAL, SYMBOLS, COLORS). Also badges, chips and avatars. Not buttons.

الظلال

الرمز		الاستخدام
`shadow-menu`		Menus, popovers, toasts.
`shadow-overlay`		Dialogs and bottom sheets.

الحركة والطبقات

الرمز	القيمة	الاستخدام
`duration-fast`	`150ms`	Hover, focus and press transitions.
`duration-base`	`200ms`	Opening and closing dialogs, menus, toasts.
`easing-standard`	`cubic-bezier(0.2,0,0,1)`	All transitions.
`z-sticky`	`100`	Sticky headers and sidebars.
`z-dropdown`	`1000`	Menus and popovers.
`z-modal`	`1100`	Scrim and dialog.
`z-toast`	`1200`	Toasts above everything.

الإرشادات

The brand shape is the rounded triangle: a soft peak, wide base, generous corners. It appears in the symbol, the three patterns and the letterhead's overlapping corner shapes. Reuse it for avatars, image masks and decorative accents.
Colour comes in flat nested layers, outermost lightest, innermost with the lit opening. Build illustration and backgrounds the same way: stacked flat fields, no outlines, no shadows.
Section tabs are the brand's one piece of layout furniture: a teal pill flush to the edge of the page, fully rounded at its free end (radius-pill), with the section name in display capitals, white. Use the SectionTag component.
Three patterns live in assets/Patterns. All sit on deep-teal with teal-light linework: outline (rounded triangles in a staggered grid), layers (the symbol tessellated), dots (triangle with a centre dot). Use them for covers, edges and full-bleed panels, in one pattern per surface. Never put body text over a pattern.
On dark covers the outline pattern appears very faint on navy, in a tone only slightly lighter than the ground. Keep it that quiet.
Spacing is a proposed 4px scale. Corner radii beyond the pill (radius-sm 8, radius-control 10, radius-md 14, radius-lg 18) are taken from the shipped products, not the deck.
Proposed 4px base. space-1 to space-6 are indexed; space-12, space-32 and space-48 are named by pixels because the shipped apps use those steps.
Pill is read from the deck (the section tabs). The others are taken from the shipped web, mobile and POS apps so the three products and this system agree.
The brand is flat. Product surfaces use borders; shadows are only for layers that float above the page.
Respect prefers-reduced-motion: drop transitions and shorten loops.