The Grand Avenue
A sleek and modern website redesign for a luxury hotel, featuring elegant photography and an intuitive booking system, enhancing the overall guest experience.
Creative Shutter
A photography studio on one page: a white page, one deep teal ink, no colour but the photographs, and a hairline as the only ornament. Erode sets every heading down to 20px, Inter everything else.
- Variables
--cs-*- Defined in
app/demo/creative-shutter/shutter.css- Values
- Read live from that file, so this page always matches it.
Colour
The whole palette, grouped by the job each colour does. Components only paint with these.
Ink
--cs-inkEvery heading, the brand button, the footer's name
--cs-ink-strongThe hero title, the primary button, the menu
--cs-bodyBody copy
--cs-mutedFooter links and the hero's link list
--cs-on-inkText on the two dark buttons
--cs-on-photoThe hero's place, clock and copyright, over the photographs
Surfaces
--cs-surfaceThe page and the menu panel
--cs-surface-2The outline button's hover
--cs-plateBehind a service photograph while it loads
--cs-scrimOver the hero photographs, so the white type reads
Hovers
--cs-ink-strong-hoverThe primary button's hover
--cs-ink-hoverThe brand button's hover
Lines
--cs-lineEvery divider and the footer's top edge
--cs-line-softThe logo grid, the hero links, the outline button
--cs-line-strongThe rule that wipes in under a hero link on hover
--cs-dashThe dashed underline on the menu and the questions
--cs-iconThe plus sign on each question
Typography
The ramp, largest first. Each class sets its own face, size, leading, weight and tracking, and the display sizes step down at the breakpoints.
Display
.cs-8xlWhy Choose Us?
Hero title
.cs-7xlCapturing Moments
Heading 4xl
.cs-4xlAward-winning photographers
Heading 3xl
.cs-3xlWhat services you offer?
Heading 2xl
.cs-2xlPhotographer of the Year
Heading xl
.cs-xlBarcelona
Lead
.cs-lg© 2025 Creative Shutter · All rights reserved
Body
.cs-baseWe bring your vision to life through striking photography that speaks louder than words.
Corners
Every radius in the template. Nothing rounds on a value of its own.
--cs-radiusButtons and photographs: the template's only corner
Spacing
The page rhythm. These step down at the breakpoints, so the readings follow the window. Each bar is drawn at its real length.
--cs-sectionTop of a band, and the bottom of the few that keep one
--cs-gapBetween blocks in a band
--cs-gutterPage edge
--cs-anchorWhere a band the menu jumps to lands, below the top edge
--cs-columnThe half-page measure the questions and the awards hang off
--cs-containerThe widest a column gets
Motion
How long things take and how they ease. Hover a row to run it: durations on the house ease, easings on one duration long enough to show the curve.
Durations
--cs-staggerBetween two lines of the menu
--cs-dur-fadeThe menu's lines fading as it lifts; the reduced-motion fade
--cs-delay-riseThe menu's wait before its first line rises
--cs-dur-hoverThe dashed underline
--cs-durButton colour, the questions' plus sign
--cs-dur-rollThe hero links' roll and rule
--cs-dur-slowAn answer opening
--cs-dur-liftThe menu lifting
--cs-dur-riseA menu line rising in
--cs-dur-dropThe menu dropping, like a shutter
--cs-dur-reelThe hero reel, holds included
Easings
--cs-easeEverything that moves
Breakpoints
Where the layout changes. A media query cannot read a variable, so these are the one set of numbers written straight into the stylesheet and the components.
max-width: 991pxTablet: the hero stacks, the grids go to two columns, the display sizes and the rhythm step down.
max-width: 767pxLarge phone: the gutter tightens, the project grid goes to one column, the questions and the awards lose their half-page measure.
max-width: 479pxPhone: the services go to a single column.
Components
The template's building blocks, live. Hover them: this is how they behave on the pages.
ButtonsShutterButton. Primary for the one action a band wants, brand for the teal, outline beside them, secondary when it should read as a link.
Heading blockSectionHeading and HeadingText. How every band opens: the title, its copy on a 74-character measure, and the button a gap below.
Why Choose Us?
With a team of award-winning photographers and a passion for creativity, we deliver exceptional results tailored to your unique needs.
PhotographsPlate. The template's one corner and never a border: the photograph is the only colour on the page.
CardsProjectCard and ServiceCard. A photograph, a name in medium weight, and the copy under it.
Lifestyle Photography
Tell your story through candid, vibrant images that reflect your lifestyle. We bring your vision to life.
Hero linksRollLink. The label rolls up as a copy rises into its place, and a black rule wipes in over the hairline.
QuestionsShutterFaqs. The dashed underline grows on hover, the plus loses its upright stroke as an answer opens.
We offer branding and web design services, which include the creation of unique logos, development of responsive websites, and customized digital marketing strategies. Our goal is to help businesses stand out in the market and connect effectively with their audience.
Send project proposalOur services are designed to help businesses elevate their brand identity through visually appealing logos, user-friendly websites, and targeted digital marketing campaigns. We aim to empower our clients to achieve their business goals and establish a strong online presence.
Request quotationYes, we offer comprehensive website maintenance services to ensure that your website remains up-to-date, secure, and optimized for performance. Our team is dedicated to providing ongoing support to help you focus on your core business activities.