orb-ui

هذا التحليل غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.

Overall

landing page, futuristic, medium density, dark

Palette

background #0a0a0a; surfaces [#101010, #eef7ff, #8bc7ff, #7fc2ff]; text #ffffff; muted text #858585; primary #8bc7ff; accents [#8bc7ff, #7fc2ff]

Type

headings system-ui, 700, sentence-case; body system-ui, 16px; scale h1 76px / h2 54px / h3 13px

Shape & spacing

button radius 7px, card radius 28px, borders none, shadows rgba(0,0,0,0.42) 0px 34px 90px 0px, inset rgba(255,255,255,0.024) 0px 1px 0px 0px, section spacing 80px, content width 1016px

Sections (top to bottom)

• Header — horizontal layout, logo left, nav right, "Star on GitHub" button with star icon, dark background
• Hero — two-column layout, headline "Voice agent UI that feels alive." in large bold type, subtext below, CTA buttons ("npm install orb-ui", "Read the docs"), live voice surface preview with animated orb and theme controls, dark background
• Features — four equal-width cards with icons and labels: "7 Provider paths", "2-way Audio response", "A11y Accessible controls", "MIT Open source", dark background
• Quick start — two-column layout, headline "Choose your stack. Keep one component.", integration path list on left, code block on right with syntax highlighting, dark background
• Documentation — full-width section with "Build the interface around your voice agent." headline, image of orb UI, vertical list of guides with arrows, dark background
• Footer — three-column layout, brand info left, product links center, resources right, light gray text, dark background

Signature details

• Animated gradient orb with soft glow
• Interactive theme toggle buttons with active state highlight
• Code blocks with syntax coloring and copy-to-clipboard button
• Floating card shadows with inset highlights
• Subtle motion presets for orb behavior
• Clean, minimal typography with consistent spacing

Other pages

• /docs: sidebar navigation, main content with code examples and structured sections, dark background
• /playground: interactive UI with provider/theme selectors, signal display panel, volume sliders, real-time JSON output, dark background

1. 1

   انقر على «استخدم هذا القالب» لفتحه في Ottermind Studio مع ملء الموجز.

2. 2

   أضف إلى الموجز علامتك التجارية وجمهورك وصفحاتك ومحتواك.

3. 3

   ينشئ Ottermind موقعًا جديدًا مستوحى من هذا التصميم، وتابع تعديله في المحادثة.