Skip to content
Lake Shore Digital

Visual system

Internal reference. The palette, the ratio it is used at, the type scale, and the rules that keep the site quiet.

Palette

Two layers. Primitives are the raw material and are never referenced in a component. Semantic tokens name a job, and those are what components use, so both themes stay correct from one definition.

  • Cream

    #F7F4EC

    Ground

  • Soft ivory

    #FFFDF7

    Surface

  • Forest

    #233E2B

    Identity

  • Ink

    #242B22

    Text

  • Muted ink

    #626759

    Text

  • Orange

    #BD4B16

    Action

  • Warm line

    #DFDFD2

    Structure

  • Night forest

    #17251B

    Dark theme

Ratio

Target proportions for the identity, not measured page coverage.

  • 70%

    Cream

    --background

    Warm ivory in light mode, deep forest in dark. The page ground.

  • 20%

    Surface

    --surface / --border

    Quiet warm panels and restrained separators.

  • 8%

    Forest

    --foreground / --accent

    The Chicago mark, typography, and secondary actions.

  • 2%

    Orange

    --signal

    Burnt orange identifies primary actions.

Type scale

  • hero-title

    Homepage headline

    32 to 60px, Outfit 600

  • display-2

    Page headline

    32 to 48px, Outfit 600

  • h1

    Section headline

    28 to 40px, Outfit 600

  • h2

    Subsection

    22 to 30px, Outfit 600

  • h3

    Card title

    17 to 19px, Outfit 600

  • body

    Running text

    16px, Outfit 400

  • small

    Secondary text

    14px, Outfit 400

Shape

  • --radius-control

    7px. Inputs and compact controls.

  • --radius-panel

    12px. Cards and media.

  • --radius-card

    12px. Service tiles and product rows.

  • --radius-pill

    999px. Primary marketing buttons.

Rules

These decisions keep the approved Carl palette and Chicago identity consistent across the site.

  1. Simple Chicago mark.

    Three buildings above one lake line. Use one ink, preserve proportions, and give the mark breathing room.

  2. Cream, forest, and one action color.

    Burnt orange marks the next action. Green is the structural ink, with neutral warm surfaces around it.

  3. Outfit across the site.

    One friendly sans-serif family connects the homepage, Riley, pricing, and booking.

  4. One theme throughout each page.

    The cream default and forest-dark option both preserve the same hierarchy. Riley inherits the shared tokens.

  5. Real work provides the proof.

    Client screenshots and the team's photographs are factual. Generated hero imagery is decorative brand artwork.

  6. Short, readable headlines.

    The hero stays at two lines on desktop and keeps the action visible on mobile.

  7. Motion supports the reading order.

    Brief entry reveals and hover feedback honor reduced motion. The studio film plays only when opened.