Keyhan Bebek

Keyhan Bebek — Design Specification

1. Overview

2. Design Style & Language

Soft-UI / Layered Elevation (primary style)

Signature: Cards use large corner radii (--r-lg: 26px), 1px borders that match the card's own tint (never a hard neutral grey), and large, low-opacity, warm-tinted ambient shadows — 0 8px 22px rgba(120,110,95,.08) and 0 6px 18px rgba(120,110,95,.06). The shadow color is a warm brown-grey (rgba 120,110,95) rather than pure black, keeping everything soft.

Where applied: big status cards, quick-action tiles, recent-activity panel, stat cards.

Rules for new pages:

• Every elevated surface uses radius ≥ 18px and a warm low-opacity shadow — never sharp black drop shadows.
• Borders are always a lighter tint of the surface's own hue (feed card → #f6ecd6, sleep card → #e3ebf3), giving a "frosted candy" edge.
• Keep contrast gentle: pastel fills, mid-grey text, no pure black backgrounds.

Category-tinted colour coding

Signature: Each functional domain has a dedicated pastel palette: Feed = amber, Sleep = blue, Diaper = mint, Note = lilac, Medicine = coral. Each has a "solid" token and a "-soft" background token.

Where applied: big cards, action tiles, timeline icon circles, timeline time-pills, chart bars.

Rules:

• Assign one hue per concept; surface = the -soft tint, icon circle = a slightly deeper tint, label + time-pill text = the deepest saturated variant.
• Never mix two category hues in one card except in explicit multi/summary layouts.
• Time/status pills echo the card's hue (feed pill #fbedd6/#c98a3b).

Pill-heavy rounded UI

Signature: border-radius: 999px on chips, avatars, icon circles, time pills, toasts, progress bars.

Rules: favour full-round pills for status/meta chips; use 50% circles for all icon containers.

3. Design Principles

• Warmth over sterility — warm off-white background (#fefefe) and warm-brown shadow tint make even white cards feel cozy.
• Colour = meaning — hue communicates the activity type consistently everywhere.
• Serif for the human moment — Fraunces serif for names, values and hero numbers; Inter for labels and body.
• Soft depth, no harsh lines — layered feather shadows, tinted borders, generous radius.
• Playful, tactile icons — 3D-style emoji/illustrated icons sit in tinted round wells.
• Calm density — generous whitespace, one clear action group at a time.

4. Color System

Brand / Category (solid + soft)

Neutrals ramp

Semantic

Deepest label variants

Dark mode: not implemented.

5. Gradients

6. Typography

Type scale:

7. Spacing & Sizing

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

8. Layout & Grid

• Mobile-first single column; content container max-width: 560px; margin: 0 auto.
• .screens has 22px horizontal padding, top corners rounded 26px.
• Big cards: 2-col grid 1fr 1fr, gap 16px.
• Quick actions: repeat(4, 1fr), gap 12px.
• No formal media breakpoints; stack at ~768px for demo purposes.

9. Borders & Radius

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

10. Shadows & Elevation

Strategy: single large soft warm-tinted ambient shadow per surface; only overlays use black shadows.

11. Effects

No backdrop-filter / glassmorphism present. Effects are limited to soft shadows, tinted fills, and grayscale/opacity icon filters on inactive tabs (filter: grayscale(1) opacity(.55)).

11b. Animated Background

None. Background is a flat warm white (#fefefe).

12. Animation & Motion

Durations: 0.15s (tooltip), 0.2s (toast/backdrop), 0.25s (screen fade), 0.28s (sheet), 0.4s (bar height/width). Easing: ease default, cubic-bezier(.2,.8,.2,1) for the bottom sheet.

Keyframes:

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

• Screen entrance: .screen { animation: fade .25s ease; }
• Bottom sheet: slideup .28s cubic-bezier(.2,.8,.2,1).
• Charts animate height/width .4s ease.
• Hover/press: buttons/actions transform: scale(.96–.98) on :active (transform .08s ease).
• Reduced motion: @media (prefers-reduced-motion: reduce) disables all animation/transition.

12b. Required JavaScript

Mostly CSS-driven. JS is used for class-toggle state changes (is-medicine, is-multi, is-asleep, sheet-open) and could drive a light entrance stagger. The companion animations.js implements optional [data-reveal] fade-up reveals matching the fade keyframe. Not required for the static first viewport.

13. Components

Button — Primary

Button — Ghost

bg #f3eee7, border 1px #ece4d8, color #2f3a44, radius 18px.

Card (bigcard)

Radius 26px, padding 22px 20px 20px, 1px tinted border, shadow-card. Icon well 58px circle. Label = eyebrow (uppercase, 0.82rem, 700, category color). Main value = Fraunces 1.85rem 700. Divider = rgba(120,120,120,.14) 1px. Meta row 0.82rem #6a7480.

Quick Action tile

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

Timeline row

grid auto 1fr auto; 50px circle icon well (tinted per category); title 1.05rem 700 with soft-weight (500, #6a7480) suffix; time-pill 999px radius, tinted bg + category text color, 700.

Badge / Pill (time-pill)

padding 6px 12px, radius 999px, category bg + category text, 700, tabular numerals.

Caregiver chip

white pill, 1px #ece4d8, radius 999px, padding 11px 16px, avatar 26px circle, shadow-chip.

Input

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

14. Iconography

Illustrated/3D emoji-style PNG icons (bottle, diaper, medicine, note, moon) sitting inside tinted circular wells (50% radius): 58px in big cards, 56px in actions, 50px in timeline, 44px in stat cards. Icon image 40/52/36/32px respectively. For recreation, use rich colored inline SVG or emoji; never grey placeholders. Inactive tab icons are grayscale(1) opacity(.55).

15. Imagery & Media

Rounded profile avatar photo (62px circle, warm shadow). Category icons are the primary imagery — soft 3D illustration aesthetic. No large photography.

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; --meta:#6a7480;
  --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 pure black shadows on cards — always warm rgba(120,110,95,...).
• Never give cards a hard grey border; match the border to the card's own tint.
• Don't swap the serif (Fraunces) for a sans on names/values — the serif carries the warmth.
• Keep one hue per category; don't recolor a feed element blue.
• Don't use flat 1px-outline-only cards — depth comes from soft shadow + radius.
• Amber buttons use dark-brown (#2a1c0d) text, never white.