Remixes of obnimashki-photo.wfolio.pro
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Obnimashki-photo
description: |
Obnimashki embodies a warm, playful, and welcoming aesthetic designed to
appeal to families and children. The visual identity balances professional
photography credentials with an approachable, joyful personality. Warm
terra-cotta tones dominate alongside soft, neutral cream backgrounds, creating
an inviting and intimate environment. The typography mixes structured
geometric display fonts with approachable body text, while rounded button
shapes and soft card treatments reinforce approachability. The overall mood is
cheerful yet professional—a space where families feel comfortable, valued, and
excited to book photography sessions. Imagery is central: bright, candid
moments of children and families frame the service offerings, with generous
whitespace and soft shadows allowing content to breathe.
source:
url: "https://obnimashki-photo.wfolio.pro/"
pagesAnalyzed: 6
extractedAt: 2026-11-02
tokensMeasured: true
colors:
primary: "#CD6A40"
accent: "#523021"
canvas: "#F0E4D6"
surface-alt: "#F7F7F7"
on-primary: "#FFFFFF"
typography:
heading-md:
fontFamily: Involve
fontSize: 32px
fontWeight: 700
lineHeight: 1.1
letterSpacing: 0.64px
heading-sm:
fontFamily: MyCustomFont
fontSize: 31px
fontWeight: 400
lineHeight: 1.1
letterSpacing: 0.62px
heading-xs:
fontFamily: Involve
fontSize: 27px
fontWeight: 400
letterSpacing: 0.54px
body-lg:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg-strong:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Montserrat
fontSize: 14px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: Montserrat
fontSize: 13px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
body-sm-uppercase:
fontFamily: Montserrat
fontSize: 13px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
body-xs:
fontFamily: Montserrat
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 1.2px
textTransform: uppercase
caption:
fontFamily: Montserrat
fontSize: 12px
fontWeight: 400
letterSpacing: 0px
rounded:
none: 0px
xs: 12px
full: 9999px
spacing:
xxs: 12px
xs: 16px
sm: 20px
md: 24px
lg: 32px
xl: 36px
xxl: 44px
xxxl: 56px
section: 60px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.06) 0px 12px 24px 0px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F0E4D6"
surface: "#F7F7F7"
surfaceRaised: "#EEEEEE"
text: "#111111"
textMuted: "#5F5B56"
border: "#D5CBBE"
accent: "#C55F34"
accentFg: "#000000"
focusRing: "#CD6A40"
elevation: shadow
dark:
bg: "#130E0C"
surface: "#211C1B"
surfaceRaised: "#2D2927"
text: "#FDF9F7"
textMuted: "#A4A09E"
border: "#393533"
accent: "#CD6A40"
accentFg: "#0B0B0C"
focusRing: "#CD6A40"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.body-xs}"
textColor: "{colors.on-primary}"
border: "1px solid {colors.primary}"
height: 56px
padding: "18px 34px 18px 34px"
rounded: 100px
backgroundColor: "{colors.primary}"
button-outline:
typography: "{typography.body-xs}"
textColor: "{colors.accent}"
border: "1px solid {colors.canvas}"
height: 56px
padding: "18px 34px 18px 34px"
rounded: 100px
backgroundColor: "{colors.canvas}"
button-text:
textColor: "{colors.primary}"
height: 21px
padding: "1px 1px 1px 1px"
fontSize: 16px
fontFamily: Montserrat
fontWeight: 400
footer:
textColor: "{colors.accent}"
padding: "36px 0px 18px 0px"
fontSize: 14px
fontFamily: Montserrat
fontWeight: 400
backgroundColor: "{colors.canvas}"
link:
textColor: "{colors.accent}"
fontSize: 0px
fontFamily: Montserrat
fontWeight: 400
lineHeight: 0px
link-2:
typography: "{typography.body-sm}"
textColor: "{colors.accent}"
card:
textColor: "{colors.accent}"
fontSize: 16px
fontFamily: Montserrat
fontWeight: 400
states:
link-hover:
target: link
state: hover
textDecoration: none
button-hover:
target: button
state: hover
textDecoration: none
other-hover:
target: other
state: hover
backgroundColor: "{colors.on-primary}"
badge-hover:
target: badge
state: hover
textDecoration: underline
nav-hover:
target: nav
state: hover
opacity: 1
transform: "translateY(0px)"
other-active:
target: other
state: active
opacity: 0.9
outline: none
card-hover:
target: card
state: hover
opacity: 0.5
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 707
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 942
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1178
gridColumns: 5
navLinksVisible: 0
menuToggleVisible: false
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1325
gridColumns: 6
navLinksVisible: 0
menuToggleVisible: false
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 51
gradientsFound: 0
rolesUnassigned: 0
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Obnimashki embodies a warm, playful, and welcoming aesthetic designed to appeal to families and children. The visual identity balances professional photography credentials with an approachable, joyful personality. Warm terra-cotta tones dominate alongside soft, neutral cream backgrounds, creating an inviting and intimate environment. The typography mixes structured geometric display fonts with approachable body text, while rounded button shapes and soft card treatments reinforce approachability. The overall mood is cheerful yet professional—a space where families feel comfortable, valued, and excited to book photography sessions. Imagery is central: bright, candid moments of children and families frame the service offerings, with generous whitespace and soft shadows allowing content to breathe.
Key Characteristics
{colors.primary} — #CD6A40): Primary action buttons, active link states, brand mark highlights, and hero text accents. This warm rust-orange conveys energy and approachability while maintaining sophistication suitable for a professional studio.{colors.accent} — #523021): Secondary text and hero bands. A deep warm brown that grounds the palette and provides text contrast against lighter surfaces.{colors.canvas} — #F0E4D6): Default page background. A warm, light cream tone that frames all content and establishes the soft, welcoming baseline.{colors.surface-alt} — #F7F7F7): Alternating section bands and light content surfaces. A near-white alternative that creates visual rhythm without harsh contrast.{colors.on-primary} — #FFFFFF): Label and text colour when displayed on brand surfaces and primary buttons. Pure white ensures legibility on {colors.primary} backgrounds.Primary Display & Headings: Involve (display sizes)
Fallback: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Custom Hand-Drawn Display: MyCustomFont (specialty headings)
Fallback: Involve, Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Body & UI: Montserrat (all text, buttons, captions)
Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Involve | 32px | 700 | 1.1 | 0.64px | Main section headings; structured and bold |
| Heading XS | Involve | 27px | 400 | not measured | 0.54px | Secondary display; lighter weight than Display |
| Heading SM | MyCustomFont | 31px | 400 | 1.1 | 0.62px | Specialty headings; playful, hand-drawn character |
| Body Large | Montserrat | 16px | 400 | 1.5 | 0px | Primary body text; generous line spacing for readability |
| Body Large Strong | Montserrat | 16px | 700 | 1.5 | 0px | Emphasis within body copy; bold weight |
| Body Medium | Montserrat | 14px | 400 | 1.5 | 0px | Secondary body text; slightly condensed from large |
| Body Small | Montserrat | 13px | 400 | 1 | 0px | List items and tertiary text; tighter line spacing |
| Body Small Uppercase | Montserrat | 13px | 400 | 1 | 0px | UI labels, button text; transformed uppercase for emphasis |
| Body Extra Small | Montserrat | 12px | 400 | 1.5 | 1.2px | Captions, small buttons, navigation links; expanded tracking for distinction |
| Caption | Montserrat | 12px | 400 | not measured | 0px | Metadata and timestamps |
{typography.body-xs} uses 1.2px letter-spacing) to maintain clarity and visual separation in compact spaces.Primary Button
{colors.primary} (#CD6A40){colors.on-primary} (#FFFFFF){typography.body-xs} (12px, 400 weight, uppercase, 1.2px tracking){colors.primary} (#CD6A40){rounded.full} (9999px — pill shape)Secondary / Outline Button
{colors.canvas} (#F0E4D6){colors.accent} (#523021){typography.body-xs} (12px, 400 weight, uppercase, 1.2px tracking){colors.canvas} (#F0E4D6){rounded.full} (9999px — pill shape)Text Button
{colors.primary} (#CD6A40){typography.body-lg} (16px, 400 weight)Content Card
{colors.surface-alt} (#F7F7F7) or white{colors.accent} (#523021){rounded.xs} (12px) for images within cardsrgba(0, 0, 0, 0.06) 0px 12px 24px 0px (single-tier, minimal elevation)Hero Band / Section Background
{colors.primary} (#CD6A40) or {colors.accent} (#523021){colors.on-primary} (#FFFFFF){spacing.section} (60px) or {spacing.band} (64px)Text Input / Form Field
{colors.surface-alt} (#F7F7F7){colors.accent} (#523021){colors.canvas} (#F0E4D6){rounded.xs} (12px){spacing.xs} (16px){typography.body-md} (14px){colors.primary} (#CD6A40), outline: noneNavigation Link
{colors.accent} (#523021){typography.body-xs} (12px, 400 weight, uppercase, 1.2px tracking){colors.accent}, text-decoration: underline addedFooter
{colors.canvas} (#F0E4D6){colors.accent} (#523021){typography.body-md} (14px)The spacing system uses a base unit of 4px, scaled into human-readable increments for component and section layout:
{spacing.xxs} = 12px — Button icon-text gaps, tight component padding{spacing.xs} = 16px — Small button padding, form field padding, card internal spacing{spacing.sm} = 20px — Component-to-component gutters, small section margins{spacing.md} = 24px — Medium section padding, space between stacked elements{spacing.lg} = 32px — Large whitespace between content blocks{spacing.xl} = 36px — Footer and major section padding{spacing.xxl} = 44px — Large hero padding, major layout spacing{spacing.xxxl} = 56px — Extra-large section gaps{spacing.section} = 60px — Standard vertical section padding{spacing.band} = 64px — Full-width band padding (hero, footer sections)Usage Context:
{spacing.xs} padding internally and {spacing.md} for hover spacing effects{spacing.md} for internal content gutters{spacing.section} (60px) or {spacing.band} (64px) for consistent rhythm{spacing.lg} (32px){spacing.section} (60px) vertical; horizontal padding adjusts per breakpoint but maintains breathing roomWhitespace is a defining characteristic of Obnimashki's design. Generous margins between sections, large gaps between cards, and minimal clutter create an airy, premium feel. This breathing room directs attention toward imagery and copy rather than visual density. Text is never crowded; section transitions are signalled by rhythm, not borders. The 1.5 line-height on body text and loose letter-spacing on captions reinforce openness.
{rounded.none} = 0px — Overlays, full-bleed sections, flat UI elements{rounded.xs} = 12px — Card images, form inputs, subtle rounding for contained elements{rounded.full} = 9999px — All interactive buttons (pill shape), creating immediate visual affordanceComponent Contexts:
{rounded.full} (9999px){rounded.xs} (12px){rounded.xs} (12px) or {rounded.none} (0px)1px) — Applied to card borders, button outlines, and input field strokes. Provides visual containment without heaviness.| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Hero bands, full-width sections, text-only areas, backgrounds |
| Lifted | rgba(0, 0, 0, 0.06) 0px 12px 24px 0px | Cards, overlays, buttons, product images—single shadow for consistent micro-lift |
Shadow Philosophy:
The system employs a single-tier shadow strategy: only one shadow value exists across all elevated surfaces. This creates visual consistency and restraint. Depth is conveyed primarily through colour-blocking (hero bands in {colors.primary}, alternating section backgrounds in {colors.surface-alt}), not shadow accumulation. The single shadow used (rgba(0, 0, 0, 0.06) 0px 12px 24px 0px) is subtle and diffuse, suggesting gentle lift rather than dramatic layering. This restraint maintains the system's clean, premium aesthetic.
0.70) — Hover states on interactive elements (links, icons); subtle emphasis0.50) — Disabled states, secondary imagery, overlay darkenings0.25) — Very subtle background overlays, watermarks, decorative layers| Layer | Z-index | Use |
|---|---|---|
| Base | 1, 5 | Content surfaces, default stacking context |
| Dropdown | 10 | Menu dropdowns, overlays appearing above base content |
| Sticky | 100, 500 | Fixed headers, sticky navigation elements |
| Modal | 1100, 9999 | Modals, dialogs, highest-priority overlays; 9999 reserved for escape-hatch overlays |
{rounded.full}) for all CTAs; the rounded form signals friendliness and interactivity.rgba(0, 0, 0, 0.06) 0px 12px 24px 0px) consistently to cards and lifted surfaces; avoid shadow stacking.{colors.primary} and alternating sections in {colors.surface-alt} create visual hierarchy without complexity.{colors.accent} (#523021) on light surfaces; it provides sufficient contrast and warmth.{spacing.section} (60px) as the standard vertical rhythm between major content blocks.{rounded.full} (pill-shaped).{spacing.sm} (20px) between logical content blocks.| Viewport | Content Width | Grid Columns | Layout Changes | Heading | Body |
|---|---|---|---|---|---|
| 375px | 375px | 3 | Single-column stacks; cards full-width; minimal padding | 32px | 16px |
| 768px | 707px | 3 | Cards in 2–3 column grid; navigation remains horizontal; footer wraps | 32px | 16px |
| 1024px | 942px | 3 | Wider column gutters; hero sections expand; card grid remains 3-column | 32px | 16px |
| 1280px | 1178px | 5 | Grid expands to 5 columns; section padding increases; wider hero bands | 32px | 16px |
| 1440px | 1325px | 6 | Full-width layout; 6-column grid available; max container width reached | 32px | 16px |
Layout Shifts:
{spacing.band} (64px).{colors.primary} — #CD6A40){colors.accent} — #523021){colors.canvas} — #F0E4D6){colors.surface-alt} — #F7F7F7){colors.on-primary} — #FFFFFF)Button Styling is Non-Negotiable: All buttons must be pill-shaped (border-radius: 9999px), 56px tall, 18px vertical padding, 34px horizontal padding. Primary buttons use #CD6A40 background with white text; secondary buttons use #F0E4D6 background with dark text. Font is always Montserrat 12px weight-400 uppercase with 1.2px letter-spacing.
Shadows are Single-Tier Only: Use only rgba(0, 0, 0, 0.06) 0px 12px 24px 0px for elevated surfaces (cards, buttons). Do not add or layer additional shadows; if a surface is flat, apply no shadow.
Spacing Scale is Rigid: Vertical section rhythm uses {spacing.section} (60px) or {spacing.band} (64px). Component-level spacing uses {spacing.xs} through {spacing.lg} as prescribed. Do not invent intermediate spacing values.
Typography Hierarchy is Fixed: Display headings are 32px Involve weight-700; custom hand-drawn headings are 31px MyCustomFont weight-400; body text is Montserrat 16px weight-400 with 1.5 line-height. Match font, size, and weight exactly—no approximations.
Colour Blocking Drives Depth: Depth and visual hierarchy come from background colour changes (hero bands in rust-orange, alternating sections in off-white), not shadow complexity. Solid colours only; no gradients.
Opacity for Interaction States: Use 70% opacity for hover states (subtle emphasis), 50% for disabled states, 25% for very subtle overlays. These are the only opacity values in the system.
Border Radius is Role-Specific: Buttons = 9999px (pill). Images and form fields = 12px. Full-bleed overlays and sections = 0px. Do not apply 12px to buttons or 9999px to form fields.
Responsive Columns Scale: 3 columns at 375px–1024px, 5 columns at 1280px, 6 columns at 1440px. Never compress more than 3 columns on mobile or fewer than 5 on desktop 1280px+.
Text Uppercase is UI-Only: Apply text-transform: uppercase only to button labels, small UI labels, and navigation. Body copy, headings, and captions remain sentence-case or title-case.
Link Styling is Consistent: Links default to no underline; underline is added on :hover. Link colour matches text colour by default ({colors.accent} — #523021); only primary action links in text form may use {colors.primary} (#CD6A40).
version: "1.0"
metadata:
brand: "Obnimashki Children's Photo Studio"
url: "https://obnimashki-photo.wfolio.pro/"
pages_analyzed: 6
extraction_date: "2025"
colors:
primary:
value: "#CD6A40"
role: "Primary / Brand"
usage: "Primary CTA, brand mark, hero accent, active state"
accent:
value: "#523021"
role: "Accent"
usage: "Secondary accent, hero band, text"
canvas:
value: "#F0E4D6"
role: "Canvas"
usage: "Default page background, secondary button fill"
surface_alt:
value: "#F7F7F7"
role: "Surface Alt"
usage: "Alternating section band, light card surface"
on_primary:
value: "#FFFFFF"
role: "On Primary"
usage: "Label and text on brand surfaces"
typography:
display_md:
font_family: "Involve"
size: "32px"
weight: 700
line_height: 1.1
letter_spacing: "0.64px"
heading_xs:
font_family: "Involve"
size: "27px"
weight: 400
line_height: "not measured"
letter_spacing: "0.54px"
heading_sm:
font_family: "MyCustomFont"
size: "31px"
weight: 400
line_height: 1.1
letter_spacing: "0.62px"
body_lg:
font_family: "Montserrat"
size: "16px"
weight: 400
line_height: 1.5
letter_spacing: "0px"
body_lg_strong:
font_family: "Montserrat"
size: "16px"
weight: 700
line_height: 1.5
letter_spacing: "0px"
body_md:
font_family: "Montserrat"
size: "14px"
weight: 400
line_height: 1.5
letter_spacing: "0px"
body_sm:
font_family: "Montserrat"
size: "13px"
weight: 400
line_height: 1
letter_spacing: "0px"
body_sm_uppercase:
font_family: "Montserrat"
size: "13px"
weight: 400
line_height: 1
letter_spacing: "0px"
text_transform: "uppercase"
body_xs:
font_family: "Montserrat"
size: "12px"
weight: 400
line_height: 1.5
letter_spacing: "1.2px"
text_transform: "uppercase"
caption:
font_family: "Montserrat"
size: "12px"
weight: 400
line_height: "not measured"
letter_spacing: "0px"
spacing:
xxs: "12px"
xs: "16px"
sm: "20px"
md: "24px"
lg: "32px"
xl: "36px"
xxl: "44px"
xxxl: "56px"
section: "60px"
band: "64px"
rounded:
none: "0px"
xs: "12px"
full: "9999px"
shadows:
sm: "rgba(0, 0, 0, 0.06) 0px 12px 24px 0px"
borders:
thin: "1px"
opacity:
light: 0.25
medium: 0.50
emphasis: 0.70
z_index:
base: 1
dropdown: 10
sticky: 100
modal: 1100
escape_hatch: 9999
breakpoints:
mobile: "375px"
tablet: "768px"
desktop_md: "1024px"
desktop_lg: "1280px"
desktop_xl: "1440px"
components:
button:
primary:
background: "#CD6A40"
text_color: "#FFFFFF"
font: "Montserrat 12px weight-400 uppercase"
padding: "18px 34px"
border: "1px solid #CD6A40"
border_radius: "9999px"
height: "56px"
box_shadow: "none"
secondary:
background: "#F0E4D6"
text_color: "#523021"
font: "Montserrat 12px weight-400 uppercase"
padding: "18px 34px"
border: "1px solid #F0E4D6"
border_radius: "9999px"
height: "56px"
box_shadow: "none"
text:
background: "transparent"
text_color: "#CD6A40"
font: "Montserrat 16px weight-400"
border: "none"
border_radius: "0px"
box_shadow: "none"
card:
background: "#F7F7F7"
text_color: "#523021"
border: "none"
border_radius: "12px (images), 0px (outer)"
box_shadow: "rgba(0, 0, 0, 0.06) 0px 12px 24px 0px"
input:
background: "white"
text_color: "#523021"
border: "1px solid #F0E4D6"
border_radius: "12px"
padding: "16px"
font: "Montserrat 14px weight-400"
focus_border: "#CD6A40"
link:
text_color: "#523021"
text_decoration: "none"
text_decoration_hover: "underline"
font: "Montserrat 12px weight-400 uppercase"