iOS Component Grammar

Status: draft v0.2

This file defines reusable visual components for the LineCard iOS app. Codex should use this before inventing new UI styles.

Build 84 Antho Extraction Status

The latest Antho rollout is not a complete component system yet. It is three implemented reference surfaces:

• Home / Accueil: PSD layer pack with native live overlays.
• Connexion: full-canvas raster shell with native auth controls.
• Mes coachs: raster shell plus native live counters and booking navigation.

Reusable components should be extracted from these references only where a rule is clear. If the rule is not clear, the atlas should mark it as an Antho question instead of guessing.

Current extraction candidates:

Component Groups

App Background

Current code:

• Color.lcBackground
• TopoLinesView
• .lcBackground()

Rules:

• Background should feel deep and stable.
• Topo lines should stay subtle.
• Do not add busy textures behind score entry.
• Important modal/sheet surfaces can use a cleaner surface without topo lines.
• Antho reference surfaces can use full-canvas raster backgrounds when fidelity matters.
• Raster backgrounds must define safe zones for live controls and dynamic text.

Cards And Panels

Current code:

• .lcCard()
• .lcGreenCard()
• LCCardModifier
• LCGreenCardModifier

Rules:

• Cards hold one decision, one data group, or one action cluster.
• Do not nest cards inside cards.
• Prefer clear title, one strong metric, secondary copy, then action.
• Border/glow should help separate surfaces on dark background, not decorate everything.

Variants to define:

• standard card
• featured green card
• Antho action tile
• Antho live-data capsule
• score entry panel
• compact list row
• empty state panel

Buttons

Current code:

• LCPrimaryButtonStyle
• LCSecondaryButtonStyle
• LCPillButtonStyle

Rules:

• Primary button: one per screen section.
• Secondary button: navigation or alternate action.
• Pill button: filter, category, distance, visibility.
• Icons should be SF Symbols when familiar.
• Button text must stay short and fit at large text sizes.

Variants to define:

• primary CTA
• quiet secondary
• destructive/leave challenge
• floating C4-DY action
• Antho transparent hit zone over artwork
• Antho raster-backed action tile with native accessibility label
• score submit button

Pills And Chips

Use cases:

• exercise type
• distance
• status
• badge metadata
• challenge visibility
• friend/role label

Rules:

• Pills must be readable on dark backgrounds.
• Active vs inactive must be visually obvious without relying only on color.
• Category colors are allowed only when they carry meaning.

Player Avatar

Current code:

• PlayerAvatarView
• BadgeChip

Rules:

• Avatar should support level, coach, and friend context.
• Avoid tiny badges that become unreadable.
• Use the same avatar treatment across friends, messages, challenges, and rankings.

LTI Progress

Use cases:

• home dashboard
• profile
• friend compare
• leaderboard
• badge unlock

Rules:

• Show current level and next step together.
• Progress should be visual and numeric.
• Recent gain should be visible when relevant.
• Do not overload users with formula details unless the screen is about scoring.
• On Antho surfaces, keep the capsule/ring/progress artwork stable but render the current number, level, and fallback state natively.

Atelier Cards

Use cases:

• Putting list
• Chipping list
• challenge source exercise

Rules:

• Show exercise name, category, difficulty/level, cards label, distance, attempts.
• Notice/Consignes/Pedagogie/Tips Linecard should be scannable sections.
• Score entry should feel like a continuation of the atelier, not a separate form app.
• This is the highest-priority missing Antho component family because Ateliers are one tap away from Home.
• Need Antho guidance for list row, detail section, score toggle, miss analysis, and post-score feedback.

Challenge Cards

Rules:

• Show status first: waiting, active, completed, expired.
• Show who is involved.
• Show deadline or final ranking.
• Make next action obvious: play, view ranking, invite, respond.

C4-DY Entry

Use cases:

• first app launch
• persistent app companion
• contextual help inside screens
• chat/messages

Rules:

• C4-DY must be recognizable.
• It should not compete with the main action.
• It needs contextual states:
• onboarding guide
• next-step prompt
• challenge prompt
• training recommendation
• normal chat
• Current player-facing label is Mon Caddie. Internal/legacy C4-DY wording should not leak into player UI unless the team deliberately rebrands it.
• The Antho Home Mon Caddie button and the older floating button need one reconciled rule.

Open component decision:

• Does Mon Caddie become a bottom menu presence, a dashboard card, a floating helper, or a contextual sheet entry depending on state?

Notifications And Celebrations

Rules:

• Badge unlocks and level-ups need a dedicated visual state.
• Notification tap should route to the thing mentioned.
• Celebration should be short, polished, and dismissible.
• Avoid blocking a user during scoring or active challenge entry.
• The Centurion/badge notification problem is still a design gap: the user can tap a notification and not find the badge afterward.