---
name: "Bark Studio"
mode: "light"
---
# Bark Studio
## Visual theme and atmosphere
Playful, bold, and high-contrast. The page alternates between saturated chartreuse, soft blue, candy pink and deep maroon. Oversized condensed display type from Knockout dominates; an italic serif adds editorial contrast. The mood is fun and confident, with bone/ball/dog photo accents and rounded pill-shaped UI.
A dog-themed creative agency portfolio: loud chartreuse, pink and blue cards, dark maroon type, and playful scroll-driven reveals.
## Color palette and roles
- **Lime (#f4fd86)**: Primary text, alternating section backgrounds, whipe bars, service-row hover.
- **Dark Maroon (#340712)**: Dark scroll section, dropdown menu, CTA panel, form text, footer bar.
- **Deep Burgundy (#330812)**: Whipe reveal panels, name-tag text.
- **Light Blue (#c3d3f9)**: Our Tail sticky section, name-tag pills, submit button.
- **Pink (#ffb4c9)**: Accent text on dark, service section background, profile-card hover border.
- **Pink Fill (#ffb5c9)**: Bottom whipe bars and CTA input fields.
- **Pink Warm (#ffb6c9)**: Whipe bar variant.
- **Red (#ff5454)**: Form error state.
- **White (#fff)**: Menu button, profile circle border, pure text on dark.
- **Black (#000)**: Hairline form borders.
- **Mauve Wash (#cfa7bf)**: Default body background fallback in the raw export.
- **Lead Coral (#f86d49)**: SVG rope/lead draw stroke (from Lottie source color).
## Typography rules
- **Display**: Knockout, 400, 13vw. Oversized condensed display headlines.
- **Editorial**: Instrument Serif, 400, 13vw. Serif italic accent words inside display type.
- **Body**: Inter, 400, 1rem. Small copy, labels and form text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 30px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 200ms; composed transitions last 600ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Set large display type in Knockout, uppercase, tight line-height (0.8).
- Use Instrument Serif for the italic editorial moments inside headlines.
- Alternate sections between chartreuse, light blue, pink and dark maroon; do not add extra neutral greys.
- Reserve #ff5454 for error states only.
- Keep images full-bleed or rounded within profile cards; use `object-fit: cover`.
- Respect prefers-reduced-motion: hide scroll-driven animations and keep only hover/focus transitions.
---
name: "Bark Studio"
mode: "light"
---
# Bark Studio
## Visual theme and atmosphere
Playful, bold, and high-contrast. The page alternates between saturated chartreuse, soft blue, candy pink and deep maroon. Oversized condensed display type from Knockout dominates; an italic serif adds editorial contrast. The mood is fun and confident, with bone/ball/dog photo accents and rounded pill-shaped UI.
A dog-themed creative agency portfolio: loud chartreuse, pink and blue cards, dark maroon type, and playful scroll-driven reveals.
## Color palette and roles
- **Lime (#f4fd86)**: Primary text, alternating section backgrounds, whipe bars, service-row hover.
- **Dark Maroon (#340712)**: Dark scroll section, dropdown menu, CTA panel, form text, footer bar.
- **Deep Burgundy (#330812)**: Whipe reveal panels, name-tag text.
- **Light Blue (#c3d3f9)**: Our Tail sticky section, name-tag pills, submit button.
- **Pink (#ffb4c9)**: Accent text on dark, service section background, profile-card hover border.
- **Pink Fill (#ffb5c9)**: Bottom whipe bars and CTA input fields.
- **Pink Warm (#ffb6c9)**: Whipe bar variant.
- **Red (#ff5454)**: Form error state.
- **White (#fff)**: Menu button, profile circle border, pure text on dark.
- **Black (#000)**: Hairline form borders.
- **Mauve Wash (#cfa7bf)**: Default body background fallback in the raw export.
- **Lead Coral (#f86d49)**: SVG rope/lead draw stroke (from Lottie source color).
## Typography rules
- **Display**: Knockout, 400, 13vw. Oversized condensed display headlines.
- **Editorial**: Instrument Serif, 400, 13vw. Serif italic accent words inside display type.
- **Body**: Inter, 400, 1rem. Small copy, labels and form text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 30px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 200ms; composed transitions last 600ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Set large display type in Knockout, uppercase, tight line-height (0.8).
- Use Instrument Serif for the italic editorial moments inside headlines.
- Alternate sections between chartreuse, light blue, pink and dark maroon; do not add extra neutral greys.
- Reserve #ff5454 for error states only.
- Keep images full-bleed or rounded within profile cards; use `object-fit: cover`.
- Respect prefers-reduced-motion: hide scroll-driven animations and keep only hover/focus transitions.
---
name: "Bark Studio"
mode: "light"
---
# Bark Studio
## Visual theme and atmosphere
Playful, bold, and high-contrast. The page alternates between saturated chartreuse, soft blue, candy pink and deep maroon. Oversized condensed display type from Knockout dominates; an italic serif adds editorial contrast. The mood is fun and confident, with bone/ball/dog photo accents and rounded pill-shaped UI.
A dog-themed creative agency portfolio: loud chartreuse, pink and blue cards, dark maroon type, and playful scroll-driven reveals.
## Color palette and roles
- **Lime (#f4fd86)**: Primary text, alternating section backgrounds, whipe bars, service-row hover.
- **Dark Maroon (#340712)**: Dark scroll section, dropdown menu, CTA panel, form text, footer bar.
- **Deep Burgundy (#330812)**: Whipe reveal panels, name-tag text.
- **Light Blue (#c3d3f9)**: Our Tail sticky section, name-tag pills, submit button.
- **Pink (#ffb4c9)**: Accent text on dark, service section background, profile-card hover border.
- **Pink Fill (#ffb5c9)**: Bottom whipe bars and CTA input fields.
- **Pink Warm (#ffb6c9)**: Whipe bar variant.
- **Red (#ff5454)**: Form error state.
- **White (#fff)**: Menu button, profile circle border, pure text on dark.
- **Black (#000)**: Hairline form borders.
- **Mauve Wash (#cfa7bf)**: Default body background fallback in the raw export.
- **Lead Coral (#f86d49)**: SVG rope/lead draw stroke (from Lottie source color).
## Typography rules
- **Display**: Knockout, 400, 13vw. Oversized condensed display headlines.
- **Editorial**: Instrument Serif, 400, 13vw. Serif italic accent words inside display type.
- **Body**: Inter, 400, 1rem. Small copy, labels and form text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 30px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 200ms; composed transitions last 600ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Set large display type in Knockout, uppercase, tight line-height (0.8).
- Use Instrument Serif for the italic editorial moments inside headlines.
- Alternate sections between chartreuse, light blue, pink and dark maroon; do not add extra neutral greys.
- Reserve #ff5454 for error states only.
- Keep images full-bleed or rounded within profile cards; use `object-fit: cover`.
- Respect prefers-reduced-motion: hide scroll-driven animations and keep only hover/focus transitions.
---
name: "Bark Studio"
mode: "light"
---
# Bark Studio
## Visual theme and atmosphere
Playful, bold, and high-contrast. The page alternates between saturated chartreuse, soft blue, candy pink and deep maroon. Oversized condensed display type from Knockout dominates; an italic serif adds editorial contrast. The mood is fun and confident, with bone/ball/dog photo accents and rounded pill-shaped UI.
A dog-themed creative agency portfolio: loud chartreuse, pink and blue cards, dark maroon type, and playful scroll-driven reveals.
## Color palette and roles
- **Lime (#f4fd86)**: Primary text, alternating section backgrounds, whipe bars, service-row hover.
- **Dark Maroon (#340712)**: Dark scroll section, dropdown menu, CTA panel, form text, footer bar.
- **Deep Burgundy (#330812)**: Whipe reveal panels, name-tag text.
- **Light Blue (#c3d3f9)**: Our Tail sticky section, name-tag pills, submit button.
- **Pink (#ffb4c9)**: Accent text on dark, service section background, profile-card hover border.
- **Pink Fill (#ffb5c9)**: Bottom whipe bars and CTA input fields.
- **Pink Warm (#ffb6c9)**: Whipe bar variant.
- **Red (#ff5454)**: Form error state.
- **White (#fff)**: Menu button, profile circle border, pure text on dark.
- **Black (#000)**: Hairline form borders.
- **Mauve Wash (#cfa7bf)**: Default body background fallback in the raw export.
- **Lead Coral (#f86d49)**: SVG rope/lead draw stroke (from Lottie source color).
## Typography rules
- **Display**: Knockout, 400, 13vw. Oversized condensed display headlines.
- **Editorial**: Instrument Serif, 400, 13vw. Serif italic accent words inside display type.
- **Body**: Inter, 400, 1rem. Small copy, labels and form text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 30px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 200ms; composed transitions last 600ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Set large display type in Knockout, uppercase, tight line-height (0.8).
- Use Instrument Serif for the italic editorial moments inside headlines.
- Alternate sections between chartreuse, light blue, pink and dark maroon; do not add extra neutral greys.
- Reserve #ff5454 for error states only.
- Keep images full-bleed or rounded within profile cards; use `object-fit: cover`.
- Respect prefers-reduced-motion: hide scroll-driven animations and keep only hover/focus transitions.
---
name: "Bark Studio"
mode: "light"
---
# Bark Studio
## Visual theme and atmosphere
Playful, bold, and high-contrast. The page alternates between saturated chartreuse, soft blue, candy pink and deep maroon. Oversized condensed display type from Knockout dominates; an italic serif adds editorial contrast. The mood is fun and confident, with bone/ball/dog photo accents and rounded pill-shaped UI.
A dog-themed creative agency portfolio: loud chartreuse, pink and blue cards, dark maroon type, and playful scroll-driven reveals.
## Color palette and roles
- **Lime (#f4fd86)**: Primary text, alternating section backgrounds, whipe bars, service-row hover.
- **Dark Maroon (#340712)**: Dark scroll section, dropdown menu, CTA panel, form text, footer bar.
- **Deep Burgundy (#330812)**: Whipe reveal panels, name-tag text.
- **Light Blue (#c3d3f9)**: Our Tail sticky section, name-tag pills, submit button.
- **Pink (#ffb4c9)**: Accent text on dark, service section background, profile-card hover border.
- **Pink Fill (#ffb5c9)**: Bottom whipe bars and CTA input fields.
- **Pink Warm (#ffb6c9)**: Whipe bar variant.
- **Red (#ff5454)**: Form error state.
- **White (#fff)**: Menu button, profile circle border, pure text on dark.
- **Black (#000)**: Hairline form borders.
- **Mauve Wash (#cfa7bf)**: Default body background fallback in the raw export.
- **Lead Coral (#f86d49)**: SVG rope/lead draw stroke (from Lottie source color).
## Typography rules
- **Display**: Knockout, 400, 13vw. Oversized condensed display headlines.
- **Editorial**: Instrument Serif, 400, 13vw. Serif italic accent words inside display type.
- **Body**: Inter, 400, 1rem. Small copy, labels and form text.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 96px.
- Card corners: 30px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use expressive motion. Fast feedback lasts 200ms; composed transitions last 600ms; easing is cubic-bezier(0.19, 1, 0.22, 1).
## Guardrails
- Set large display type in Knockout, uppercase, tight line-height (0.8).
- Use Instrument Serif for the italic editorial moments inside headlines.
- Alternate sections between chartreuse, light blue, pink and dark maroon; do not add extra neutral greys.
- Reserve #ff5454 for error states only.
- Keep images full-bleed or rounded within profile cards; use `object-fit: cover`.
- Respect prefers-reduced-motion: hide scroll-driven animations and keep only hover/focus transitions.
