Refresh the app design system across core screens

README.md

@@ -6,6 +6,10 @@
 
 Dayova is currently native-only. Web support is intentionally not wired into local scripts or Expo config yet; track that work in https://github.com/Dayova/dayova-mvp/issues/32.
 
+## Dark mode support
+
+Dayova currently implements the light-mode design system only. Dark mode is intentionally not wired into Tailwind, NativeWind, or shared component tokens yet; track that work in https://github.com/Dayova/dayova-mvp/issues/136.
+
 ## Styling
 
 See [docs/styling.md](docs/styling.md) for NativeWind/Tailwind conventions, including the project-specific `tailwind-merge` configuration required for custom `text-*` size and color classes like `text-16 text-text`.

biome.jsonc

@@ -19,7 +19,7 @@
 			"knip.json",
 			"metro.config.js",
 			"package.json",
-			"tailwind.config.js",
+			"tailwind.config.ts",
 			"tsconfig.json",
 			"!convex/_generated"
 		]

components.json

@@ -4,7 +4,7 @@
 	"rsc": false,
 	"tsx": true,
 	"tailwind": {
-		"config": "tailwind.config.js",
+		"config": "tailwind.config.ts",
 		"css": "src/global.css",
 		"baseColor": "neutral",
 		"cssVariables": true

docs/contexts/design-system/CONTEXT.md

@@ -16,9 +16,49 @@ import or use `Switch` from `react-native`, and do not render Expo UI switches
 directly from app screens.
 
 The app `Switch` wraps Expo UI native controls with `Host matchContents`.
-Android uses the Jetpack Compose switch with explicit Dayova-blue colors so
+Android uses the Jetpack Compose switch with explicit Dayova primary colors so
 Material You wallpaper colors cannot override the brand. iOS keeps the native
-SwiftUI toggle shape and applies Dayova blue through the SwiftUI tint modifier.
+SwiftUI toggle shape and applies Dayova primary through the SwiftUI tint modifier.
+
+## Styling Tokens
+
+The app currently supports light mode only. The app background token is the
+Figma off-white (`#F6F6F4`), surfaces use white, and Tailwind's standard spacing
+scale is the source of truth for the 4px spacing system.
+
+The Figma light palette is the source of truth: primary/system cyan `#00BAFF`,
+primary strong/path 5 `#00A0E6`, path 7 `#4FD8FF`, primary text `#1A1A1A`,
+secondary text `#697586`, border `#DCE6EE`, light 2 `#F3F6FA`, and light 3
+`#FAFAFC`. The Figma orange `#FF9500` is the `wrong`/warning status color;
+`destructive` remains a separate functional action/error token. Dark-mode
+variables and classes should not be introduced until the dark-mode design is
+finalized.
+
+Typography uses Poppins only. Body text is Regular; headings, buttons, selected
+tabs, labels that need emphasis, and other highlighted text use SemiBold. The
+supported hierarchy is `heading-1` 32/48, `heading-2` 24/36, `body-1` 20/30,
+`body-2` 16/24, `body-3` 14/21, `body-4` 12/18, and `body-5` 10/15, all with
+0px letter spacing.
+
+Light-mode pill buttons have exactly two visual appearances: the light-mode
+gradient button and the black button using the primary text color `#1A1A1A`.
+There are no white pill buttons in the current light-mode design system. Both
+appearances are 56px tall with a 44px radius and a 0.3px inside stroke: gradient
+buttons use the vertical light-mode gradient `#00A0E6` top to `#4FD8FF` bottom
+with a white stroke, and black buttons use the light border token `#DCE6EE`.
+
+The current app corner system is: info/small boxes use 24px, 345px-wide
+rectangles and card-like surfaces use 32px, and buttons use 44px. Device frame
+radii are not app tokens because they depend on the phone/mockup. When nesting
+rounded surfaces, the outer radius equals the inner radius plus the padding
+between them.
+
+Dark-mode design-system support is planned separately in
+https://github.com/Dayova/dayova-mvp/issues/136. Do not add dark-mode tokens,
+classes, or fallback button variants until that source of truth is finalized.
+
+Icon-only close controls for sheets and modal chrome use the shared `CloseButton`
+component: path 2 background (`#D7DCE3`) with path 3 icon (`#8A8D92`).
 
 ## Notes
 

docs/styling.md

@@ -27,20 +27,19 @@ Tailwind uses the `text-*` prefix for multiple utility groups:
 - Text color: `text-white`, `text-primary`, or this app's custom `text-text`.
 - Text alignment and other text utilities: `text-center`, `text-left`, etc.
 
-This project defines custom numeric text sizes in `tailwind.config.js`:
+This project defines semantic text roles from the Figma design system in
+`tailwind.config.ts`. Numeric aliases exist only for low-level compatibility;
+new UI should prefer the semantic classes.
 
 ```js
 fontSize: {
-  12: ["12px", { lineHeight: "16.8px" }],
-  14: ["14px", { lineHeight: "19.6px" }],
-  16: ["16px", { lineHeight: "22.4px" }],
-  18: ["18px", { lineHeight: "25.2px" }],
-  20: ["20px", { lineHeight: "24px" }],
-  24: ["24px", { lineHeight: "28.8px" }],
-  28: ["28px", { lineHeight: "33.6px" }],
-  32: ["32px", { lineHeight: "38.4px" }],
-  40: ["40px", { lineHeight: "48px" }],
-  56: ["56px", { lineHeight: "67.2px" }],
+  "heading-1": ["32px", { lineHeight: "48px", letterSpacing: "0px" }],
+  "heading-2": ["24px", { lineHeight: "36px", letterSpacing: "0px" }],
+  "body-1": ["20px", { lineHeight: "30px", letterSpacing: "0px" }],
+  "body-2": ["16px", { lineHeight: "24px", letterSpacing: "0px" }],
+  "body-3": ["14px", { lineHeight: "21px", letterSpacing: "0px" }],
+  "body-4": ["12px", { lineHeight: "18px", letterSpacing: "0px" }],
+  "body-5": ["10px", { lineHeight: "15px", letterSpacing: "0px" }],
 }
 ```
 
@@ -66,7 +65,7 @@ The issue is `tailwind-merge` cannot infer every custom Tailwind token by defaul
 const twMerge = extendTailwindMerge({
   extend: {
     theme: {
-      text: ["12", "14", "16", "18", "20", "24", "28", "32", "40", "56"],
+      text: ["heading-1", "heading-2", "body-1", "body-2", "body-3", "body-4", "body-5", "10", "12", "14", "16", "20", "24", "32"],
     },
   },
 });
@@ -80,12 +79,30 @@ With that configuration:
 
 ## Maintenance Rules
 
-- When adding or removing custom `fontSize` tokens in `tailwind.config.js`, update the `theme.text` list in `src/lib/utils.ts`.
+- When adding or removing custom `fontSize` tokens in `tailwind.config.ts`, update the `theme.text` list in `src/lib/utils.ts`.
+- Use Tailwind's standard spacing scale. Spacing must stay on a 4px rhythm: `gap-1` is 4px, `gap-2` is 8px, `gap-3` is 12px, `gap-4` is 16px, and so on. Do not redefine spacing keys so class numbers mean raw pixels.
+- The app currently supports light mode only. Keep theme variables in `src/global.css` light-only until the dark-mode palette is fully designed.
+- The Figma typography source of truth is Poppins, Regular for body copy, and SemiBold for headings and highlighted text. Do not use `font-bold`, `font-medium`, or arbitrary `text-[Npx]` classes for app text.
+- Use `text-heading-1`, `text-heading-2`, `text-body-1`, `text-body-2`, `text-body-3`, `text-body-4`, and `text-body-5` for text hierarchy.
 - Use `cn()` for component class merging so variants, defaults, and caller-provided classes resolve consistently.
 - Do not replace `cn()` with direct `clsx()` in shared components unless you explicitly want to preserve all conflicting utilities.
-- Prefer pairing size and color explicitly on `Text` components, for example `text-14 text-text/60`, instead of relying on inherited defaults when readability matters.
+- Prefer pairing size and color explicitly on `Text` components, for example `text-body-3 text-text/60`, instead of relying on inherited defaults when readability matters.
 - Avoid adding color names that look like size names, and avoid adding size names that look like color names. The `text-*` namespace is shared and ambiguity increases merge risk.
 
+## Style Prop Exceptions
+
+Prefer NativeWind classes for static layout, color, typography, spacing, borders,
+and shadows. Keep `style` only when the value is runtime data or a native API
+constraint:
+
+- Safe-area, keyboard, measured width/height, and responsive scale calculations.
+- Reanimated animated styles and SVG/native component geometry.
+- Third-party component APIs that only expose `style`/`backgroundStyle` props.
+- Native text-input rendering resets such as Android `includeFontPadding`.
+
+When adding a new style prop, leave a nearby comment explaining which exception
+applies.
+
 ## Debugging Checklist
 
 If a class appears to change unrelated text styling:
@@ -99,4 +116,3 @@ node -e "const { cn } = require('./src/lib/utils.ts'); console.log(cn('text-16 t
 
 3. If importing TypeScript from Node is inconvenient, reproduce with `tailwind-merge` directly and mirror the config from `src/lib/utils.ts`.
 4. Verify the generated class order after `cn()` before debugging NativeWind rendering.
-

src/app/(app)/_layout.tsx

@@ -7,7 +7,6 @@ export default function AppLayout() {
 			tabBar={(props) => <BottomNav {...props} />}
 			screenOptions={{
 				headerShown: false,
-				sceneStyle: { backgroundColor: "#F6F4F7" },
 			}}
 		>
 			<Tabs.Screen name="home" options={{ title: "Startseite" }} />