google-labs-code--design.md/examples/paws-and-paths/DESIGN.md

name, colors, typography, rounded, spacing, components

name	colors	typography	rounded	spacing	components
Paws & Paths	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #f9f9ff #d3daea #f9f9ff #ffffff #f0f3ff #e7eefe #e2e8f8 #dce2f3 #151c27 #534434 #2a313d #ebf1ff #867461 #d8c3ad #855300 #855300 #ffffff #f59e0b #613b00 #ffb95f #0058be #ffffff #2170e4 #fefcff #00658b #ffffff #1abdff #004966 #ba1a1a #ffffff #ffdad6 #93000a #ffddb8 #ffb95f #2a1700 #653e00 #d8e2ff #adc6ff #001a42 #004395 #c5e7ff #7fd0ff #001e2d #004c6a #f9f9ff #151c27 #dce2f3	display headline-lg headline-md title-lg body-lg body-md label-md label-sm fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 44px 800 52px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 32px 700 40px -0.01em fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 24px 700 32px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 20px 600 28px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 18px 400 28px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 16px 400 24px fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 14px 600 20px 0.01em fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 12px 500 16px	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	base xs sm md lg xl gutter margin 8px 4px 12px 24px 40px 64px 16px 24px	button-primary button-primary-hover button-secondary button-secondary-hover card-profile card-walk-stat input-field list-item-walker list-item-walker-hover badge-status backgroundColor textColor typography rounded padding {colors.primary} {colors.on-primary} {typography.label-md} {rounded.lg} {spacing.md} backgroundColor textColor {colors.primary-container} {colors.on-primary-container} backgroundColor textColor typography rounded padding {colors.secondary} {colors.on-secondary} {typography.label-md} {rounded.lg} {spacing.md} backgroundColor textColor {colors.secondary-container} {colors.on-secondary-container} backgroundColor rounded padding {colors.surface-container-lowest} {rounded.xl} {spacing.md} backgroundColor textColor rounded padding {colors.secondary-container} {colors.on-secondary-container} {rounded.md} {spacing.sm} backgroundColor textColor typography rounded padding {colors.surface-container-low} {colors.on-surface} {typography.body-md} {rounded.DEFAULT} {spacing.sm} backgroundColor padding rounded transparent {spacing.sm} {rounded.md} backgroundColor {colors.surface-container-high} backgroundColor textColor typography rounded padding {colors.tertiary-container} {colors.on-tertiary-container} {typography.label-sm} {rounded.full} {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 lg and xl spacing 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.5rem radius 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.