Design tokens (YAML front matter)
name: Paws & Paths
colors:
surface: "#f9f9ff"
surface-dim: "#d3daea"
surface-bright: "#f9f9ff"
surface-container-lowest: "#ffffff"
surface-container-low: "#f0f3ff"
surface-container: "#e7eefe"
surface-container-high: "#e2e8f8"
surface-container-highest: "#dce2f3"
on-surface: "#151c27"
on-surface-variant: "#534434"
inverse-surface: "#2a313d"
inverse-on-surface: "#ebf1ff"
outline: "#867461"
outline-variant: "#d8c3ad"
surface-tint: "#855300"
primary: "#855300"
on-primary: "#ffffff"
primary-container: "#f59e0b"
on-primary-container: "#613b00"
inverse-primary: "#ffb95f"
secondary: "#0058be"
on-secondary: "#ffffff"
secondary-container: "#2170e4"
on-secondary-container: "#fefcff"
tertiary: "#00658b"
on-tertiary: "#ffffff"
tertiary-container: "#1abdff"
on-tertiary-container: "#004966"
error: "#ba1a1a"
on-error: "#ffffff"
error-container: "#ffdad6"
on-error-container: "#93000a"
primary-fixed: "#ffddb8"
primary-fixed-dim: "#ffb95f"
on-primary-fixed: "#2a1700"
on-primary-fixed-variant: "#653e00"
secondary-fixed: "#d8e2ff"
secondary-fixed-dim: "#adc6ff"
on-secondary-fixed: "#001a42"
on-secondary-fixed-variant: "#004395"
tertiary-fixed: "#c5e7ff"
tertiary-fixed-dim: "#7fd0ff"
on-tertiary-fixed: "#001e2d"
on-tertiary-fixed-variant: "#004c6a"
background: "#f9f9ff"
on-background: "#151c27"
surface-variant: "#dce2f3"
typography:
display:
fontFamily: Plus Jakarta Sans
fontSize: 44px
fontWeight: "800"
lineHeight: 52px
letterSpacing: -0.02em
headline-lg:
fontFamily: Plus Jakarta Sans
fontSize: 32px
fontWeight: "700"
lineHeight: 40px
letterSpacing: -0.01em
headline-md:
fontFamily: Plus Jakarta Sans
fontSize: 24px
fontWeight: "700"
lineHeight: 32px
title-lg:
fontFamily: Plus Jakarta Sans
fontSize: 20px
fontWeight: "600"
lineHeight: 28px
body-lg:
fontFamily: Plus Jakarta Sans
fontSize: 18px
fontWeight: "400"
lineHeight: 28px
body-md:
fontFamily: Plus Jakarta Sans
fontSize: 16px
fontWeight: "400"
lineHeight: 24px
label-md:
fontFamily: Plus Jakarta Sans
fontSize: 14px
fontWeight: "600"
lineHeight: 20px
letterSpacing: 0.01em
label-sm:
fontFamily: Plus Jakarta Sans
fontSize: 12px
fontWeight: "500"
lineHeight: 16px
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
base: 8px
xs: 4px
sm: 12px
md: 24px
lg: 40px
xl: 64px
gutter: 16px
margin: 24px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.label-md}"
rounded: "{rounded.lg}"
padding: "{spacing.md}"
button-primary-hover:
backgroundColor: "{colors.primary-container}"
textColor: "{colors.on-primary-container}"
button-secondary:
backgroundColor: "{colors.secondary}"
textColor: "{colors.on-secondary}"
typography: "{typography.label-md}"
rounded: "{rounded.lg}"
padding: "{spacing.md}"
button-secondary-hover:
backgroundColor: "{colors.secondary-container}"
textColor: "{colors.on-secondary-container}"
card-profile:
backgroundColor: "{colors.surface-container-lowest}"
rounded: "{rounded.xl}"
padding: "{spacing.md}"
card-walk-stat:
backgroundColor: "{colors.secondary-container}"
textColor: "{colors.on-secondary-container}"
rounded: "{rounded.md}"
padding: "{spacing.sm}"
input-field:
backgroundColor: "{colors.surface-container-low}"
textColor: "{colors.on-surface}"
typography: "{typography.body-md}"
rounded: "{rounded.DEFAULT}"
padding: "{spacing.sm}"
list-item-walker:
backgroundColor: transparent
padding: "{spacing.sm}"
rounded: "{rounded.md}"
list-item-walker-hover:
backgroundColor: "{colors.surface-container-high}"
badge-status:
backgroundColor: "{colors.tertiary-container}"
textColor: "{colors.on-tertiary-container}"
typography: "{typography.label-sm}"
rounded: "{rounded.full}"
padding: "{spacing.xs}"Brand & Style
The design system is built to evoke the joyful energy of a walk in the park balanced with the reliability of a premium professional service. The brand personality is optimistic, trustworthy, and active.
The chosen style is Modern Corporate with a friendly, human-centric twist. It utilizes clean layouts and significant whitespace to reduce cognitive load for busy pet owners. The interface feels light and airy, avoiding heavy borders in favor of soft shadows and tonal shifts to create a welcoming, “best-in-class” digital environment.
Colors
The palette centers on “Golden Retriever” orange to drive action and signal energy. This is balanced by “Sky Walk” blue, which provides a calming counterpoint for administrative tasks and scheduling.
- Primary: Use for main actions, active states, and highlights.
- Secondary: Use for secondary information, trust indicators, and navigation accents.
- Neutral: A range of soft grays used for backgrounds and borders to keep the UI feeling “premium.”
- Deep Charcoal: Used for all primary text to ensure high legibility and a grounded, professional feel.
Typography
This design system utilizes Plus Jakarta Sans for its friendly, rounded terminals and exceptional legibility. It maintains a contemporary look while feeling more approachable than standard geometric sans-serifs.
- Headlines: Bold weights are used to create a clear hierarchy and guide the eye quickly to key information.
- Body: Generous line heights are applied to the body text to maintain the “premium and clean” feel.
- Labels: Used for buttons and small metadata, utilizing a medium or semi-bold weight to remain distinct even at small scales.
Layout & Spacing
The layout follows a Fixed Grid model for mobile-first consistency, utilizing a 4-column system for handheld devices.
- Whitespace: A “generous” philosophy is applied. Never crowd elements; use
lgandxlspacing for section vertical separation to maintain a high-end aesthetic. - Rhythm: Spacing is strictly based on an 8px scale.
- Containers: Content should be centered with a maximum width on larger screens, ensuring the “Paths” (user journeys) feel focused and intentional.
Elevation & Depth
This design system uses Ambient Shadows and Tonal Layers to define the interface’s verticality.
- Surfaces: Main backgrounds use the lightest neutral tint. Interactive cards sit one level above on a pure white surface.
- Shadows: Shadows are highly diffused and soft (Blur: 20px-40px, Opacity: 4-8%) with a subtle hint of the primary orange or secondary blue mixed into the shadow color to prevent a “dirty” gray look.
- Interactions: Elements should subtly lift on hover or tap, increasing shadow spread to provide tactile feedback.
Shapes
The shape language is defined by Rounded corners, mirroring the soft features of a pet and making the app feel safe and friendly.
- Buttons: Main CTA buttons use a
12px(rounded-lg) radius to feel substantial and clickable. - Cards: Dog profiles and walker cards use a
1.5rem(rounded-xl) radius to create a soft, containerized look. - Inputs: Form fields use a
0.5remradius to maintain a professional yet modern appearance. - Icons: Icons should feature rounded caps and corners to harmonize with the UI’s structural elements.
Components
Buttons & Inputs
Buttons use rounded-lg (12px) to feel substantial and friendly, while form fields use a smaller DEFAULT radius to maintain structural alignment. All interactive states should utilize a subtle 150ms ease-in-out transition for background color shifts.
Cards & Elevation
The card-profile is the hero container, utilizing rounded-xl and a tinted ambient shadow to create a “lifted” appearance against the surface background. Use card-walk-stat for high-contrast data visualization within the blue secondary palette.
Lists & Navigation
List items should maintain a wide touch target and use surface-container-high for hover states to provide clear feedback without visual clutter. Use the badge-status for pet availability or walk progress indicators, ensuring the typography remains legible at the smaller scale.
