Ombelle Digital Design System
Translating the existing Ombelle brand identity into an accessible, responsive digital system — preserving the sophisticated, architectural, editorial character of the brand while improving readability, performance, and maintainability for screens.
Brand colors do not automatically produce valid WCAG 2.2 AA text combinations. Coral is restricted to large text on light backgrounds. Gold and Blue are decorative-only on light backgrounds. All pass on Ink.
Porphyry is the primary display typeface — architectural, elegant, expressive. Freight Sans Pro provides calm, highly readable supporting typography. The supporting font is isolated behind a single token for future replacement.
Global heading tokens describe document hierarchy. Component typography tokens describe reusable interface and editorial roles that appear across multiple sections. Use these instead of hard-coding clamp() values in production components.
A 12-column grid with three container widths: standard (1440px), wide (1600px), and reading (720px). Responsive gutters scale from 20px on mobile to 80px on extra-large screens.
A deliberate scale from 4px to 240px. Section spacing is responsive — desktop retains generous 120–200px editorial spacing, scaling down deliberately for tablet and mobile.
Editorial restraint. Hover states use one or two coordinated effects — no bounce, glow, or exaggerated scaling. Every interactive element includes default, hover, focus-visible, active, and disabled states.
Only black versions exist. Do not fabricate white, cream, or gold variants. Clear space: maintain padding equal to the height of the "O" in "Ombelle." No shadows, strokes, glows, distortion, stretching, unapproved colors, or typography changes.
The O represents the two residential towers. Use sparingly with visual significance — image framing, masking, editorial transitions, large standalone brand moments.
Secondary decorative use: section transitions, framing, editorial movement. Keep away from critical image subjects. Decorative instances hidden from accessibility tree.
Subtle background fields, detail moments, residence/floor-plan context. Do not aggressively combine with organic lines. Decorative use only when appropriate.
Static fallback for reduced-motion. Used for subtle backgrounds, atmospheric layering, indoor/outdoor transitions.
Normal motion: animated atmospheric treatment. Reduced motion: static poster. Do not use as meaningful content.
Poster loads first. Hero video autoplays with native loop. Reduced-motion users receive static poster only.
Content image: meaningful alt text from media catalog.
Decorative image: alt="" or aria-hidden where appropriate.
Decorative brand graphics: aria-hidden.
Ambient video: muted, playsinline, aria-hidden when decorative.
Reduced motion: static fallback for all video media.
Rendering disclaimer: only when confirmed by content/legal source.
Images: Astro/Vite resolved, responsive sizes, focal point support, explicit dimensions, lazy below fold.
Hero: poster first, video autoplays with native loop.
Textures: lazy/deferred, static fallback for reduced motion.
Standard aspect ratios for architectural photography and video. The media primitive supports Astro image optimization, responsive sizes, object-position control, loading behavior, captions, and disclaimers.
Calm, architectural, deliberate. Four timing tiers from micro to cinematic. Primary easing: cubic-bezier(0.22, 1, 0.36, 1). Reduced motion simplifies movement without destroying functionality.
This element fades in and translates upward using CSS animation.
WCAG 2.2 AA. Semantic HTML, logical heading hierarchy, keyboard accessibility, visible focus states, sufficient contrast, and reduced-motion support are foundational.
2px Coral outline with 3px offset on all interactive elements.
Approved: Ink on Cream, Ink on White, Ink Soft on Cream/White, Cream/Gold/Blue on Ink.
Restricted (large text): Coral on Cream/White.
Decorative only: Gold and Blue on light backgrounds.
All interactive elements reachable via keyboard. 44x44 minimum targets.
Skip-to-content link is first focusable element. No hover-only functionality.
Reduced motion simplifies movement while preserving state changes and functionality.
Digital Design System v1