D’CALOR / CREATOR RESOURCES
The art behind
the experience.
A working reference for your D’CALOR website. Explore the visual language, try the shared components and follow the setup guide to make the template your own.
01 / Colour & atmosphere.
Solar brings orange light and heat. Coral introduces a deeper red mood. Quiet charcoal surfaces give portraits space, with soft shadows around cards, images and controls. Keep black text on Solar and light text on dark surfaces.
Solar
Coral
Ink
#101010
Surface
#202020
Paper
#F0EEEA
Body text
#D8D5D0
Solar accent
#F5B200
Coral accent
#F57E49
02 / A voice in two typefaces.
Bodoni Moda gives headlines their editorial character. Inter keeps paragraphs, navigation and controls clear. Shared text styles live in Assets. Some display compositions have local size and colour overrides: review those separately after changing a style.
Colour with a point of view.
Bodoni Moda · Medium 500 · Editorial headings
An expressive image starts with a clear idea.
Inter · Regular 400 / Medium 500 · Reading and interface
03 / Details that belong together.
Edit a main component in Assets to update its instances. Use the Solar or Coral button variant for the surrounding colour story. Standalone buttons use a clear label without an arrow. Linked cards and FAQ rows use the small filled, rounded triangle.
04 / A mark with warmth.
The black D’CALOR mark sits on the Solar gradient. The editable master is Brand / Solar App Icon in Assets. Export square PNG files for the favicon and Apple Touch Icon, then replace them in Site Settings. The icon does not install an app or enable offline access.
05 / Make it yours.
Start with your identity
Replace the studio name, logo, page titles and social preview image. Navigation and footer are distributed through the shared layout. Review their main components, the contact bubble and the 404 page as well as the home page. Keep your business identity separate from the template creator credit.
Connect your contact channels
Replace hello@dcalor.example and +44 20 7946 0958 throughout the contact page, footer, navigation and contact bubble. Update the WhatsApp destination and every social link to your own profiles. The current social links open the platforms, not a studio account.
Set up forms before launch
Select each enquiry and newsletter form in Framer and configure its destination for your own account. Review required fields, consent copy and the success page. A visible success page alone does not prove delivery. After configuration, send an authorised test to your own inbox and verify it arrives.
Work with the CMS
Services controls makeup pages; Products controls the colour collection; Projects controls selected work; Albums controls the lookbook; Blog controls journal stories; Career controls openings; Legal controls legal pages. Studio Artists and Studio Films hold artist and film content. Studio Content holds shared FAQs, values, formats, collaborations, materials and other grouped content. Preserve each item’s group, order and references so it appears in the intended section. For Career, set the recipient or application form URL in Apply link. Translate Application Email Subject for each role; leave it empty to keep the subject already in the email link. Web form links remain unchanged. The four Client voices entries are fictional template examples. The Google symbol and five stars are an editable design, not a Google connection or verified rating. Before using this section for your business, replace the quotes, names and ratings with your own authorised reviews. Edit their shared card under Card / Creative collaboration; the same design is used on Home, Makeup, Project rates, Contact, Studio, For brands and Client voices.
Translate each source
Use Framer Localization for English and German. Translate each heading, paragraph, button label, component property and CMS field separately. Do not combine unrelated text or create parallel English/German fields. Keep brand names and technical identifiers unchanged; translate page titles, descriptions, image descriptions and visible category labels as well. Automatic translation is disabled. Review both languages at every breakpoint, and check that EN/DE keeps visitors on the same page or CMS item. The mobile language control uses two letters in the logo typeface, without a capsule.
Keep your image library
Replace full-colour and selective-colour images as a matched pair with the same crop and dimensions. Keep the originals and record where each image is used before removing a CMS item or collection. Reuse a strong portrait where its subject fits the story. Use WebP for photography and preserve descriptive alternative text.
The opening slideshow has three landscape image pairs and three separate portrait pairs on the Phone breakpoint. Replace each selective-colour and full-colour pair together. Keep the images set to Fit so faces and headpieces remain visible. HeroColourIntro controls the nine-second scenes, colour fade, image descriptions in English and German, and the glass indicator. Keep the opening sticky and the following sections above it. The two images in the next section use withBoundedColourParallax; their movement stays inside their own frames.
Respect motion and touch
Colour reveal responds to hover or keyboard focus on desktop and visibility on touch screens. Reduced Motion shows a static full-colour image. Preserve both aligned image layers and the ColourReveal override. Films loop silently without player controls. Keep the ConsideredVideo override: tap or click opens full view; tap, swipe or Escape closes it. Check playback on the published site.
Prepare your own launch
Review all content, prices, claims, legal pages and contact details for your business. Set page titles, descriptions, social images and the favicon in Settings. Update the website URL and content in the structured data under Custom Code when connecting your domain. Review any analytics configuration. Preview at 390, 810, 1200 and 1600 pixels, then publish and check the live navigation, forms, images, videos and a missing URL.
Keep this reference useful
This guide is excluded from search indexing but remains accessible by its URL. Keep it while customising your site, or set this page to Draft before your own launch if you do not want it published. Template design by AL WebDesign Studio. Creator: Alexej Luft.