Color Style Guide — Developer Handoff

01

Color Palette

--color-heading

#011E2F

All headings (H1–H6)

--color-service-title

#004459

Service & section titles

--color-primary

#19829A

Primary CTA · btn bg · link icon

--color-card-bg

#C7FFFD

Card bg · secondary btn hover

--color-bg

#FDFDFD

Page / main background

--color-section

#F6F6F6

Secondary / alternating sections

--color-text

#5A5C5D

Body text · paragraphs

02

Buttons

Primary Button

Μάθετε Περισσότερα default

Background	#19829A (--color-primary)
Text color	#FFFFFF
Border	none
Padding	10px 24px
Radius	50px (full pill)
Font	Manrope 700 · 13px
Transition	bg-color + transform 0.22s ease-out

Hover → Μάθετε Περισσότερα

Hover bg	#011E2F (--color-heading)
Hover transform	translateX(4px)

Secondary Button

Δείτε Όλα default

Background	#FFFFFF
Text color	#19829A (--color-primary)
Border	1.5px solid #19829A
Padding	10px 24px
Radius	50px (full pill)
Font	Manrope 700 · 13px
Transition	bg-color + border + transform 0.22s ease-out

Hover → Δείτε Όλα

Hover bg	#C7FFFD (--color-card-bg)
Hover border	#C7FFFD (matches bg)
Hover transform	translateX(4px)

03

Link Button

i Used for secondary navigation links — e.g. "Δείτε Αναλυτικά" inside service cards or section footers. Not a fill-button. Relies on an icon circle rather than a border.

Default

Δείτε Αναλυτικά

Hover (simulated)

Δείτε Αναλυτικά

text color#011E2F fontManrope 700 · 13px icon circle36×36px · 50% radius icon bg default#19829A icon bg hover#011E2F hover transformicon translateX(5px) gap10px (text ↔ icon) transition0.22s ease-out

On dark background

Default

Δείτε Αναλυτικά

Hover (simulated)

Δείτε Αναλυτικά

On dark sections: text becomes #FDFDFD · icon stays #19829A · hover dims to 75%

04

CSS Variables Reference

/* ─── Design Tokens ──────────────────────────────────────── */
:root {

  /* Colors */
  --color-heading:        #011E2F;   /* headings */
  --color-service-title:  #004459;   /* service / section titles */
  --color-primary:        #19829A;   /* primary CTA */
  --color-primary-hover:  #011E2F;   /* primary btn hover bg */
  --color-card-bg:        #C7FFFD;   /* card bg · secondary btn hover */
  --color-bg:             #FDFDFD;   /* page / main bg */
  --color-section:        #F6F6F6;   /* secondary section bg */
  --color-text:           #5A5C5D;   /* body text */

  /* Buttons */
  --btn-padding:          10px 24px;
  --btn-radius:           50px;
  --btn-font-family:      'Manrope', sans-serif;
  --btn-font-size:        13px;
  --btn-font-weight:      700;
  --btn-transition:       background-color 0.22s ease-out, color 0.22s ease-out,
                           border-color 0.22s ease-out, transform 0.22s ease-out;
}

/* ─── Primary Button ─────────────────────────────────────── */
.btn-primary {
  background-color:  var(--color-primary);
  color:             #ffffff;
  border:            none;
}
.btn-primary:hover {
  background-color:  var(--color-primary-hover);
  transform:         translateX(4px);
}

/* ─── Secondary Button ───────────────────────────────────── */
.btn-secondary {
  background-color:  #ffffff;
  color:             var(--color-primary);
  border:            1.5px solid var(--color-primary);
}
.btn-secondary:hover {
  background-color:  var(--color-card-bg);
  border-color:      var(--color-card-bg);
  transform:         translateX(4px);
}

/* ─── Link Button ────────────────────────────────────────── */
.btn-link {
  display:           inline-flex;
  align-items:      center;
  gap:              10px;
  color:            var(--color-heading);   /* #FDFDFD on dark bg */
  font-family:      var(--btn-font-family);
  font-weight:      700;
  font-size:        13px;
  text-decoration:  none;
}
.btn-link__icon {
  width:            36px;
  height:           36px;
  border-radius:    50%;
  background-color: var(--color-primary);
  display:          flex;
  align-items:     center;
  justify-content: center;
  transition:       background-color 0.22s ease-out, transform 0.22s ease-out;
}
.btn-link:hover .btn-link__icon {
  background-color: var(--color-primary-hover);
  transform:        translateX(5px);
}