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

Pull Quote

Ga op donderdagochtend naar de markt in het centrum. Niet de toeristen-markt op zaterdag, maar de echte lokale.
— Antoinette van Oosten, hoofdredacteur

Link Styles

Default link — inherits color, no underline Dit is een link
CTA link — terracotta, uppercase, weight 600 Bekijk alles

4. Buttons & CTAs

Button Variants

.btn .btn-primary
.btn .btn-gold
.btn .btn-outline

Button Sizes

Small (0.7rem, 0.5rem 1.5rem)
Default (0.875rem, 0.75rem 2rem)
Large (0.9rem, 0.875rem 2.5rem)

CTA with Arrow

Gold CTA (Hero style) Lees het artikel
Terracotta CTA (Agenda style) Bekijk de volledige agenda

Interaction States

Hover: background darkens to deep variant. Focus: 2px solid terracotta outline, 2px offset. Active: translateY(0) reset.

5. Cards

Marktplaats / Prikbord Item

Square photo (aspect-ratio 1:1), price overlay bottom-right, compact info below.

Meubels € 150
IKEA boekenkasten (2x) Wonen
Boeken 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.

Kantoor Premium
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

Beleef Jávea

Stranden, activiteiten en verborgen plekjes.

Bekijk alles

Without Link

Column van de Week

Een persoonlijke brief

Dark Variant

In de Spotlight

Uitgelichte Verhalen

De mooiste artikelen van de week, geselecteerd door de redactie.

Bekijk alles

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)

Clock
Pin
Bed
Bath
Area
Search
Arrow

Social Media Icons

Instagram
Facebook
X / Twitter
LinkedIn

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.