{{ __('messages.meta.author') }} {{ __('messages.dashboard.leads_dashboard') }} / {{ __('messages.dashboard.design_system_page.breadcrumb_current') }}
@auth {{ Auth::user()?->name }} @endauth
@csrf
{{ __('messages.dashboard.site') }}

{{ __('messages.dashboard.design_system_filter_hint') }}

{{-- 1 Overview --}}

Overview

Internal source of truth for Criazo’s production Laravel + Blade + Tailwind (CDN) stack. Patterns are mined from active views including layouts/app.blade.php, dashboard lead views, programmatic service/industry URLs, analytics hooks, and lead tracking APIs.

  • Marketing UI: Tailwind extended palette in layouts/app (neutral + criazo ramps).
  • Dashboard UI: Inline Tailwind config in dashboard/leads/index.blade.php plus Inter typography.
  • Deep markdown reference: repo folder docs/design-system/.
  • This page intentionally adds meta robots noindex; still keep it behind Laravel auth.
{{-- 2 Brand --}}

Brand principles

Positioning

Senior digital consultancy tone: multilingual, multi-market, programmatic SEO breadth without looking templated: craft remains “premium Lisbon agency with global footprint”.

Visual shorthand

Teal kinetic accent (#00b7b2) on neutral monochrome structures, generous whitespace, pill CTAs implying modern product discipline.

#00b7b2 primary
#00a09c hover
#30d158 success (Tailwind semantic in layout)

Do

  • Reuse translation keys (__()) everywhere on marketing.
  • Use rounded-full CTAs where hero actions exist today.
  • Preserve explore-site footer component for internal linking continuity.

Don’t

  • Introduce saturated accent colors unrelated to teal ramp.
  • Flatten hierarchy with walls of uninterrupted body copy.
  • Copy dashboard manifest into public blades.
{{-- 3 Tokens --}}

Design tokens

@foreach(['colors_criazo_scale' => 'Criazo ramp','colors_neutral_scale' => 'Neutral ramp','semantic_tailwind_aliases' => 'Semantic Tailwind aliases'] as $tk => $label) @isset($tokens[$tk])

{{ $label }}

@foreach($tokens[$tk] as $row) @endforeach
TokenValue / usage
{{ $row['token'] ?? ($row['tailwind'] ?? '-') }} {{ $row['hex'] ?? $row['maps_to'] ?? $row['usage'] ?? '' }}
@endisset @endforeach
@if(!empty($tokens['motion']))

Motion

    @foreach($tokens['motion'] as $m)
  • {{ $m['item'] ?? '' }}: {{ $m['value'] ?? '' }} ({{ $m['source'] ?? 'see tokens.php' }})
    • @endforeach
@endif
{{-- 4 Colors preview --}}

Colours (live previews)

@foreach($tokens['colors_criazo_scale'] as $chip)

{{ str_replace(['criazo.', 'neutral.'], '', $chip['token']) }}

@endforeach
Gradient sample (contact hero)
background: linear-gradient(to bottom, #ecf4f5 0%, #ffffff 100%);

Semantics

Success badges Warning / urgency Accent chips
{{-- 5 Typography --}}

Typography

Marketing scale (Tailwind fonts)

Responsive hero headline

Supporting sub-headline rhythm

Body reference on dark panel for contrast previews only: default marketing body uses dark text on white.

Stacks

@foreach(array_merge($tokens['typography_public'] ?? [], $tokens['typography_dashboard'] ?? []) as $tp)
{{ $tp['item'] }}
{{ $tp['value'] }}
@endforeach
{{-- 6 Spacing --}}

Spacing

{{ implode(' ', $tokens['spacing_scale_tailwind_defaults'] ?? []) }}

@foreach([2,4,6,8,12,16,24] as $s)
{{ $s }}
@endforeach

Example stacking

gap-3
px-6 py-3
{{-- 7 Layout Grid --}}

Layout & grid

Marketing pages overwhelmingly depend on Tailwind adaptive grids (md:grid-cols-*, asymmetrical homepage hero).

@for($c=1;$c<=12;$c++)
{{ $c }}/12 col sample
@endfor
  • {{ implode(' ', $tokens['breakpoints_tailwind_defaults'] ?? []) }}
{{-- 8 Containers --}}

Containers

@foreach($tokens['containers_max_width'] as $cw)
{{ $cw['context'] }}{{ $cw['class'] }}
@endforeach
Typical Blade wrapper
<section class="site-container">
  ...
</section>
{{-- 9 Buttons --}}

Buttons

Primary pill Secondary outline
Markup sample
@verbatim 
CTA
@endverbatim

When to use

  • Primary pill for decisive conversion leaps.
  • Neutral outline for secondary exploratory actions.
  • Sticky CTA bar uses compact pill sizing.

Anti-patterns

  • Mixing square buttons on marketing unless matching calculator UI.
  • Inverting colors (dark button on dark hero slab without WCAG QA).
{{-- 10 CTA --}}

CTA systems

Sticky CTA pulls from partial components/sticky-cta-bar.blade.php with contextual props.

@include('components.sticky-cta-bar', ['stickyCtaTitle' => 'Sticky CTA preview (live partial)', 'stickyCtaContactUrl' => '#', 'stickyCtaSimulateUrl' => '#'])
Include partial
@verbatim
@include('components.sticky-cta-bar', [
    'stickyCtaTitle' => __('messages.services.get_started_now'),
    'stickyCtaContactUrl' => $localizedRoute('contact.index'),
    'stickyCtaServiceSlug' => $slug,
])
@endverbatim
Footer mega CTA + dark hero CTAs mimic high-contrast palettes: ensure link focus rings remain visible (#00b7b2 halo in layouts/app).

Conversion notes

    {!! implode('', array_map(fn($x)=>'
  • '. e($x) .'
    • ', $conversionPatterns['primary_ctas'] ?? [])) !!}
{{-- 11 Forms --}}

Forms

  • Marketing forms must include CSRF meta + layout token for fetch-based tracking endpoints.
  • Contact page handles international phone masking per config/leads arrays.
  • Calculator uses segmented steps on /get-a-quote.
Lead API paths
POST /api/leads/capture
POST /api/leads/submit
POST /api/leads/form-started

Accessibility

  • Use visible labels (not placeholders alone).
  • Pair inline errors with aria-describedby for live validation messaging.

SEO

Contact page emits ContactPage JSON-LD referencing canonical base.

{{-- 12 Cards --}}

Cards

Portfolio

Case study teaser

Rounded-xl media, textual hierarchy, CTA footer.

Inverted

Offer highlight

Used in pricing ladders + dark end caps.

{{-- dashboard card analogue --}}
128
Dashboard KPI
{{-- 13 Navigation --}} {{-- Header / Footer / Hero abbreviated --}}

Header patterns

Wrapper #site-header-wrapper + height 64px header. Region banner toggles has-region-banner class for mega menu vertical offset (see layouts/app critical CSS).

Footer patterns

Massive internal linking matrix for services × industries × cities with localized slugs + translation keys for anchor text variety.

Preview omitted for performance: reference components/footer.blade.php + docs/navigation.md.

Hero sections

Eyebrow

Hero title with accent span

Supporting copy block uses neutral-600 on white for accessible contrast.

PrimarySecondary

Section archetypes

Backed by resources/design-system/section-patterns.php: pair with docs/design-system/sections.md for authoring notes.

@foreach($sectionPatterns ?? [] as $seg)

{{ $seg['name'] ?? 'Section' }}

@if(!empty($seg['typical_files']))

Canonical files

    {!! implode('', array_map(fn($f)=> '
  • ' . e($f) .'
    • ', (array)$seg['typical_files'])) !!}
@endif @if(isset($seg['structure']))

{{ $seg['structure'] }}

@endif @if(isset($seg['cta']) || isset($seg['conversion']))

Conversion: {{ $seg['cta'] ?? $seg['conversion'] ?? '' }}

@endif @if(isset($seg['seo']))

SEO: {{ $seg['seo'] }}

@endif @if(isset($seg['a11y']))

A11y: {{ $seg['a11y'] }}

@endif
@endforeach
{{-- Page patterns summaries --}}

Service page patterns

@php $svc = collect($pagePatterns)->firstWhere('id','service_detail'); @endphp @if($svc)
Route
{{ $svc['route'] ?? '' }}
Controller
{{ $svc['controller'] }}
View
{{ $svc['view'] }}
Conversion
{{ $svc['conversion'] ?? '' }}
@endif

Close modules with components/explore-site-section.blade.php include and sticky CTA on long templates mirroring prod.

Industry + location patterns

Representative Blade: service-industry + service-industry-location. FAQs + comparative sections + OG metadata follow seo-patterns.

@foreach(array_filter($pagePatterns ?? [], fn ($p) => str_starts_with((string) ($p['id'] ?? ''), 'service_')) as $pat)
{{ $pat['title'] }}{{ $pat['route'] }}
@endforeach

Portfolio patterns

@php $port = collect($pagePatterns)->firstWhere('id','portfolio_detail'); @endphp

{{ $port['goal'] ?? 'Detail pages pair narrative + visuals + KPIs.' }}

  • Alt text aligns with hyphenated filenames in /public/images.
  • Cross-sell carousel via explore-site partial.

Blog patterns

@php $blog = collect($pagePatterns)->firstWhere('id','blog'); @endphp @if(($blog['status'] ?? '') === 'not_implemented')
Currently no blog routes ship in routes/web.php. Before launch, wire Article/WebPage schemas + listing grid following docs/page-patterns.md blueprint.
@endif

Future stack should reuse layouts.app typography + hero gradients for editorial flexibility.

Landing / vertical patterns

Programmatic pillar pages (/restaurants, /food-beverage/{child}, etc.) cascade through mirrored localized route groups mirroring VerticalLandingController.

Campaign usage: align UTMs + hero promise with industry dataset + sticky CTA to contact.

Local intent: optional trailing location slug rewriting story blocks + headings.

@php $dsDocsDir = trim((string) config('design-system.docs_directory', 'docs/design-system'), '/'); $dsDocLinks = glob(base_path($dsDocsDir).'/*.md') ?: []; @endphp

SEO patterns

Layout responsibilities

    @foreach($seoPatterns['layout_responsibilities'] ?? [] as $item)
  • {{ $item }}
    • @endforeach
@foreach(['title_rules','meta_description','slug_rules','structured_data_patterns','service_page_seo','localization','sitemaps','dashboard_isolation'] as $seoKey) @continue(empty($seoPatterns[$seoKey] ?? null))

{{ str_replace('_', ' ', $seoKey) }}

@if(is_array($seoPatterns[$seoKey]))
    @foreach($seoPatterns[$seoKey] as $line) @if(is_string($line))
  • {{ $line }}
    • @endif @endforeach
@else

{{ $seoPatterns[$seoKey] }}

@endif @endforeach

Central config reference: {{ $seoPatterns['central_config'] ?? 'config/seo.php' }}

Conversion patterns

@foreach(['primary_ctas','cta_placement_strategy','lead_capture','trust_placement','social_proof_patterns','analytics_attribution','things_to_avoid'] as $ckey) @continue(empty($conversionPatterns[$ckey] ?? null))

{{ str_replace('_', ' ', $ckey) }}

    @foreach((is_array($conversionPatterns[$ckey] ?? null) ? $conversionPatterns[$ckey] : []) as $line)
  • {{ $line }}
    • @endforeach
@endforeach

Content patterns

@foreach(['tone','voice_mechanics','hero_framework','service_page_stack','industry_vertical_stack','case_study_stack','blog_future','faq_copy_rules','credibility_hooks'] as $ck) @continue(empty($contentPatterns[$ck] ?? null))

{{ str_replace('_', ' ', $ck) }}

    @foreach((is_array($contentPatterns[$ck] ?? null) ? $contentPatterns[$ck] : []) as $line)
  • {{ $line }}
    • @endforeach
@endforeach

Motion & animations

  • smooth-transition uses 0.4s cubic-bezier(0.4,0,0.2,1) in layouts/app.
  • animate-slide-up timing differs between marketing and dashboard Tailwind configs.
  • Sticky CTA uses transform translate with duration-300.
  • prefers-reduced-motion in layouts/app collapses animated transitions: mirror for any new effects.
Pulse demo (Tailwind utility)

Accessibility

  • Global :focus-visible outline #00b7b2 with 2px offset (layouts/app).
  • Documented neutral text contrast helpers for body copy on white.
  • Mobile minimum 44px touch targets for interactive elements (max-width 767px rules).
  • sr-only label on design system search mirrors expected form labeling pattern.

Do

  • Single descriptive H1; logical heading cascade.
  • FAQ accordions exposing content that matches FAQ schema payloads.

Don’t

  • Announce layout changes solely through color swaps.
  • Remove focus outlines without replacing stronger affordances.

Dashboard UI shell

@foreach(['technology','shell','cards','filters','modals_dropdowns','auth'] as $dk) @continue(empty($dashboardPatterns[$dk] ?? null))

{{ str_replace('_', ' ', $dk) }}

    @foreach((is_array($dashboardPatterns[$dk] ?? null) ? $dashboardPatterns[$dk] : []) as $line)
  • {{ $line }}
    • @endforeach
@endforeach

Tables & data layouts

Operational UI favors responsive KPI grids over wide tables.

LeadStatusMarket
Example Co.SubmittedEurope
Another OrgHotUS
    @foreach($dashboardPatterns['tables_grids'] ?? [] as $line)
  • {{ $line }}
    • @endforeach

Empty states

Nothing here yet

Mirror the KPI card plus dual-line reassurance used in dashboard Blade @@forelse empty states.

@if(!empty($dashboardPatterns['states']))

Implementation notes

    @foreach(($dashboardPatterns['states'] ?? []) as $line)
  • {{ $line }}
    • @endforeach
@endif

Loading states

Marketing experiences are SSR-first; dashboard mutations often trigger full reloads after JSON success.

@for($i = 0; $i < 3; $i++)
@endfor Use pulse skeleton rows for new async surfaces so motion language stays consistent.

Error states

Destructive controls

Dashboard delete affordances pair text-red-600 with confirm() messaging.

HTTP 404

Route fallback returns errors.404 while keeping API JSON errors separate.

Full component inventory

Authoritative rows from resources/design-system/components.php.

@foreach(($components ?? []) as $comp)

{{ $comp['name'] }}

@if(isset($comp['path']))

{{ $comp['path'] }}

@endif
@if(isset($comp['include'])) @endif

{{ $comp['purpose'] ?? '' }}

@if(!empty($comp['variants']))

Variants: {{ implode(' · ', (array) $comp['variants']) }}

@endif @if(!empty($comp['props']) && is_array($comp['props']))

Props / overrides: {{ implode(', ', array_map(static fn ($p) => (string) $p, $comp['props'])) }}

@endif @if(!empty($comp['notes']))

{{ $comp['notes'] }}

@endif @if(isset($comp['include'])) 
{{ $comp['include'] }}
@endif
@endforeach

AI build guide (live)

Synced with resources/design-system/ai-guide.php and markdown twin docs/design-system/ai-build-guide.md.

Golden rules

    @foreach($aiGuide['golden_rules'] ?? [] as $rule)
  1. {{ $rule }}
    2. @endforeach

Embedded prompts

@foreach($aiGuide['prompts'] ?? [] as $key => $promptText)
{{ $key }} 
{{ $promptText }}
@endforeach
For extended narrative prompts, escalation guidance, and negative constraints, agents must still open the markdown dossier bundled in-repo.

Markdown documentation index

Filesystem paths omit http; use your IDE/Git client to browse.

    @foreach($dsDocLinks as $path) @php $relative = str_replace(base_path().DIRECTORY_SEPARATOR, '', $path); @endphp
  • {{ str_replace('\\', '/', $relative) }}
    • @endforeach @if(empty($dsDocLinks))
  • Markdown bundle not found: create docs/design-system files.
    • @endif