Ombelle Fort Lauderdale
Internal Reference — Version 1

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.

01Color
Cream
#FAF5F1 · Primary background
Coral
#C9684A
Blue
#B7D4DF
Gold
#CEAE74
Functional Neutrals
Ink
#171614
Ink Soft
#55514D
Neutral Border
rgba(23,22,20,.18)
Neutral Border Light
rgba(23,22,20,.10)
Contrast Reference

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.

Ink on Cream12.6:1 — approved
Ink on White15.5:1 — approved
Ink Soft on Cream5.9:1 — approved
Cream on Ink12.6:1 — approved
Gold on Ink5.6:1 — approved
Blue on Ink7.8:1 — approved
Coral on Cream3.4:1 — restricted
Gold on Cream2.1:1 — decorative
Blue on Cream1.4:1 — decorative
02Typography

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.

Ombelle
Display XL--text-display-xlclamp(3.5rem, 7vw, 7rem)lh 0.95tr 0.005em
Fort Lauderdale
Display--text-displayclamp(2.75rem, 5vw, 5rem)lh 0.96tr 0.01em
A Statement of Beauty
H1--text-h1clamp(2.25rem, 4vw, 4rem)lh 1.0tr 0.005em
Urban Sanctuary
H2--text-h2clamp(1.875rem, 3vw, 3.25rem)lh 1.02tr 0em
Residences
H3--text-h3clamp(1.5rem, 2.5vw, 2.25rem)lh 1.08tr 0em
Amenities
H4--text-h4clamp(1.25rem, 1.5vw, 1.625rem)lh 1.2tr 0em
An architectural masterpiece, Ombelle redefines the downtown skyline.
Lead--text-leadclamp(1.0625rem, 1.25vw, 1.25rem)lh 1.55tr 0em
Fully finished and furnished condominiums in the heart of downtown.
Body Large--text-body-lg17pxlh 1.65tr 0em
With its 100,000 SF of amenities, Ombelle creates a downtown resort.
Body--text-body16pxlh 1.65tr 0em
Developed and designed by an industry-leading visionary team.
Body Small--text-body-sm14pxlh 1.55tr 0.005em
Explore Ombelle
Eyebrow--text-eyebrow12pxlh 1.4tr 0.14em
Artist Conceptual Rendering
Caption--text-caption12pxlh 1.4tr 0.03em
03Grid & Containers

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.

1
2
3
4
5
6
7
8
9
10
11
12
--container-standard: 1440px
--container-wide: 1600px
--container-reading: 720px
Mobile
20px
Tablet
32px
Desktop
48px
Large
64px
XL
80px
04Spacing

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.

--spacing-14px
--spacing-28px
--spacing-312px
--spacing-416px
--spacing-624px
--spacing-832px
--spacing-1040px
--spacing-1248px
--spacing-1664px
--spacing-2080px
--spacing-2496px
--spacing-30120px
--spacing-40160px
--spacing-50200px
--spacing-60240px
Compact: 80pxStandard: 120pxLarge: 160pxEditorial: 200px
05Actions

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.

Buttons
Icon Button
06Brand
Ombelle Fort Lauderdale
Ombelle Fort Lauderdale
Icon Solid — Black
Ombelle Fort Lauderdale
Minimum digital width: 90px

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.

O Device
Ombelle O device
Ombelle O device

The O represents the two residential towers. Use sparingly with visual significance — image framing, masking, editorial transitions, large standalone brand moments.

Brand Graphics

Organic lines — awaiting official asset

Geometric pattern — awaiting official asset

Botanical shadow — awaiting official asset

07Media

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.

Cinematic — 16 / 9
Editorial Landscape — 4 / 3
Portrait — 3 / 4
Architectural Portrait — 2 / 3
Square — 1 / 1
Artist Conceptual Rendering
Ombelle Fort Lauderdale — Sky Deck
08Motion

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.

Micro --duration-micro180ms — Hover, focus
UI --duration-ui350ms — State transitions
Editorial --duration-editorial800ms — Scroll reveals
Cinematic --duration-cinematic1300ms — Hero transitions
--ease-primaryPrimary
--ease-outDecelerating
--ease-in-outSymmetric
Subtle Reveal

This element fades in and translates upward using CSS animation.

Text Link Interaction
Media Hover
09Accessibility

WCAG 2.2 AA. Semantic HTML, logical heading hierarchy, keyboard accessibility, visible focus states, sufficient contrast, and reduced-motion support are foundational.

Focus-Visible

2px Coral outline with 3px offset on all interactive elements.

Contrast

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.

Keyboard & Reduced Motion

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.

Ombelle Fort Lauderdale

Digital Design System v1