Keyhan Bebek

Design Specification — Keyhan Bebek

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FEFEFE), ink text (#2A1C0D), a vivid accent (#D9943F). Display headings use a distinct face (var(--serif)) over the body stack ('Inter'). Detected font weights: 400, 500, 600, 700. Detected style signatures: soft-ui / layered elevation; rounded / pill-heavy.

Logo asset(s): https://omegabilisim.com.tr/bebek/icons/favicon.ico

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(170deg, 0%, 100%)
• linear-gradient(to top, #5a72c0, #8fa3e0)
• linear-gradient(to top, #6fb3e0, #a7d2f0)
• linear-gradient(to top, #b98a5a, #d4a97c)

> 2 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Inter — stack: 'Inter'

Display / heading typeface: var(--serif) (used for large headings; body uses the primary stack)

Font stacks (most used first)

• 'Inter'
• 'Fraunces'
• var(--serif)
• var(--sans)
• inherit

Web font sources

• fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 6px 18px rgba(120,110,95,.06)
• 0 4px 14px rgba(193,150,90,.25)
• 0 4px 12px rgba(120,110,95,.08)
• 0 8px 22px rgba(120,110,95,.08)
• 0 8px 22px rgba(120,110,95,.06)
• 0 8px 24px rgba(0,0,0,.25)
• 0 -4px 20px rgba(120,110,95,.06)
• 0 8px 24px rgba(0,0,0,.4)

Animation & Motion

Transitions

• transform .08s ease
• height .4s ease
• background .2s
• transform .2s
• filter .15s ease

Easing curves

• cubic-bezier(.2,.8,.2,1)

Keyframes

@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideup { from { transform: translateY(100%); } to { transform: none; } }

Animations

• fade .25s ease
• fade .15s ease
• fade .2s ease
• slideup .28s cubic-bezier(.2,.8,.2,1)
• none !important

CTA labels found on page

• Giriş yap
• ‹
• ›
• + Bakıcı ekle
• Ayarları kaydet
• Parolayı güncelle

Source Design Tokens (CSS custom properties)

:root {
  --body-bg: #fefefe;
  --body-color: var(--text);
  --primary: #2a1c0d;
  --brand: #6c7682;
}

Do's and Don'ts

Do

• Do reserve the accent #D9943F for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FEFEFE; surfaces should stay within the detected neutral ramp.
• Do set large headings in var(--serif) with tight tracking (-.01em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 400, 500, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FEFEFE;
  --color-primary: #2A1C0D;
  --color-accent: #D9943F;
  --color-surface: #FAF3E6;
  --color-text-primary: #2A1C0D;
  --color-secondary: #2A1C0D;
  --color-text-secondary: #786E5F;
  --color-border: #DFE7F8;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #2A1C0D;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FEFEFE;
  --color-surface-container: #F8F8F1;
  --color-surface-container-high: #F2F0EC;
  --color-surface-container-highest: #EAEADE;
  --font-sans: 'Inter';
  --font-size-display: 48px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 29.6px;
  --font-size-title-lg: 19.2px;
  --font-size-body-lg: 18.4px;
  --font-size-body-md: 16.8px;
  --font-size-label-md: 14.4px;
  --font-size-label-sm: 12.8px;
  --radius-sm: 3px;
  --radius-md: 12px;
  --radius-pill: 9999px;
  --shadow-sm: 0 6px 18px rgba(120,110,95,.06);
  --shadow-md: 0 8px 22px rgba(120,110,95,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --font-display: var(--serif);
  --tracking-display: -.01em;
  --tracking-label: .06em;
}