Style Guide · v2.0

TrueBlue
Property Management

Visual Language & Design System
For DevsWordPress / Elementor build — set up 08. Elementor Handoff: Global Colors, Global Fonts & Theme Style.↓
01

Χρώματα

Deep Denim Blue
#344E73
Primary · Backgrounds · Headings
Burned Copper
#B07D62
Accent · CTAs · Highlights
Terracotta Light
#C4957A
Button hover · Soft accent
Champagne Stone
#E5D9C9
Sections / Panels · Warm base
Off White
#F8F8F8
Text on dark backgrounds

Functional Colors

Sand Light
#F5F1EB
Cards · Secondary bg
Heading
#3A3D4A
Headings · Dark text
Text
#51535C
Body text
Text on Dark
#F8F8F8
On navy bg
Text Muted
#8A95A3
Captions · Meta
02

Τυπογραφία

Typeface
Manrope
Light · Regular · Medium · SemiBold · Bold
Headings · Body · Labels · Navigation · CTAs
Weights
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Role Specimen Specs HTML Tag
Display Managing Today, Building Tomorrow. 30040–64pxlh 1.05ls −1.7 <h1>
H1 Managing Today 40032–48pxlh 1.1 <h1>
H2 Building Tomorrow 30028–40pxlh 1.15 <h2>
H3 Ολοκληρωμένες Λύσεις 40022–28pxlh 1.25 <h3>
H4 For Your Home 50018–20pxlh 1.4 <h4>
Overline Services · Property Management 70013pxlh 1.4ls +3 <span> / <p>
Subtitle Μέγιστη απόδοση για το ακίνητό σας. 40018–20pxlh 1.5 <p>
Body 1 Αναλαμβάνουμε πλήρως τη διαχείριση βραχυχρόνιας μίσθωσης και επενδύσεων φιλοξενίας. 50016pxlh 1.6 <p>
Body 2 Δουλεύουμε γρήγορα, με συνέπεια, χωρίς εκπλήξεις. Η επένδυσή σας σε άριστα χέρια. 40014pxlh 1.6 <p>
Caption Your Property, Our Business · Volos, Greece 40012pxlh 1.5ls +0.5 <figcaption> / <p>
Nav Link Services 70013pxlh 1.3ls +0.5 <a>
Fluid scale · clamp() & line-height reference
Display
clamp(40px, 30.1px + 2.65vw, 64px)
lh 1.05
H1
clamp(32px, 25.4px + 1.77vw, 48px)
lh 1.1
H2
clamp(28px, 23px + 1.33vw, 40px)
lh 1.15
H3
clamp(22px, 19.5px + 0.66vw, 28px)
lh 1.25
H4
clamp(18px, 17.2px + 0.22vw, 20px)
lh 1.4
Subtitle
clamp(18px, 17.2px + 0.22vw, 20px)
lh 1.5
Overline
13px (fixed)
lh 1.4
Body 1
16px (fixed)
lh 1.6
Body 2
14px (fixed)
lh 1.6
Caption
12px (fixed)
lh 1.5
Nav Link
13px (fixed)
lh 1.3
Desktop · Full width
Managing
Tomorrow.
Display · 64px · Light · lh 1.05
Managing Today
H1 · 48px · Regular
For Your Home
H2 · 40px · Light
Property Services
H3 · 28px · Regular
Short-Term Rentals
H4 · 20px · Medium
Μέγιστη απόδοση για το ακίνητό σας.
Subtitle · 20px · Regular
Αναλαμβάνουμε πλήρως τη διαχείριση βραχυχρόνιας μίσθωσης και επενδύσεων φιλοξενίας.
Body 1 · 16px · Medium · unchanged
Tablet · ≤960px
Managing
Tomorrow.
Display · 48px
Managing Today
H1 · 38px
For Your Home
H2 · 32px
Property Services
H3 · 24px
Short-Term Rentals
H4 · 18px
Αναλαμβάνουμε πλήρως τη διαχείριση βραχυχρόνιας μίσθωσης.
Body 1 · 16px · unchanged
Mobile · ≤640px
Managing
Tomorrow.
Display · 40px
Managing Today
H1 · 32px
For Your Home
H2 · 28px
Property Services
H3 · 22px
Short-Term Rentals
H4 · 18px
Αναλαμβάνουμε τη διαχείριση βραχυχρόνιας μίσθωσης.
Body 1 · 16px · unchanged
Sizes shown are the clamp() endpoints — Desktop = max, Mobile = min, fluid in between. Line-height stays constant per role (see reference above).
03

Buttons & CTAs

On Light Background ΞΕΚΙΝΗΣΤΕ ΣΥΝΕΡΓΑΣΙΑ › ΑΚΙΝΗΤΑ ΔΕΙΤΕ ΠΕΡΙΣΣΟΤΕΡΑ
On Deep Denim Blue · same buttons ΞΕΚΙΝΗΣΤΕ ΣΥΝΕΡΓΑΣΙΑ › ΑΚΙΝΗΤΑ ΔΕΙΤΕ ΠΕΡΙΣΣΟΤΕΡΑ
Padding
24px sides · 12px top/bottom
Corner radius
30px
Height
46px · hug content
Primary fill
#C4957A — terracotta-light
Font
Manrope · 700 · 13px · ls 1.5 · uppercase
Hover
lift + darken · ΑΚΙΝΗΤΑ on dark → Sand Light #F5F1EB
04

Spacing

ΣΧΕΣΗ ΕΜΠΙΣΤΟΣΥΝΗΣ

16px

FOR YOUR HOME

16px

Διαχείριση με αίσθηση
φιλοξενίας

20px
20px

Μετατρέπουμε το ακίνητό σας σε έναν κορυφαίο προορισμό. Διαχειριζόμαστε βραχυχρόνιες ενοικιάσεις ακινήτων και ιδιωτικών κατοικιών με ένα πλήρες φάσμα υπηρεσιών.

32px
ΞΕΚΙΝΉΣΤΕ ΣΥΝΕΡΓΑΣΙΑ ›
Annotated gap — CSS spacing value between elements
05

Navigation

Menu / Header — interactive prototype (όπως στις μακέτες)
+30 2410 000 000
Font
Manrope · Bold 700
Size
12px
Line Height
15.6px
Letter Spacing
0.4px
Default Color
#344E73 — navy
Hover
colour unchanged · terracotta underline slides in
Active / Current
terracotta underline — persistent
Menu items
HOME TRUEBLUE · ΥΠΗΡΕΣΙΕΣ ˅ · ΣΥΝΕΡΓΑΤΕΣ · ΓΝΩΡΙΣΤΕ ΜΑΣ · BLOG
Right side
social (FB · IG) + τηλέφωνο · σελίδα Επικοινωνίας εκτός menu
06

Spacing Scale

4
xs
8
sm
12
—
16
md
24
lg
32
xl
48
2xl
64
3xl
96
section
4–8 · chips, micro labels
12–16 · inside cards, button padding
24–32 · between elements
48–64 · between sections
96 · major section break
07

Radius

4px
Inputs / chips
8px
Form controls
99px
Full / circle
Card radius · in context
Property card / image
40pxΜεγάλες κάρτες & εικόνες
30pxΜικρότερες κάρτες
✗ 40pxσε μικρή κάρτα — υπερβολικό
Το 40px ισορροπεί σε μεγάλες επιφάνειες (κάρτες & εικόνες). Στις μικρότερες κάρτες δείχνει δυσανάλογα στρογγυλό, γι’ αυτό χρησιμοποιούμε 30px.
08

Elementor Handoff

Set these once in Site Settings so every widget inherits them — Colors → Global Colors, type → Global Fonts + Theme Style. Spacing, radius & shadow are applied per widget (values from sections 04–07).
⚠ Elementor typography is per-breakpoint — use the Desktop / Tablet / Mobile sizes; enter clamp() only via Custom CSS.

Global Colors · Site Settings ▸ Global Colors

Deep Denim Blue
#344E73
System ▸ Primary
Burned Copper
#B07D62
System ▸ Accent
Terracotta Light
#C4957A
Custom · button fill
Champagne Stone
#E5D9C9
Custom · Sand
Sand Light
#F5F1EB
Custom
Page Background
#F7F5F1
Custom
White
#FFFFFF
Custom
Heading
#3A3D4A
System ▸ Secondary
Body Text
#51535C
System ▸ Text
Text on Dark
#F8F8F8
Custom
Muted
#8A95A3
Custom
Divider
#D8D0C4
Custom

Global Fonts · Site Settings ▸ Global Fonts  — Family: Manrope (300–700)

Preset
Weight
px · D/T/M
LH
LS
Case
Display
300
64 / 48 / 40
1.05
−1.7
—
H1
400
48 / 38 / 32
1.1
—
—
H2
300
40 / 32 / 28
1.15
—
—
H3
400
28 / 24 / 22
1.25
—
—
H4
500
20 / 18 / 18
1.4
—
—
Subtitle
400
20 / 18 / 18
1.5
—
—
Overline
700
13
1.4
3
UPPER
Body 1
500
16
1.6
—
—
Body 2
400
14
1.6
—
—
Caption
400
12
1.5
0.5
—
Nav Link
700
13
1.3
0.5
UPPER
Button
700
13
1.0
1.5
UPPER

Theme Style defaults · Site Settings ▸ Theme Style

H1 tag
Manrope 400 · 48/38/32 · lh 1.1
H2 tag
Manrope 300 · 40/32/28 · lh 1.15
H3 tag
Manrope 400 · 28/24/22 · lh 1.25
H4 tag
Manrope 500 · 20/18 · lh 1.4
Body / Paragraph
Body 1 — Manrope 500 · 16 · lh 1.6
Links
On Champagne Stone → Burned Copper #B07D62 (hover Navy)
On Deep Denim Blue → Sand Light #F5F1EB (hover Terracotta Light)
Buttons
Button preset · padding 12×24 · radius 30 · colors per mockup
Images
Border-radius 40px (cards & images) · 30px smaller cards
Form fields
Radius 8px · (full field states not yet specced)
Style Guide v2.0 · 2026 · Locked for Review