Style guide

Principles

• A private gallery. Paintings on a deep green wall under picture lights, each with a card-stock label beside it.
• Two surfaces only. The wall holds art; catalogue paper holds facts. A dado rail is the only divider.
• Gilt means something. Gold leaf is for frames and rails, not buttons. Most frames are ebony or walnut.
• Everything is square. Art and bands have hard edges; controls are softened by 2 px at most.
• Light comes from above. Walls are lighter at the top and shadows fall down, as under a picture light.
• Plain words. Sentence case, active verbs, specific numbers. A button says what happens.
• Phones first. Design at 375 px, tap targets at least 44 px, one main action per screen.
• Nothing fake. No made-up reviews, ratings, counts or press logos. Sample portraits are labelled as samples.

Color

• Salon green

  #1f3d35

  The gallery wall. Background of most pages.

• Salon deep

  #142a24

  Shadowed wall: footer and the dado rail.

• Salon raised

  #29493f

  Panels sitting on the wall.

• Catalogue paper

  #f3efe6

  Information pages, labels, buttons on the wall. Text on the wall.

• Card stock

  #e6dcc4

  Label stock and the hover state of paper buttons.

• Ink

  #1a1f1c

  Text on paper. Fill of the main button on paper.

• Antique gilt

  #a8873f

  Gold leaf: frames and rails only, never buttons.

• Burnished gilt

  #e0c88c

  Frame highlights. Gold text and hairlines on the wall.

• Gilt in shadow

  #6b5220

  Frame shading.

• Gilt deep

  #7a5c1c

  Gold used as text on paper.

• Bole

  #5e2f1f

  Red clay under the gold, seen in frame recesses.

• Ebony

  #1b1815

  Ebonized frame finish.

• Walnut

  #5b3b24

  Walnut frame finish.

• Natural oak

  #b08a5c

  Plain natural-oak frame, as a framed print really ships.

• Frame white

  #ece8df

  Plain white frame, as a framed print really ships.

• Lichen

  #b4c4bc

  Secondary text on the wall.

• Slate

  #4e5a54

  Secondary text on paper.

• Verdigris

  #8fd1bc

  Focus ring on the wall.

• Verdigris deep

  #1d6b57

  Focus ring on paper.

• Ember

  #ffab98

  Error text on the wall.

• Ember deep

  #a3301f

  Error text on paper.

• After dark

  #1d2a27

  Memorial wall: the same room, lights lowered.

• After dark, deep

  #141e1c

  Memorial shadowed wall.

• After dark, raised

  #26352f

  Memorial panels.

• Candle

  #d9c393

  Memorial light and accent.

Contrast, calculated live

Text needs 4.5 to 1. Large text, focus rings and control edges need 3 to 1 (WCAG 2.2 AA).

Type

One family, Newsreader, for everything. Its optical-size axis is picked from the font size, so headlines get the sharp display cut and labels the sturdy text cut. Italic for artwork titles, the memorial heading and dates. Running text uses old-style figures; prices use lining, tabular figures. Headings are fluid between a 375 px phone and a 1280 px desktop.

Wordmark

• Set in Newsreader with light tracking (+0.01em). The ampersand comes from the italic, in gilt.
• The italic ampersand alone is the house monogram: favicon, seals, the colophon ornament.
• Never stretch, outline, add shadows or put the wordmark on a photo.
• Keep clear space around it equal to the height of the capital A. Smallest size: 20 px.

Frame and placard

The signature. Every frame the site shows is a real Lumaprints frame we sell (gold, black, white, natural oak, and silver floating frames for canvas), drawn from their mockup templates at true moulding width. The carved ebony and walnut finishes below are CSS only and no longer used on the site. The label hangs beside or below the frame, never on it.

Coco

Papillon

Classic Oil

Sample portrait

Maple

Golden Retriever

Classic Oil

16 × 20 in

Left: the picture light (the page's one load animation). Right: the label for one of our sample portraits, and the same label set for a customer's portrait.

Buttons, links and focus

Buttons are 52 px tall with a 2 px radius, set in the serif. One primary button per screen: a paper card on the wall, an ink fill on paper. Keyboard focus draws a 3 px verdigris ring: light on the wall, deep on paper. Press Tab to see it.

Form inputs

Sticky action bar

On phones the main action floats at the bottom as a single ink button, inside the safe area, with no bar behind it. It appears once the first button scrolls away and hides near the memorial room and the closing button. From the lg breakpoint it disappears on the landing page. Shown here in flow.

Memorial palette

The memorial path is the same room after dark: a deeper wall and candle-warm light, set with a single attribute, data-mode="memorial". Copy gets gentler and there is no promotion anywhere inside it.

Memorial palette: off

Your pet, painted and framed

Green wall, warm picture light, gilt frame.

Start your portrait

Biscuit

Beagle

Watercolor

11 × 14 in

Voice and tone

Imagery

• The pet is always the subject. Show the portrait large, in its frame, on the wall.
• Never crop a painting to a circle or round its corners. Frames are rectangles.
• Show real products and real sample portraits, made by our own pipeline and captioned as samples created from phone photos. Never present a sample as a customer's order.
• No stock photos of smiling people holding pets. No made-up customers.
• Every image has alt text that says what it shows. Decorative images have empty alt text.
• Memorial imagery is calm: soft light, no confetti, no sales badges.