406 lines
17 KiB
HTML
406 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#F4EDE3">
|
||
<meta
|
||
name="description"
|
||
content="Noel Design Atelier creates bespoke seasonal environments composed for exceptional architecture."
|
||
>
|
||
<title>Noel Design Atelier — Composing the Season</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
|
||
rel="stylesheet"
|
||
>
|
||
<link rel="stylesheet" href="styles.css?version=philosophy-layout-and-image-border-fix">
|
||
</head>
|
||
|
||
<body id="top">
|
||
<a class="skip-to-main-content-link" href="#main-content">Skip to main content</a>
|
||
|
||
<header class="website-header">
|
||
<div class="site-width-boundary website-header-inner">
|
||
<a class="brand-wordmark-link" href="#top" aria-label="Noel Design Atelier, back to top">
|
||
<span class="brand-wordmark-primary-line">Noel</span>
|
||
<span class="brand-wordmark-secondary-line">Design Atelier</span>
|
||
</a>
|
||
|
||
<nav class="primary-navigation" aria-label="Primary navigation">
|
||
<ul class="primary-navigation-list">
|
||
<li><a class="primary-navigation-link" href="#work">Work</a></li>
|
||
<li><a class="primary-navigation-link" href="#philosophy">Philosophy</a></li>
|
||
<li><a class="primary-navigation-link" href="#approach">Approach</a></li>
|
||
<li><a class="primary-navigation-link" href="#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main-content">
|
||
<section
|
||
class="site-width-boundary homepage-hero-section image-overlap-heading-dynamic-inversion-container"
|
||
aria-labelledby="homepage-hero-title"
|
||
>
|
||
<p class="section-context-label">Seasonal environment design <span aria-hidden="true">/</span> Pacific Northwest</p>
|
||
|
||
<h1
|
||
class="homepage-hero-title image-overlap-heading-dynamic-inversion"
|
||
id="homepage-hero-title"
|
||
>
|
||
<span>Composing</span>
|
||
<span>the season.</span>
|
||
</h1>
|
||
|
||
<div class="homepage-hero-introduction">
|
||
<span class="brand-occasion-mark" aria-hidden="true">✦</span>
|
||
<p>
|
||
Luxury seasonal environments for hospitality, automotive brands, private estates,
|
||
and remarkable places.
|
||
</p>
|
||
<a class="editorial-text-link" href="#philosophy">
|
||
Discover our world <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<figure class="homepage-hero-image-figure">
|
||
<div
|
||
class="photography-placeholder photography-placeholder-tall"
|
||
role="img"
|
||
aria-label="Grand hotel entrance dressed with architectural garlands, Christmas trees, and candlelit lanterns"
|
||
>
|
||
<span>Grand hotel entrance with architectural garlands and candlelight</span>
|
||
</div>
|
||
</figure>
|
||
</section>
|
||
|
||
<section class="editorial-section philosophy-section" id="philosophy" aria-labelledby="philosophy-title">
|
||
<div class="site-width-boundary">
|
||
<header class="numbered-section-heading">
|
||
<span class="numbered-section-index" aria-hidden="true">01</span>
|
||
<span class="numbered-section-rule" aria-hidden="true"></span>
|
||
<p>Philosophy</p>
|
||
</header>
|
||
|
||
<div class="philosophy-content-grid">
|
||
<figure class="philosophy-image-figure">
|
||
<div
|
||
class="photography-placeholder photography-placeholder-portrait"
|
||
role="img"
|
||
aria-label="A sweeping architectural staircase wrapped in cedar garland and velvet ribbon"
|
||
>
|
||
<span>Architectural staircase with cedar garland and velvet ribbon</span>
|
||
</div>
|
||
</figure>
|
||
|
||
<h2 class="editorial-statement-title" id="philosophy-title">
|
||
Architecture is the canvas.
|
||
<span>The season is the masterpiece.</span>
|
||
</h2>
|
||
|
||
<div class="philosophy-supporting-copy">
|
||
<p class="philosophy-brand-thesis">
|
||
We don’t decorate for the holidays. We compose the season.
|
||
</p>
|
||
<p>
|
||
Noel Design Atelier creates bespoke holiday installations that feel as though
|
||
they were always meant to belong. Every garland follows the architecture. Every
|
||
ribbon serves a purpose. Every light contributes to atmosphere.
|
||
</p>
|
||
<p>
|
||
The most memorable seasonal environments do not compete with the room. They
|
||
complete it. True luxury is not louder. It is more thoughtful.
|
||
</p>
|
||
<a class="editorial-text-link" href="#approach">
|
||
Our approach <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="editorial-section approach-section" id="approach" aria-labelledby="approach-title">
|
||
<div class="site-width-boundary">
|
||
<header class="numbered-section-heading">
|
||
<span class="numbered-section-index" aria-hidden="true">02</span>
|
||
<span class="numbered-section-rule" aria-hidden="true"></span>
|
||
<p>Approach</p>
|
||
</header>
|
||
|
||
<h2 class="oversized-editorial-title" id="approach-title">Tradition.</h2>
|
||
|
||
<div class="approach-content-grid">
|
||
<div class="approach-supporting-copy">
|
||
<p>
|
||
Every element is rooted in craftsmanship, heritage, and the natural beauty of
|
||
the season.
|
||
</p>
|
||
<p>
|
||
Fresh cedar, antique brass, hand-tied velvet, and glass catching candlelight are
|
||
chosen and placed with intention.
|
||
</p>
|
||
<a class="editorial-text-link" href="#work">
|
||
Explore our work <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<figure class="approach-image-figure">
|
||
<div
|
||
class="photography-placeholder photography-placeholder-landscape"
|
||
role="img"
|
||
aria-label="Artisan arranging ribbon, cedar, brass ornaments, and seasonal materials on a worktable"
|
||
>
|
||
<span>Artisan worktable with ribbon, cedar, and brass ornaments</span>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="approach-principles-grid" aria-label="Noel Design Atelier brand principles">
|
||
<article class="approach-principle">
|
||
<span class="approach-principle-index" aria-hidden="true">I.</span>
|
||
<h3>Curated</h3>
|
||
<p>
|
||
Every installation is intentionally composed. Nothing feels accidental. Nothing
|
||
feels excessive.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="approach-principle">
|
||
<span class="approach-principle-index" aria-hidden="true">II.</span>
|
||
<h3>Crafted</h3>
|
||
<p>
|
||
Natural materials. Artisan techniques. Meticulous execution. Luxury reveals
|
||
itself through detail.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="approach-principle">
|
||
<span class="approach-principle-index" aria-hidden="true">III.</span>
|
||
<h3>Remembered</h3>
|
||
<p>
|
||
Decorations come down. The feeling remains. Great seasonal design becomes part
|
||
of the space’s story.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="editorial-section work-section" id="work" aria-labelledby="work-title">
|
||
<div class="site-width-boundary">
|
||
<header class="numbered-section-heading numbered-section-heading-on-dark">
|
||
<span class="numbered-section-index" aria-hidden="true">03</span>
|
||
<span class="numbered-section-rule" aria-hidden="true"></span>
|
||
<p>Selected work</p>
|
||
</header>
|
||
|
||
<div class="work-heading-grid">
|
||
<h2 class="oversized-editorial-title" id="work-title">Wonder.</h2>
|
||
<p class="work-introduction-copy">
|
||
Every installation tells the story of the season. Noel composes more than visual
|
||
beauty: environments that awaken emotion, inspire connection, and leave a lasting
|
||
impression.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="work-gallery-grid" aria-label="Selected project image placeholders">
|
||
<figure class="work-gallery-primary-figure">
|
||
<div
|
||
class="photography-placeholder photography-placeholder-wide"
|
||
role="img"
|
||
aria-label="A monumental Christmas tree in a grand room illuminated with warm lights"
|
||
>
|
||
<span>Monumental Christmas tree in a grand room</span>
|
||
</div>
|
||
<figcaption>
|
||
<span class="work-project-category">Luxury hospitality</span>
|
||
<span class="work-project-description">
|
||
A monumental focal point designed to stop guests in their tracks through
|
||
beauty, not scale alone.
|
||
</span>
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<figure class="work-gallery-secondary-figure">
|
||
<div
|
||
class="photography-placeholder photography-placeholder-portrait"
|
||
role="img"
|
||
aria-label="A candlelit holiday table arranged for an intimate seasonal gathering"
|
||
>
|
||
<span>Candlelit table composed for a seasonal gathering</span>
|
||
</div>
|
||
<figcaption>
|
||
<span class="work-project-category">Private estates</span>
|
||
<span class="work-project-description">
|
||
Warmth and gathering composed around the traditions a family returns to year
|
||
after year.
|
||
</span>
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<figure class="work-gallery-detail-figure">
|
||
<div
|
||
class="photography-placeholder photography-placeholder-square"
|
||
role="img"
|
||
aria-label="Close detail of hand-tied velvet ribbon and an antique brass ornament"
|
||
>
|
||
<span>Velvet ribbon and antique brass detail</span>
|
||
</div>
|
||
<figcaption>
|
||
<span class="work-project-category">Material and detail</span>
|
||
<span class="work-project-description">
|
||
Hand-tied velvet, antique brass, and reflected light; luxury found in what
|
||
people almost miss.
|
||
</span>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="editorial-section client-fit-section" id="places" aria-labelledby="client-fit-title">
|
||
<div class="site-width-boundary">
|
||
<div class="client-fit-content-grid">
|
||
<div class="client-fit-heading-content">
|
||
<p class="section-context-label section-context-label-brass">Who we design for</p>
|
||
<h2 class="client-fit-title" id="client-fit-title">Designed for remarkable places.</h2>
|
||
<p class="client-fit-positioning-copy">
|
||
Noel Design Atelier exists where luxury hospitality, timeless craftsmanship,
|
||
and seasonal storytelling become one experience.
|
||
</p>
|
||
<a class="editorial-text-link editorial-text-link-light" href="#contact">
|
||
Start a conversation <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<figure class="client-fit-image-figure">
|
||
<div
|
||
class="photography-placeholder photography-placeholder-landscape"
|
||
role="img"
|
||
aria-label="Grand doorway framed with fresh cedar and warm lights"
|
||
>
|
||
<span>Grand doorway framed with fresh cedar and warm light</span>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="client-fit-category-grid" aria-label="Client and environment categories">
|
||
<article class="client-fit-category">
|
||
<h3>Luxury hospitality</h3>
|
||
<p>
|
||
Hotels, destination properties, and gathering spaces shaped by arrival and
|
||
atmosphere.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="client-fit-category">
|
||
<h3>Automotive and flagship retail</h3>
|
||
<p>
|
||
Branded environments where seasonal design must complement identity and
|
||
architecture.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="client-fit-category">
|
||
<h3>Private estates</h3>
|
||
<p>
|
||
Personal compositions created for family traditions, celebration, and memory.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="client-fit-category">
|
||
<h3>Select events</h3>
|
||
<p>
|
||
Seasonal settings designed to welcome, gather, and be remembered.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="editorial-section contact-section" id="contact" aria-labelledby="contact-title">
|
||
<div class="site-width-boundary contact-content-grid">
|
||
<div class="contact-heading-content">
|
||
<p class="section-context-label">Inquire</p>
|
||
<h2 class="contact-title" id="contact-title">Let’s compose your season.</h2>
|
||
<p>
|
||
Tell us about the property, the people who will experience it, and the feeling
|
||
you want them to remember.
|
||
</p>
|
||
</div>
|
||
|
||
<form class="project-inquiry-form" action="#contact-confirmation" method="get">
|
||
<p class="contact-form-disclosure" id="contact-form-disclosure">
|
||
Concept preview only. No information entered here is transmitted or stored.
|
||
</p>
|
||
|
||
<div class="project-inquiry-field-grid">
|
||
<div class="project-inquiry-field-group">
|
||
<label for="inquiry-name">Name</label>
|
||
<input id="inquiry-name" type="text" autocomplete="name" required>
|
||
</div>
|
||
|
||
<div class="project-inquiry-field-group">
|
||
<label for="inquiry-email">Email</label>
|
||
<input id="inquiry-email" type="email" autocomplete="email" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-inquiry-field-group">
|
||
<label for="inquiry-organization">Property or organization</label>
|
||
<input id="inquiry-organization" type="text" autocomplete="organization" required>
|
||
</div>
|
||
|
||
<div class="project-inquiry-field-group">
|
||
<label for="inquiry-project-brief">Project brief</label>
|
||
<textarea id="inquiry-project-brief" rows="5" required></textarea>
|
||
</div>
|
||
|
||
<button class="project-inquiry-submit-button" type="submit" aria-describedby="contact-form-disclosure">
|
||
Preview inquiry <span aria-hidden="true">→</span>
|
||
</button>
|
||
|
||
<p class="contact-form-confirmation" id="contact-confirmation" tabindex="-1">
|
||
Your concept inquiry is ready. A live site would securely deliver it to the atelier.
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="website-footer">
|
||
<div class="site-width-boundary website-footer-grid">
|
||
<div class="website-footer-brand-column">
|
||
<a class="brand-wordmark-link brand-wordmark-link-light" href="#top" aria-label="Noel Design Atelier, back to top">
|
||
<span class="brand-wordmark-primary-line">Noel</span>
|
||
<span class="brand-wordmark-secondary-line">Design Atelier</span>
|
||
</a>
|
||
<p>Seasonal environments composed with intention.</p>
|
||
</div>
|
||
|
||
<nav class="website-footer-navigation" aria-label="Footer navigation">
|
||
<p class="website-footer-column-title">Navigation</p>
|
||
<ul>
|
||
<li><a href="#work">Work</a></li>
|
||
<li><a href="#philosophy">Philosophy</a></li>
|
||
<li><a href="#approach">Approach</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="website-footer-contact-column">
|
||
<p class="website-footer-column-title">Pacific Northwest</p>
|
||
<p>For remarkable places and the people who gather there.</p>
|
||
<a class="editorial-text-link editorial-text-link-light" href="#contact">
|
||
Start a conversation <span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<p class="website-footer-copyright">© 2026 Noel Design Atelier</p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|