iOS Component Grammar

Status: draft v0.1

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

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.

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
• 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
• 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.

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.

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

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.