gracewalker.ca — Design System

1. Visual Theme & Atmosphere

Grace Walker’s portfolio radiates warmth and intentional boldness. The dominant surface is a vivid burnt orange — not the flat, digital orange of a dashboard, but one that feels hand-mixed, almost gouache-like. Against this heat, a forest green grounds the identity; it’s the ink on the page, the text that speaks. The result is a palette that feels vintage print-design: courageous, editorial, and intimate.

There are no gradients, no glass effects, no dark modes. The design trusts solid color to carry the emotional weight. Work is displayed through color-coded slides — each project gets its own branded hue — turning the portfolio into a gallery of distinct worlds rather than a uniform grid.

The typeface pairing is equally considered: display headings use Tiempos Headline (a serif with editorial gravitas) while everything else runs in Soehne (a refined grotesque with humanist warmth). This serif/sans split mirrors the site’s personality: serious craft, approachable voice.

2. Color Palette & Roles

Brand & Background

• Burnt orange rgb(255, 94, 48) — page background, primary surface, dominant hue
• Warm parchment rgb(243, 236, 228) — link text, card content text, secondary surface tone
• Forest green rgb(37, 62, 41) — body text, headings on light surfaces, borders

Cards & Surfaces

• Muted orange card rgb(232, 81, 42) — card variant on orange background (slight darkening for depth)
• Parchment card rgb(243, 236, 228) — light card surface
• Powder blue rgb(195, 219, 239) — tertiary card variant, cool contrast to orange dominance
• Silver rgb(221, 221, 221) — slider background

Work Slides (project-specific palettes)

• Steel blue rgb(46, 89, 108)
• Bright blue rgb(0, 125, 218)
• Tobacco brown rgb(69, 59, 49)
• Deep plum rgb(49, 38, 68)
• Crimson rgb(95, 39, 58)

Interaction

• Links on hover: opacity: 0.51 (fade, not color change)
• Focus ring: orange rgb(255, 94, 48) on parchment links
• Buttons on hover: white rgba(255, 255, 255, 0.196) overlay (subtle fill on transparent)

3. Typography Rules

Two fonts, two roles, zero compromise.

Tiempos Headline — display headings only (h2)

• Size: 48px / Line height: 52.8px / Weight: 500 (medium)
• Used for section names, hero moments; the editorial voice
• Never used for body copy or navigation

Soehne — the system font for everything else

• h1: 24px / 600 — section sub-headings, navigation labels
• Body/paragraphs: 16px / 400 / 1.6 line height — readable, open
• Links: 16px / 600 — bolded to signal interactivity without color alone
• No text transforms, no tracked letter-spacing — type is kept natural and approachable

What’s absent: no monospace, no all-caps micro-labels, no small utility text. Type is either content or navigation — never decoration.

4. Component Stylings

Cards (.card)

• Three distinct color modes: parchment on green, orange-on-parchment, powder blue on green
• Border radius: 24px (contained), 30px (prominent), up to 64px (pill-adjacent elements)
• Shadow: rgba(73, 25, 12, 0.3) 5px 5px 10px — warm, directional, analog
• Inset shadow also present: rgba(59, 59, 59, 0.2) 5px 0px 10px inset — gives cards a pressed-paper feel

Flip Cards (.flipcard-back)

• White reverse face: rgb(255, 255, 255) — pure reveal, contrastive against orange world

Work Slides

• Each slide is a full-bleed color block with white text
• No radius on slides — they span edge to edge, immersive

Buttons (.btn)

• Transparent background with 10% white tint: rgba(243, 236, 228, 0.1)
• Hover: rgba(255, 255, 255, 0.196) — ghostly brightening
• No border, no strong shadow — buttons feel part of the surface

Sections

• Padding: 32px uniform — generous breathing room

5. Layout Principles

The page is a single scrolling canvas rather than a grid of cards. Each section occupies the full width, with work slides functioning as horizontally scrollable panels (a slider pattern) rather than a masonry grid.

The layout philosophy is spatial: big color blocks, generous padding, nothing cramped. The page-wrapper sets orange as the default environment and everything else layers on top. There is no container max-width visible in the CSS — the design stretches to fill its context.

Sections use 32px horizontal padding, keeping content from touching edges even at narrow widths. Gaps default to normal — no explicit flexbox or grid gap values are asserted, suggesting layout is handled by Webflow’s built-in spacing utilities.

6. Depth & Elevation

Depth comes from shadow and color contrast, not blur or transparency stacking.

• Ambient shadow: rgba(0, 0, 0, 0.09) 7px 7px 40px 6px — diffuse, card-level lift
• Warm directional shadow: rgba(73, 25, 12, 0.3) 5px 5px 10px — brown-tinted, suggests a warm light source
• Inset texture shadow: rgba(59, 59, 59, 0.2) 5px 0px 10px inset — gives cards the feel of pressed material

There are no frosted glass effects, no backdrop-filter, no z-axis animations noted. The layering is physical — one surface sits on another via shadow, not through blending.

7. Do’s and Don’ts

Do:

• Use the orange + forest green pairing as the foundational color contract
• Let each work project define its own slide color (don’t force them into orange)
• Pair Tiempos Headline with Soehne — never use Tiempos for body copy
• Apply warm brown-tinted shadows (rgba(73, 25, 12, ...)) rather than black shadows
• Use opacity fading (~0.5) for link hover, not color changes
• Keep border radii generous: minimum 24px on cards

Don’t:

• Don’t introduce gradients — the design lives in solid color
• Don’t add dark mode — the warmth is structural, not switchable
• Don’t use cool-toned grays for text — the green rgb(37, 62, 41) is the neutral
• Don’t use Tiempos below display sizes — it reads as mismatch at 16px
• Don’t use tight letter-spacing or all-caps — the tone is warm, not corporate

8. Responsive Behavior

No media query breakpoints are surfaced in the CSS data (built in Webflow, which handles breakpoints through its own layout engine). The section padding of 32px provides a consistent comfortable gutter at all widths. Work slides are designed to scroll horizontally, implying they collapse to single-item views on mobile.

The flip card pattern implies touch devices may need tap-to-flip rather than hover, which should be explicitly handled. No explicit mobile type scale is present — Webflow likely manages this through responsive text sizing in its style panel.

9. Agent Prompt Guide

Use this block when prompting an AI to generate UI in the style of gracewalker.ca:

Design in the style of a warm editorial portfolio. Use a dominant burnt orange background (#FF5E30) with forest green (#253E29) for text. Accent with warm parchment (#F3ECE4) and powder blue (#C3DBEF) for card surfaces. Body font is Soehne (or Inter as substitute) at 16px/400; display headings use a serif like Tiempos Headline or Playfair Display at 48px/500. Cards have 24–30px border radius, a warm brown-tinted directional shadow, and come in 3 color variants. Hover links fade to 50% opacity rather than changing color. Buttons are ghost-style with a transparent white tint. Each project/work item gets its own unique background color. No gradients, no dark mode, no tight letter-spacing.

Generated by Sparkbites — extracted from live CSS analysis