NOYA - Intelligent Property Advisory

01Colour

Architecture and photography carry the visual richness. The interface stays neutral so images never compete with chrome. One accent, used for intelligence and decision points only.

Surfaces

Warm white

--paper #FAF8F5

Off white

--paper-2 #F3EFE9

Soft stone

--stone #E6E0D6

Muted sand

--sand #D9D0C1

Graphite

--graphite #55534E

Charcoal

--charcoal #1A1A19

Ink

--ink #0C0D0C

Accent & data

Clay — the accent

--accent #A9552B

Clay soft

--accent-soft #C9865E

Jade — positive

--jade #4C6F63

Amber — caution

--amber #9A7B33

Accent discipline Clay appears on: the NOYA orb, one primary action per view, match-score emphasis, the winning comparison column, and the active map isochrone. It never appears as a background fill larger than a button, never as a gradient across a section, and never on more than one element in a viewport at rest. Jade and amber are data semantics only — never decoration.

02Typography

One family. Hierarchy comes almost entirely from scale and space, not weight. Numerals are tabular everywhere so prices and scores never reflow while animating.

Display · clamp(44px, 7.4vw, 112px) · −0.038em

Find the property

H1 · clamp(34px, 4.6vw, 72px)

Property search should start with you

H2 · clamp(27px, 3vw, 48px)

Make trade-offs visible

H3 · clamp(21px, 2vw, 32px)

Solana East · New Cairo

Body large · clamp(17px, 1.25vw, 20px)

NOYA understands what you're looking for, analyses the market and compares opportunities.

Body · 16px

Delivery is Q3 2028 — eight months later than the timeline you preferred.

Meta · 11.5px · 0.16em · uppercase

NOYA match

03Tokens

Spacing

Token	Value	Use
`--s-2`	8px	Chip gaps
`--s-4`	16px	Inside components
`--s-6`	32px	Component padding
`--s-8`	64px	Between blocks
`--s-10`	128px	Between sections
`--s-12`	240px	Cinematic breathing room

Radius — restrained

Token	Value	Use
`--r-xs`	2px	Focus rings
`--r-sm`	4px	Signals, tags
`--r-md`	8px	Media, tiles
`--r-lg`	14px	Panels only
`--r-pill`	999px	Buttons, NOYA field

Tables, timelines, comparison rows and the tree diagram have no radius at all. Not everything is a rounded rectangle.

Elevation

Token	Use
`--e-1`	Resting panels
`--e-2`	NOYA field, hover reveal
`--e-3`	Floating workspace panels
`--e-i`	On dark scenes

All shadows are warm-tinted (26,26,25) rather than pure black, and paired: one tight, one diffuse.

Breakpoints & grid

Width	Behaviour
≥ 1180px	12 columns · max 1520px · full parallax
860–1180px	12 columns · reduced depth · no horizontal sequences
< 860px	6 columns · vertical motion only · nav collapses

Editorial imagery is allowed to break the container; text never is.

04AI components

NOYA field · default

NOYA field · on dark

Orb states

Idle Listening Thinking Analysing Found

Suggestions

Preference signals

Quiet environment≤ 25 min commute 3+ bedrooms

Loading — never a spinner

Understanding your priorities…

Conversation turn

NOYA

This fits most of what you asked for. There is one trade-off worth knowing.

Profile row · updating

Budget

EGP 8M – 11Minferred from "around 2 million down"

05Property components

Property card · rest & hover

94Match

Why

Strong on commute and payment plan. Delivery is the soft point.

Best match for your lifestyle

Solana East

New Cairo

EGP 9.8M→

Hover: image scales 1.03 over 900ms, title shifts 3px, reasoning panel rises 10px into place. No rotation, no 3D tilt.

Payment timeline

202620272028Delivery2034

Match & reasoning

94NOYA match

✓18 minutes from your office
✓8-year payment plan
△Delivery eight months later than preferred

06Intelligence & trust

Compatibility map

Location100

Budget96

Delivery84

Data provenance

Verified data Developer-provided Market estimate NOYA analysis Projection

Five levels, always visible next to the number they describe. A projection is never rendered in the same style as a verified fact.

Confidence

Concern / trade-off

One trade-off worth knowing

Delivery is eight months later than your preferred timeline.

07States

Buttons

Segmented · Live / Invest

Save microinteraction

♡ → 1.35 → 0.94 → 1.0 over 420ms on a 1.56 overshoot curve, then fills to clay.

Empty state

Your shortlist starts with a conversation.

08Motion

Every animation must serve orientation, continuity, focus, intelligence or emotion. If it serves none of those, it is removed.

Class	Duration	Easing	Applies to
Microinteraction	120–220ms	`cubic-bezier(.22,.61,.36,1)`	Buttons, chips, hover, focus
UI transition	250–450ms	`cubic-bezier(.16,1,.3,1)`	Panels, sheets, re-sorts, FLIP
Scene transition	600–1200ms	`cubic-bezier(.16,1,.3,1)`	Mask reveals, page transitions, counters
Atmospheric	4–15s	`cubic-bezier(.65,0,.35,1)`	Orb drift, background depth, light

Animated properties only

transform · opacity · clip-path · filter(blur) · width on 1–3px rules. Never height, top/left, margin, or box-shadow spread on scroll.

Bounce policy

Overshoot is permitted on exactly one interaction — saving a property. Everything else settles without rebound.

Scroll-jacking policy

One horizontal sequence exists in the entire product: the development masterplan. It occupies exactly one viewport and releases at 100% progress.

Reduced motion

All durations collapse to 1ms, parallax transforms are neutralised, the orb becomes static, and every revealed element renders in its final state. No content is lost.

09Accessibility

Contrast

Body text on warm white is 13.9:1. The lightest text used (tertiary, 11.5px meta) is 4.6:1. Text over architectural imagery always sits on a grade overlay ensuring ≥ 4.5:1 at the text's position, never on the raw image.

Focus

2px clay outline at 3px offset on every interactive element, including inside dark scenes where it inverts to remain visible.

Conversation

The thread is role="log" with aria-live="polite". Typing animation does not re-announce — the completed turn is announced once. Signals are announced as they attach.

Touch

Minimum 44px on all targets; the mobile NOYA field is 54px and never overlapped by the tab bar.

Structure

One h1 per screen, sections labelled, decorative architecture marked aria-hidden. The match score is exposed as text, never as a bar alone.

Keyboard

Card reasoning reveals on :focus-within as well as hover, so keyboard users see the same explanation.

The NOYA component system.