Noirline — Creative Digital Studio Website

Create a complete, production-quality, visually exceptional creative digital studio website called Noirline using only vanilla HTML, CSS, and JavaScript.

The finished website must look like a real independent design studio created by an experienced art director and frontend developer.

This is NOT a generic agency template.

The website should communicate:

• Creative confidence
• Strong visual taste
• Strategic thinking
• Modern design
• Professional craft
• Editorial sophistication
• Digital expertise

Avoid generic startup cards, excessive gradients, glowing UI, cliché agency language, repetitive section layouts, and overdone animations.

The final result should be convincing enough that a real creative agency could replace the placeholder content and use it professionally.

---

1. REQUIRED FILES

Create exactly:

• index.html
• style.css
• script.js

Keep all HTML in index.html.

Keep all CSS in style.css.

Keep all JavaScript in script.js.

Correctly link the files.

The website must work immediately when the three files are placed in the same directory.

No installation, package manager, build tools, or development server should be required.

---

2. TECHNOLOGY RESTRICTIONS

Use ONLY:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Nuxt
• Tailwind CSS
• Bootstrap
• jQuery
• GSAP
• npm
• Node packages
• external JavaScript libraries
• backend code
• databases
• build tools

Use inline SVG icons where useful.

This must remain a true static website.

---

3. BRAND IDENTITY

Brand:

NOIRLINE

Tagline:

Ideas with shape. Digital with purpose.

Noirline is a fictional creative studio specializing in:

• Brand identity
• Websites
• Digital products
• Campaign design
• Creative direction

The brand should feel:

• Bold
• Intelligent
• Minimal
• Experimental
• Professional
• Contemporary

Avoid making it feel like a tech SaaS company.

Avoid making it feel overly luxurious or fashion-oriented.

---

4. VISUAL DIRECTION

Create a strong editorial design system.

Suggested palette:

• Near black
• Soft white
• Warm gray
• Muted stone
• One bold accent color used sparingly

Use alternating dark and light sections for contrast.

Prioritize:

• Typography
• Composition
• Large project imagery
• Negative space
• Grid structure
• Strong art direction

Avoid:

• Glassmorphism
• Excessive rounded cards
• Random blob gradients
• Too many shadows
• Repetitive boxes

---

5. TYPOGRAPHY

Typography is central to the design.

Use:

• Large editorial display headings
• Tight but readable heading spacing
• Clean sans-serif body text
• Small uppercase labels
• Strong numeric typography

Use clamp() for responsive type.

Some section titles can break across lines intentionally.

Keep mobile typography controlled and readable.

---

6. NAVIGATION

Create a minimal sticky navigation.

Include:

• NOIRLINE logo
• Work
• Services
• Studio
• Process
• Journal
• Contact

Add a distinct CTA:

Start a Project

On scroll, shift the navigation into a compact elevated state.

Keep animation restrained.

---

7. MOBILE NAVIGATION

Create a full-screen or large-panel mobile menu.

Include:

• Main links
• Start a Project CTA
• Email placeholder
• Social links

Requirements:

• Accessible hamburger
• Escape closes menu
• Link selection closes menu
• Body scroll lock
• Large touch targets
• Smooth transition

---

8. HERO SECTION

Create a bold editorial hero.

Do NOT use a centered SaaS headline.

Use a large typographic composition.

Small label:

INDEPENDENT CREATIVE STUDIO

Main headline:

We build brands and digital experiences people remember.

Supporting text:

“Noirline partners with ambitious teams to create identity, websites, and digital products with clarity and character.”

Primary CTA:

View Selected Work

Secondary CTA:

Start a Project

Add a large image or abstract project composition on one side or beneath the text.

Use strong layout asymmetry.

---

9. HERO DETAIL

Add a small information strip:

Branding · Web Design · Digital Products · Creative Direction

Add a subtle scroll indicator.

Do not clutter the hero with badges or statistics.

---

10. INTRO STATEMENT

Create a minimal typography-led section.

Large statement:

Good design is not decoration. It is how ideas become clear, useful, and recognizable.

Keep this section mostly text and whitespace.

---

11. SELECTED WORK

Create the most important section:

Selected Work

Show 6 fictional projects.

Examples:

Arclight

Brand Identity · Website

A technology brand repositioned around clarity and trust.

Noma House

Hospitality · Digital Experience

A boutique hotel identity and booking experience.

Forma

Product Design · Platform

A workspace tool redesigned for focus and speed.

Kanso

Retail · E-Commerce

A modern lifestyle brand with a refined online storefront.

Northline

Architecture · Brand System

Identity and digital presence for an architecture studio.

Current

Culture · Campaign

A digital campaign for a contemporary arts program.

Each project should include:

• Large image
• Project name
• Category
• Year
• Short result statement
• View Case Study CTA

Do not make every project card identical.

Use a varied editorial layout.

---

12. PROJECT HOVER INTERACTION

On desktop, add subtle effects:

• Image scale
• Cursor-follow label or simple directional movement
• Title shift
• Overlay detail

Keep performance smooth.

On touch devices, all information must remain accessible without hover.

---

13. PROJECT FILTERING

Create filters:

• All
• Branding
• Digital
• Product
• Campaign

Implement with vanilla JavaScript.

Use smooth but fast transitions.

---

14. FEATURED CASE STUDY

Create a large case-study section for one project:

Arclight

Include:

• Large hero image
• Client
• Industry
• Scope
• Year
• Challenge
• Approach
• Outcome
• Secondary project images

Use an editorial layout.

Do not create a fake full multi-page case study; keep it as a strong homepage preview.

---

15. SERVICES

Create:

What We Do

Services:

Brand Strategy

Positioning, messaging, naming, and direction.

Visual Identity

Logo systems, typography, color, and brand language.

Web Design

Responsive websites built around content and user goals.

Digital Products

Interfaces and systems for web-based products.

Creative Direction

Campaigns, visual storytelling, and launch systems.

Do not present these as five colorful cards.

Use a refined numbered list or large rows.

---

16. SERVICE INTERACTIONS

On hover/focus, reveal:

• Short detail
• Deliverables
• Relevant project reference

Keep mobile experience simple and readable.

---

17. PROCESS

Create:

How We Work

Steps:

01 — Understand

Clarify the challenge, audience, and goals.

02 — Define

Shape strategy, structure, and direction.

03 — Create

Develop identity, interface, and visual systems.

04 — Refine

Test, iterate, and sharpen details.

05 — Launch

Prepare assets and support rollout.

Use a connected layout on desktop.

Stack naturally on mobile.

---

18. STUDIO SECTION

Create:

The Studio

Heading:

Small team. Senior attention.

Write realistic copy describing Noirline as an independent studio working directly with founders, teams, and organizations.

Mention:

• Direct collaboration
• Small project load
• Senior-level involvement
• Clear communication
• Focused partnerships

Avoid cliché “we are passionate storytellers” language.

---

19. TEAM

Create 4 fictional team profiles.

Examples:

Mara Venn Creative Director

Eli Park Design Director

Jonas Hale Digital Designer

Lina Moore Strategy Lead

Each profile should include:

• Portrait
• Name
• Role
• Short specialty
• Social link placeholder

Use large editorial portraits.

Avoid generic corporate cards.

---

20. CLIENT LIST

Create:

Selected Clients

Display fictional client names as typographic marks.

Examples:

• Arclight
• Forma
• Northline
• Kanso
• Current
• Noma House
• Merrow
• Tera Labs

Use a clean grid or scrolling row.

Do not imply real clients.

---

21. STUDIO STATISTICS

Add a restrained stats section.

Example placeholder values:

42 Projects completed

8 Countries collaborated with

6 Years independent

12 Active partnerships

Keep it minimal.

Animate numbers gently on scroll.

---

22. TESTIMONIALS

Create 3 fictional client testimonials.

Keep them concise and believable.

Example:

“Noirline helped us simplify a complicated story into a brand that finally felt clear.”

— Founder, Arclight

Create an accessible vanilla JavaScript slider.

---

23. JOURNAL

Create:

Studio Notes

Add 3 editorial articles.

Examples:

Why Simpler Brands Often Work Harder

Brand Strategy

Designing for Attention Without Noise

Digital Design

When a Website Needs Less, Not More

Perspective

Each includes:

• Image
• Category
• Date
• Title
• Short excerpt
• Read Note link

---

24. PROJECT INQUIRY SECTION

Create a strong closing section.

Heading:

Have something worth building?

Supporting text:

“Tell us what you’re working on, where you are, and what needs to change.”

Create a frontend-only inquiry form.

Fields:

• Name
• Email
• Company
• Project Type
• Estimated Budget
• Desired Timeline
• Project Description

Project types:

• Brand Identity
• Website
• Digital Product
• Campaign
• Other

Budget options:

• Under $5K
• $5K–$10K
• $10K–$25K
• $25K+
• Not Sure

Use clearly demo values.

Validate with JavaScript.

After valid submission show:

“Your project details are ready. This demonstration form is not connected to a live inquiry system.”

Do not pretend the message was actually sent.

---

25. CONTACT DETAILS

Include:

• Email placeholder
• Location: Phnom Penh / Remote
• Availability
• Instagram
• LinkedIn
• Behance-style portfolio placeholder

Keep it visually minimal.

---

26. FOOTER

Create a bold editorial footer.

Include:

NOIRLINE

Tagline:

Ideas with shape. Digital with purpose.

Navigation:

• Work
• Services
• Studio
• Journal
• Contact

Social:

• Instagram
• LinkedIn
• Behance

Add a large closing word or phrase:

MAKE SOMETHING CLEAR.

Generate current year with JavaScript.

Add back-to-top control.

---

27. JAVASCRIPT FUNCTIONALITY

Implement:

• Mobile navigation
• Scrolled navigation state
• Active section tracking
• Smooth scrolling
• Project filtering
• Project hover enhancement where appropriate
• Animated statistics
• Testimonial slider
• Inquiry form validation
• Scroll reveal
• Back-to-top
• Dynamic year

Use IntersectionObserver where appropriate.

Keep interactions fast and lightweight.

---

28. IMAGE DIRECTION

Use high-quality remote placeholder imagery appropriate for:

• Branding projects
• Websites
• Editorial layouts
• Packaging
• Architecture
• Creative campaigns
• Digital products

Maintain a consistent art-directed feel.

Avoid random generic office photos.

Use meaningful alt text.

Lazy-load below-the-fold images.

Maintain stable aspect ratios.

---

29. MOTION DIRECTION

Use refined editorial motion.

Appropriate effects:

• Image reveal
• Typography fade
• Subtle section entrance
• Project hover transitions
• Smooth filter transitions

Avoid:

• Bounce
• Spin
• Particle effects
• Heavy parallax
• Constant animation
• Overly dramatic cursor effects

Respect prefers-reduced-motion.

---

30. RESPONSIVE DESIGN

Design intentionally for:

• 320px mobile
• 375px mobile
• 430px mobile
• Tablet
• Laptop
• Desktop
• Large desktop

On mobile:

• Keep typography strong but controlled
• Stack project layouts
• Preserve image quality
• Simplify asymmetrical overlaps
• Make navigation easy
• Keep forms touch-friendly
• Avoid horizontal overflow

Do not merely shrink the desktop layout.

---

31. ACCESSIBILITY

Use semantic HTML5.

Ensure:

• One H1
• Logical heading hierarchy
• Alt text
• Accessible mobile menu
• Keyboard-accessible filters
• Visible focus states
• Proper form labels
• Good contrast
• Accessible testimonial controls
• Correct button semantics

Use ARIA only where needed.

---

32. SEO

Create professional creative-agency SEO metadata.

Include:

• Page title
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card
• Theme color

Add Organization structured data using JSON-LD with fictional/sample company values.

Do not invent awards, certifications, or real client relationships.

---

33. PERFORMANCE

Keep the site lightweight.

Requirements:

• No framework
• No external JavaScript libraries
• No background video
• Lazy-load images
• Efficient animations
• Stable image containers
• Minimal layout shift
• No unnecessary event listeners
• No heavy animation loops

---

34. CSS QUALITY

Organize CSS:

1. Variables
2. Reset
3. Base
4. Typography
5. Layout
6. Navigation
7. Hero
8. Work
9. Case study
10. Services
11. Process
12. Studio
13. Team
14. Journal
15. Forms
16. Footer
17. Animations
18. Responsive
19. Reduced motion

Use:

• CSS variables
• Grid
• Flexbox
• clamp()
• aspect-ratio
• Modern responsive CSS

Avoid excessive !important.

---

35. JAVASCRIPT QUALITY

Write clean vanilla JavaScript.

Requirements:

• Clear function names
• Reusable helpers
• Missing-element guards
• Minimal global state
• No console errors
• No fake backend calls
• No unnecessary complexity

Essential content should still be visible if JavaScript fails.

---

36. CONTENT QUALITY

Do not use Lorem Ipsum.

Write believable creative-studio content specifically for Noirline.

Avoid cliché agency phrases such as:

• We tell stories that matter
• We create unforgettable experiences
• We are passionate creatives
• We push boundaries
• We disrupt industries

Use concise, specific, professional language.

---

37. VISUAL RHYTHM

Do NOT build the page as repeated grids.

Use a sequence like:

Bold hero

→ Statement

→ Large project

→ Project grid

→ Featured case study

→ Services list

→ Process

→ Studio story

→ Team

→ Testimonials

→ Journal

→ Inquiry

→ Footer

The page should feel art-directed rather than templated.

---

38. FINAL QUALITY CHECK

Before returning code, verify:

• All three files connect
• Mobile navigation works
• Project filters work
• Project interactions work
• Testimonial slider works
• Inquiry validation works
• Stats animate correctly
• All navigation anchors exist
• No undefined variables
• No console errors
• No horizontal overflow
• Mobile layout is intentional
• Images have alt text
• Forms have labels
• Keyboard interactions work
• Reduced-motion support works
• No prohibited dependencies are included

Fix all identified issues before returning the final code.

---

39. FINAL OUTPUT FORMAT

Return exactly three complete code sections:

index.html

Provide the complete HTML.

style.css

Provide the complete CSS.

script.js

Provide the complete JavaScript.

Do NOT use:

“remaining code”

“continue here”

“same pattern”

“add more projects”

Do not return pseudo-code.

Do not omit implementation to save response length.

Everything must be complete and immediately usable.

The final Noirline website should feel bold, editorial, professional, distinctive, responsive, highly visual, and screenshot-worthy enough to look like a real independent creative studio.