Keyhan Bebek

Keyhan Bebek — Design Specification

1. Overview

2. Design Style & Language

Primary style: Soft-UI / pastel tinted cards (styleHints: "soft-ui / layered elevation", "rounded / pill-heavy").

• Visual signature here: Every surface is a large rounded rectangle (--r-lg: 26px) filled with a very pale tint of its category color, bordered by a slightly deeper tint of the same hue (never a neutral gray border), and lifted with a single large soft shadow 0 8px 22px rgba(120,110,95,.08). Shadows are warm-brown-tinted, not black. Categories are color-coded:
• Feed/beslenme → apricot (--feed #f0a868, soft #fefaf1, border #f6ecd6, icon well #fbe6c4)
• Sleep/uyku → periwinkle (--sleep #6f8ad4, soft #f5f8fb, border #e3ebf3, icon well #dfe7f8)
• Diaper/bez → mint (--diaper #7fc8a9, soft #eef7f1, border #dcefe4)
• Medicine/ilaç → coral (--medicine #e88a8a, soft #fef7f1, border #f5dcdc)
• Note/not → lilac (--note #c79fe0, soft #f6eefb)
• Where applied: stat "bigcards", quick-action tiles, timeline rows, badges/time pills, chart cards.
• Rules for reuse on new pages:
• Pick one hue per functional category; derive its 3 shades: solid (icon/accent), ~92% pale (card bg), ~85% pale (border/icon well).
• Always pair a tinted card bg with a same-hue border — never a gray 1px border on a tinted card.
• Use serif (Fraunces 700) ONLY for the primary numeric/name value; everything else stays Inter.
• Icon lives in a circular tinted well (50% radius, 44–58px) at card top-left.
• One warm soft shadow per elevated element; never stack heavy/black shadows on light cards.

Secondary style: pill-heavy rounded UI. Time chips, category chips, avatars and nav elements use border-radius: 999px. Rule: interactive status/time labels are always fully-rounded pills tinted to their category, with a deeper-tone text color (e.g. feed pill #fbedd6 bg + #c98a3b text).

3. Design Principles

• Calm over contrast — pale tints, muted text (#6a7480), no pure-black on white.
• Color = meaning — hue encodes activity type consistently across cards, pills, charts.
• Serif for the headline number — Fraunces gives warmth/personality to the single most important value.
• Soft rounded everything — 14/18/26px radii + 999px pills; no sharp corners.
• Gentle depth — one low-opacity warm shadow, no hard edges.
• Uppercase eyebrows — section/label text is small, bold, tracked .06em, uppercase, in muted slate.

4. Color System

Brand / Category

Neutrals ramp

Semantic

Category soft surfaces

Dark mode: none detected. Design is light-only.

5. Gradients

6. Typography

Font link (verbatim):

https://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

Type scale

7. Spacing & Sizing

Base unit: 4px. Common tokens: 4, 6, 8, 10, 12, 14, 16, 18, 22, 24, 32px. Card gap = 16px; grid gap for actions = 12px. Tap target --tap: 56px.

8. Layout & Grid

• Content container: max-width: 560px, centered, side padding 22px. Mobile-first single column.
• .cards-stack: 2 columns 1fr 1fr, gap 16px.
• .action-grid: 4 columns, gap 12px, min tile height 116px.
• Timeline: grid-template-columns: auto 1fr auto, gap 14px.
• No formal breakpoints in source (mobile app); for preview stack .cards-stack and .action-grid at ≤560px if needed.

9. Borders & Radius

Borders: 1px, tinted to card hue or --line #ece4d8.

10. Shadows & Elevation

Strategy: single warm-brown-tinted soft shadow per surface. No double contact+ambient; warmth comes from the rgba(120,110,95) tint rather than neutral black.

11. Effects

• No glassmorphism / backdrop-filter (glassRules empty).
• Timeline "thread": a 2px vertical connector #e3ddf0 behind icon wells (left:29px; top:62px; bottom:-1px).
• Bottom-sheet backdrop rgba(0,0,0,.55).
• Tab icons desaturated with filter: grayscale(1) opacity(.55), active clears filter.

11b. Animated Background

None. The page background is a flat #fefefe. Do not add animated blobs.

12. Animation & Motion

Durations: fade .25s/.2s/.15s ease; sheet slideup .28s cubic-bezier(.2,.8,.2,1); bar/width transitions .4s ease; press transform .08s ease.

Keyframes:

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

• Screen enter: .screen { animation: fade .25s ease; }
• Bottom sheet: slideup .28s cubic-bezier(.2,.8,.2,1).
• Press feedback: .action:active{transform:scale(.96)}, buttons scale(.98).
• No scroll-reveal / IntersectionObserver in source; motion is class-toggle + entrance fades.
• Reduced motion: source disables all animation/transition under prefers-reduced-motion: reduce.

12b. Required JavaScript

Mostly CSS-only for the visible dashboard. The companion animations.js provides an optional entrance-fade reveal ([data-reveal] with [data-reveal-delay]) matching the fade keyframe, plus a .scrolled nav-state helper — guarded by reduced-motion. The static screenshot needs no JS to look correct.

13. Components

Button (Primary)

Button (Ghost)

bg #f3eee7, border 1px #ece4d8, color #2f3a44, same radius/height.

Bigcard

Tinted bg + same-hue border, 26px radius, padding 22px 20px 20px, shadow card. 58px circular icon well top-left, uppercase colored label, serif value, thin divider rgba(120,120,120,.14), muted meta row.

Time pill / Badge

border-radius:999px; padding:6px 12px; font-weight:700; font-size:.92rem; tinted bg + deeper text per category.

Action tile

min-height 116px, tinted bg + border, centered icon + label, radius 26px, active scale(.96).

Timeline row

grid auto 1fr auto, 50px circular tinted icon well, bold title with muted soft span, right-aligned time pill.

Caregiver chip

Pill: padding:11px 16px; border-radius:999px; border:1px #ece4d8; box-shadow chip; 26px avatar + name (600) + chevron.

Input

height 56px, bg #fefefe, border 1px #ece4d8, radius 18px, padding 0 14px, font 1.05rem.

14. Iconography

Uses colorful 3D-style raster PNG emoji-icons (bottle, diaper, medicine, note, moon) sized 32–52px inside circular tinted wells. In recreations without those assets, substitute native emoji (🍼 🧷 💊 📝 🌙) or inline SVG at similar scale. Tab icons 24px, grayscaled when inactive.

15. Imagery & Media

Rounded circular avatar photos (62px brand, 26px chip). Playful 3D-render icon style. No hero photography; illustration/emoji-driven.

16. Accessibility

17. Design Tokens (copy-paste)

:root{
  --bg-0:#fefefe; --bg-1:#fefefe; --card:#fff; --card-2:#f3eee7;
  --line:#ece4d8; --text:#2f3a44; --dim:#8a93a0;
  --feed:#f0a868; --feed-soft:#fdf3e3;
  --sleep:#6f8ad4; --sleep-soft:#eef2fb;
  --diaper:#7fc8a9; --diaper-soft:#eef7f1;
  --note:#c79fe0; --note-soft:#f6eefb;
  --medicine:#e88a8a; --medicine-soft:#fef7f1;
  --danger:#e07a7a;
  --r-lg:26px; --r-md:18px; --r-sm:14px; --tap:56px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --shadow-card:0 8px 22px rgba(120,110,95,.08);
  --shadow-soft:0 6px 18px rgba(120,110,95,.06);
}

18. Guardrails

• Never use gray neutral borders on tinted cards — border must be a deeper tint of the card hue.
• Never use pure black text or heavy black shadows on light surfaces; keep shadows warm and low-opacity.
• Keep serif (Fraunces) exclusive to the primary number/name — do not set body copy in serif.
• Do not break the one-hue-per-category color coding.
• Keep radii large (14/18/26/999) — no sharp corners.
• No dark mode, no glassmorphism, no animated background blobs.