نظام Octobits UI

نظام تصميم بكسلي مثالي مبني لنظام أوكتو بيتس البيئي.

رموز الألوان

octobits-dark

#0a192f

octobits-teal

#40E0D0

octobits-blue

#7fa8b3

dark-blue

#0d1b2a

border-blue

#1b3a4b

coral

#FF6B9D

sand

#C2B280

الطباعة

Heading 1

Heading 2

Heading 3

Heading 4

Body text using the secondary color.

نص عربي تجريبي لاختبار خط Handjet.

معرض المكونات

الإجراءات

المدخلات

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

محدد

الخيار الأول

الخيار الثاني

October 2026

العرض

افتراضيثانويمحيطتدميري

Card Title

Card description text.

Card content area.

Heads up!

This is an alert message.

OBAvatar with fallback

16:9 Aspect Ratio

النوافذ المنبثقة والتغذية الراجعة

التنقل

Account settings content.

فن البكسل

Nested PixelCard

A nested PixelCard example.

Su	Mo	Tu	We	Th	Fr	Sa