Tabs — Routine / Phase Variant

What it does

• Phase tabs across the top — clearly labeled tabs (morning, evening, weekly, etc.) let the learner jump between phases
• Ordered step list per tab — each tab holds its own steps, products, or actions in numbered order
• Active-tab indicator — the current phase is visibly highlighted so the learner stays oriented
• Smooth content swap — switching phases fades or slides the panel rather than jarring the page
• Keyboard friendly — left/right arrow navigation moves through the phases

Best use cases

• Skincare and beauty — morning/evening/weekly routines, seasonal regimens
• Wellness and fitness — daily/weekly/recovery split routines, training-block phases
• Productivity and habits — morning/midday/evening routines, weekly/monthly review cadences
• Cooking and meal prep — prep-day vs. cook-day vs. leftover-day flows
• Project and program management — phase-based project plans, course-week routines, launch-week schedules

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — slots for page background, tab bar background, active tab color, panel background, and accent
• Fonts — two roles: a display font for tab labels and step titles, plus a body font for descriptions
• Copy — title, intro line, tab labels, and the ordered steps per tab with descriptions and tips
• Images — optional icon per tab, plus a thumbnail or product image slot per step
• Behavior — choose the number of tabs, the default open tab, the number of steps per tab, and the swap animation style