Stranden De 10 mooiste stranden van Jávea
Van de bruisende Playa del Arenal tot het verborgen Cala Ambolo.
Design System
Style Guide
Een compleet overzicht van alle visuele elementen, componenten en patronen die worden gebruikt in het Jávea Connect Dutchies mockup.
1. Brand Identity
Jávea Connect Dutchies
Jávea Connect Dutchies
Tagline
Jouw gids voor het leven aan de Costa Blanca
Brand Voice
Warm, betrouwbaar, mediterraan, redactioneel
Logo Font
'Times New Roman', Times, serif — regular weight, letter-spacing: 0.04em
Logo Sub Font
'Outfit', sans-serif — weight 300, letter-spacing: 0.35em, uppercase
2. Color Palette
Primary
Terracotta
--terracotta #C2714F Terracotta Deep
--terracotta-deep #A85A3A Accent
Gold
--gold #B8922E Gold Light
--gold-light #D4A853 Nature
Olive
--olive #6B7F3B Olive Light
--olive-light #8FA34D Azure
--azure #2E86AB Neutral
Cream
--cream #FFF8F0 Cream Warm
--cream-warm #FFF1E0 Sand
--sand #F0E4D4 Dark
Brown Deep
--brown-deep #3D2B1F Brown Medium
--brown-medium #5C4033 Text
Text Primary
--text-primary #2C1810 Text Secondary
--text-secondary #5C4A3E Text Light
--text-light #8A7A6E Base
White
white #FFFFFF 3. Typography
Heading Font: 'Times New Roman', Times, serif
h1 — clamp(2rem, 5vw, 3.5rem)
De mooiste stranden van Jávea
h2 — clamp(1.5rem, 3.5vw, 2.5rem)
Proeven van Jávea
h3 — clamp(1.25rem, 2.5vw, 1.75rem)
Wandelen in het Montgo natuurpark
h4 — clamp(1.1rem, 2vw, 1.35rem)
Nieuwe regels voor vakantieverhuur
h5
Recept: Fideuà zoals de locals het maken
h6
Wekelijks vers uit de redactie
Body Font: 'Outfit', sans-serif
Paragraph — 16px, line-height 1.7
Na vijftien jaar in Amsterdam koos Antoinette voor het mediterrane leven. Een eerlijk verhaal over loslaten, opnieuw beginnen en de magie van een klein Spaans stadje aan zee. Jávea biedt alles wat je zoekt: zon, cultuur en een warme gemeenschap.
Small text — 0.875rem
14 maart 2026 · 8 min leestijd
Section Label
Uppercase, 0.7rem, weight 600, letter-spacing 0.25em Uitgelicht
Pull Quote
Ga op donderdagochtend naar de markt in het centrum. Niet de toeristen-markt op zaterdag, maar de echte lokale.
Link Styles
Default link — inherits color, no underline Dit is een link
CTA link — terracotta, uppercase, weight 600
Bekijk alles
5. Cards
ContentCard (Default)
ContentCard (Large Variant)
Property Card
With badge (Te Koop / Te Huur / Vakantie), price, specs (bed/bath/area). Featured variant has gold border + "Uitgelicht" badge.
Marktplaats / Prikbord Item
Square photo (aspect-ratio 1:1), price overlay bottom-right, compact info below.
€ 150 IKEA boekenkasten (2x) Wonen
Gratis Nederlandse boeken (doos) Overig
Week Agenda Event Card
Colored date block (left) + event info (right). Date block color maps to category.
Business Listing Card
Premium: gold border, image, logo block, contact info. Basic: no image, compact layout.
Premium CBM
Makelaars Costa Blanca Makelaars
Al meer dan 20 jaar de specialist in vastgoed aan de Costa Blanca.
Advocaten
Advocatenkantoor De Vries
Juridisch advies in het Nederlands. Gespecialiseerd in vastgoedrecht.
Spotlight Card (Dark Overlay)
Full-bleed photo with gradient overlay from bottom. Category badge with gold border (semi-transparent background). Title turns gold on hover. Used on dark (brown-deep) backgrounds.
6. Section Headers
Default (with link)
Vakantie
Bekijk alles Beleef Jávea
Stranden, activiteiten en verborgen plekjes.
Without Link
Column van de Week
Een persoonlijke brief
Dark Variant
In de Spotlight
Bekijk alles Uitgelichte Verhalen
De mooiste artikelen van de week, geselecteerd door de redactie.
7. Form Elements
Light Background
Dark Background (Newsletter)
8. Layout Patterns
Hero (Featured Article)
Full-viewport background image with gradient overlay. Content-driven: category badge, headline, excerpt, author, CTA button. Headlines ticker bar at the bottom.
Net Binnen (2/3 + 1/3 Editorial)
Large featured article on the left (2/3 width) with image overlay. Stacked smaller articles with thumbnails on the right (1/3 width).
Asymmetric Grid (3fr + 2fr)
Used in Uit & Eten: one large card with dark overlay (60%) + two stacked compact cards with thumbnails (40%).
Full-Width Quote
Cream-warm background, left border accent (terracotta), large decorative quotation mark. Italic serif text with attribution.
Column van de Week
Centered card (max-width 800px) with warm left accent bar (gold-to-terracotta gradient). Round author photo, italic title, personal tone.
Horizontal Carousel
CSS scroll-snap, 3 cards visible with 4th peeking. Gradient fade on right edge. Hidden scrollbar. Used for property listings (WonenSection).
Dark Spotlight (2 Cards)
Brown-deep background with warm radial gradients. Two side-by-side cards with cinematic photo overlays. Aspect ratio changes per breakpoint.
3-Column Grid
Standard grid: 1 column mobile, 2 columns tablet, 3 columns desktop. Gap: 2rem. Used for ContentCards in Vakantie section.
Week Agenda (Day Strip + Events)
Horizontal 7-day strip (scroll on mobile, grid on tablet+). Below: 2-column event card grid with colored date blocks.
Prikbord Grid (4 Columns)
2 columns mobile, 4 columns desktop. Square images (1:1). Sand background. Price overlay on image. Compact info below.
9. Icons & Badges
Category Badges
Restaurant Culinair Wonen Vakantie Stranden Activiteiten Natuur Persoonlijk verhaal Evenementen
Property Badges
Te Koop Te Huur Vakantie
Special Badges
Uitgelicht Premium Column van de Week
Icons (SVG, stroke-based)
Social Media Icons
10. Spacing & Grid
Container max-width
1280px Container padding (mobile)
1.5rem (24px) Container padding (tablet)
2rem (32px) Container padding (desktop)
3rem (48px) Section padding (mobile)
5rem (80px) Section padding (tablet+)
6rem (96px) Card gap (mobile)
1.5rem (24px) Card gap (desktop)
2rem (32px) Border radius (cards)
4px Border radius (inputs)
3px Header height (default)
120px Header height (scrolled)
72px 11. Breakpoints
Mobile
< 640px Single column, stacked layout, hamburger menu Tablet
768px 2 columns, desktop nav visible, side-by-side layouts Desktop
1024px 3 columns, expanded navigation, wider container padding Wide
1280px Container max-width reached, content centered 12. Motion & Animation
Card Hover (lift)
transform: translateY(-6px) Cards lift up on hover with enhanced shadow Image Hover (zoom)
transform: scale(1.06) Images scale up subtly inside their overflow:hidden wrapper Section Reveal
opacity 0 → 1, translateY(24px) → 0 Elements fade in and slide up when entering viewport Default Transition
0.3s ease Used for most interactive state changes (hover, focus) Image Transition
0.5s ease Slower, smoother transition for image transforms Spotlight Image
0.7s ease Even slower for cinematic spotlight cards Hero Animation
fadeInUp 0.8s ease, staggered delays 0.3s-1.2s Elements appear sequentially on page load Reduced Motion
prefers-reduced-motion: reduce All animations and transitions disabled. Scroll behavior set to auto.