codatta-mobile-frontier-template

name	codatta-mobile-frontier-template
description	Build mobile light-theme form pages with a specific design system. Use when creating mobile web pages, app-style form UIs, data collection templates, or task submission pages for mobile. Provides exact CSS values, component patterns (header, bottom drawer, success modal), and form state management for faithful UI reproduction.

Mobile Light-Theme Template

Guide for building mobile-first light-theme form/task pages. All styling uses CSS Modules (.module.css). No Tailwind, no Ant Design.

Design Tokens

Add to a shared tokens.css or the page's .module.css:

:root {
  /* Backgrounds */
  --color-bg-page: #F8F8F8;
  --color-bg-card: #FFFFFF;
  --color-bg-card-alt: #F5F5F5;

  /* Accent */
  --color-accent: #40E1EF;
  --color-accent-bg: rgba(64, 225, 239, 0.08);

  /* Text */
  --color-text-primary: #000000;
  --color-text-secondary: #999999;
  --color-text-placeholder: rgba(60, 60, 67, 0.3);

  /* Borders */
  --color-border-divider: rgba(0, 0, 0, 0.05);

  /* Status */
  --color-error: #D92B2B;

  /* Shadows */
  --shadow-glass: inset 1px 1px 1px rgba(255, 255, 255, 0.8),
    inset -1px -1px 0.5px rgba(255, 255, 255, 0.4),
    1px 1px 10px rgba(60, 60, 0, 0.05),
    0px 0px 8px rgba(60, 60, 0, 0.05);

  /* Typography */
  --font-family: 'Inter', sans-serif;
}

Page Skeleton

PageTemplate.module.css

.page {
  min-height: 100vh;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  padding-bottom: 80px;
}

/* --- Fixed Header --- */
.headerSpacer {
  height: 76px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 16px;
  background: linear-gradient(
    to bottom,
    #F8F8F8 0%,
    rgba(248, 248, 248, 0.73) 50%,
    transparent 100%
  );
}

.headerIconBtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: (, , , );
  : (--shadow-glass);
  : ();
  -webkit-: ();
  : flex;
  : center;
  : center;
  : none;
  : pointer;
  : (--color-text-primary);
}

 {
  composes: headerIconBtn;
  : (, , , );
  : ;
}
 {
  : (, , , );
  : ;
}

 {
  : flex;
  : center;
  : center;
  : ;
  : ;
  : ;
}


 {
  :  ;
}

 {
  : flex;
  : column;
  : ;
  : ;
}

PageTemplate.tsx

import { useState, useMemo } from 'react'
import { ChevronLeft, ArrowUp } from 'lucide-react'
import styles from './PageTemplate.module.css'

interface FormData {
  fieldA: string
  fieldB: string
}

export default function PageTemplate() {
  const [loading, setLoading] = useState(false)
  const [modalShow, setModalShow] = useState(false)
  const [formData, setFormData] = useState<FormData>({ fieldA: '', fieldB: '' })
  const [errors, setErrors] = useState<Partial<Record<keyof FormData, string>>>({})

  const allFieldsFilled = useMemo(() => {
    return formData.fieldA.trim() !== '' && formData.fieldB.trim() !== ''
  }, [formData])

  const updateFormData = () => {
    ( ({ ...prev, [field]: value }))
     (errors[field]) ( ({ ...prev, [field]:  }))
  }

   validateForm = ():  {
     : <<keyof , >> = {}
     (!formData..()) newErrors. = 
     (!formData..()) newErrors. = 
    (newErrors)
     .(newErrors). === 
  }

    =  () => {
     (!()) 
    ()
     {
      
      ({ : , :  })
      ()
    }  (e) {
      .(e)
    }  {
      ()
    }
  }

    = () => ..()

   (
    
  )
}

Form Elements

FormElements.module.css

/* --- Section label --- */
.sectionLabel {
  display: block;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

/* --- Grouped field list (iOS settings style) --- */
.fieldList {
  border-radius: 26px;
  background: #fff;
  padding: 4px 16px;
}
.fieldRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-divider);
}
.fieldRow:last-child {
  border-bottom: none;
}
.fieldRowLabel {
  font-size: 17px;
  color: var(--color-text-primary);
}

/* --- Standalone text input --- */
.input {
  height: 52px;
  width: 100%;
  border-radius: 26px;
  background: ;
  :  ;
  : ;
  : ;
  : none;
  : none;
}
 {
  : (--color-text-placeholder);
}
 {
  :  solid (--color-error);
}


 {
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
  : none;
  : none;
  : none;
  : ;
}
 {
  : (--color-text-placeholder);
}


 {
  : relative;
  : ;
}
 {
  : none;
  : ;
  : none;
  : none;
  :    ;
  : ;
  : (--color-text-secondary);
  : right;
  : ;
  : pointer;
}
 {
  : (--color-text-placeholder);
}
 {
  : absolute;
  : ;
  : ;
  : (-);
  : none;
  : ;
  : ;
  : ;
}


 {
  :  ;
  : ;
  : (--color-error);
}


 {
  : ;
  : ;
  : ;
  : ;
  : ;
  : none;
  : pointer;
  : all ;
}
 {
  : ;
  : ;
  : (--shadow-glass);
}
 {
  : (, , , );
  : ;
  : not-allowed;
}


 {
  : (, , , );
  : (, , , );
  : not-allowed;
}

Form field JSX patterns

Grouped field list (iOS settings style):

<div className={styles.fieldList}>
  {/* Select row */}
  <div className={styles.fieldRow}>
    <span className={styles.fieldRowLabel}>Gender</span>
    <div className={styles.inlineSelectWrapper}>
      <select
        className={styles.inlineSelect}
        value={formData.gender}
        onChange={e => updateFormData('gender', e.target.value)}
        style={{ color: formData.gender ? '#999' : undefined }}
      >
        <option value="" disabled>Select</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
      <ChevronsUpDown className={styles.inlineSelectArrow} />
    </div>
  </div>

  {/* Text display row */}
  <div className={styles.fieldRow}>
    <span className=>Date of Birth
    
  </div>
</div>

Standalone input with label:

<div>
  <label className={styles.sectionLabel}>Educational Background</label>
  <textarea
    className={styles.textarea}
    value={formData.education}
    onChange={e => updateFormData('education', e.target.value)}
    placeholder="e.g., degrees, schools, key achievements..."
    maxLength={1000}
  />
  {errors.education && <p className={styles.errorText}>{errors.education}</p>}
</div>

Option Card

For multi-choice selection grids:

OptionCard.module.css

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 84px;
  border-radius: 20px;
  border: 1px solid #fff;
  background: #fff;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.cardSelected {
  composes: card;
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
}
.cardLabel {
  font-size: 17px;
  color: var(--color-text-primary);
  margin: 8px 0;
}
.cardDescription {
  font-size: 13px;
  line-height: 15px;
  color: var(--color-text-secondary);
}

JSX

<div className={styles.grid}>
  {options.map(opt => (
    <button
      key={opt.value}
      className={selected === opt.value ? styles.cardSelected : styles.card}
      onClick={() => onSelect(opt.value)}
    >
      <div>{opt.icon && <opt.icon />}</div>
      <div className={styles.cardLabel}>{opt.label}</div>
      {opt.description && <p className={styles.cardDescription}>{opt.description}</p>}
    </button>
  ))}
</div>

Bottom Drawer

BottomDrawer.module.css

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease-out;
}
.backdropHidden {
  opacity: 0;
}
.backdropVisible {
  opacity: 1;
}

.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  background: #fff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease-out;
}
.drawerHidden {
  transform: translateY();
}
 {
  : ();
}

 {
  : ( - );
  : auto;
  :   ;
}

BottomDrawer.tsx

import { useEffect, useState, ReactNode } from 'react'
import styles from './BottomDrawer.module.css'

interface Props {
  open: boolean
  onClose: () => void
  children: ReactNode
  className?: string
}

export default function BottomDrawer({ open, onClose, children, className }: Props) {
  const [visible, setVisible] = useState(false)
  const [animating, setAnimating] = useState(false)

  useEffect(() => {
    if (open) {
      setVisible(true)
      setTimeout(() => setAnimating(true), 10)
      document.body.style.overflow = 'hidden'
    } else {
      setAnimating(false)
      const t = setTimeout(() => setVisible(), )
      ... = 
        (t)
    }
      { ... =  }
  }, [open])

   (!visible)  

   (
    
  )
}

Success Modal

SuccessModal.module.css

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  transition: all 0.3s ease-out;
}
.backdropHidden {
  opacity: 0;
  backdrop-filter: blur(0);
}
.backdropVisible {
  opacity: 1;
  background: rgba(153, 153, 153, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.wrapper {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal {
  width: 100%;
  max-width: 322px;
  border-radius: 42px;
  background: rgba(255, 255, 255, 0.6);
  : (--shadow-glass);
  : ();
  -webkit-: ();
  : ;
  : center;
  : (--color-text-primary);
  : all  ease-out;
}
 {
  : ;
  : ();
}
 {
  : ;
  : ();
}

 {
  : ;
  : ;
  : ;
}

 {
  : ;
  : ;
  : ;
  : (--color-accent);
}

 {
  : ;
  : ;
  : ;
}

 {
  : ;
  : ;
  : ;
  : ;
  :  ;
  : ;
  : none;
  : pointer;
}

SuccessModal.tsx

import { useEffect, useState } from 'react'
import styles from './SuccessModal.module.css'

interface Props {
  open: boolean
  onClose: () => void
  title?: string
  message?: string
  points?: number
  buttonText?: string
}

export default function SuccessModal({
  open,
  onClose,
  title = 'Successful',
  message = 'Your submission has been received successfully.',
  points,
  buttonText = 'Got it'
}: Props) {
  const [visible, setVisible] = useState(false)
  const [animating, setAnimating] = useState(false)

  useEffect(() => {
    if (open) {
      setVisible(true)
      setTimeout(() => setAnimating(true), 10)
      document.body.style.overflow = 'hidden'
    }  {
      ()
       t = ( (), )
      ... = 
        (t)
    }
      { ... =  }
  }, [open])

   (!visible)  

   (
    
  )
}

Key Conventions

• Font: Inter, sans-serif
• Page bg: #F8F8F8 (light gray)
• Card bg: #FFFFFF (white), with border-radius: 26px
• Accent: #40E1EF (cyan) -- used for submit icon, selected option borders, points display
• Primary button: black #000, height: 56px, full-width, border-radius: 9999px, with --shadow-glass
• Section labels: font-size: 17px; color: #999; padding: 0 16px; -- placed above field groups
• Field groups: white card with border-radius: 26px, rows separated by rgba(0,0,0,0.05) dividers
• Select fields: native <select> with appearance: none, right-aligned value in #999, chevron icon overlay
• Spacing: body padding: 0 20px, section gap 24px, bottom padding 80px
• Error text: font-size: 12px; color: #D92B2B; padding: 0 16px;
• Navigation back: window.history.back() or native bridge window.native?.call('goBack')
• Frosted glass effect: Use --shadow-glass + backdrop-filter: blur() for modal/header buttons