Resources
Naming & Conventions
Token structure, CSS prefixes, and Figma conventions — the grammar that keeps six logging screens, ten cards and two sources of truth coherent.
Token structure (three tiers)
| Tier | Pattern | Example |
|---|---|---|
| 1 · Primitive | peri.palette.{hue}.{step} | peri.palette.orange.500 = #F39021 |
| 2 · Semantic | peri.color.{role}.{variant} | peri.color.action.primary → orange.500 |
| 3 · Component | peri.{component}.{part}.{property} | peri.button.primary.bg → color.action.primary |
Shipped code keeps its flat custom properties (--accent, --text2) — the tiers are a mapping for scale, not a rename. Components reference Tier 2; Tier 3 exists only where a component genuinely overrides.
CSS component prefixes (shipped)
| Prefix | Component | Prefix | Component |
|---|---|---|---|
.dfc-* | DailyFocus + shared drawer sections | .sym-* | log page shells |
.fuel-* | FuelingCard | .wkt-chip | muted chip |
.trd-* | RecentTrendsCard | .per-* | LogPeriodPage |
.whn-* | WhatNextCard | .slp-* | LogSleepPage |
.ltr-* | TrendsCard | .trt-* | LogTreatmentPage |
.pb-* | Playbook + accordions | .feel-* | LogFeelPage |
.si-* | overview stat rows/tabs | .proto-* | protocol cards |
.ti-* | TrainingInsights overview | .tab-* | bottom nav |
.sm-sym-chip | common-symptom chips | .log-drawer-* | LogDrawer |
The convention
2–4 letter card mnemonic per component; shared structures get shared prefixes (
.dfc-*drawer sections are reused by the Sleep/Cycle/Symptoms drawers). Reuse-by-prefix is the system's composition mechanism — check for an existing prefix before minting one.Figma conventions
| Asset | Convention | Example |
|---|---|---|
| Variables | Group/Name | Text/Primary · Accent/Alert |
| Text styles | role names | H3 · Body heavy · Label |
| Effects | use names | Menu shadow · Selected card or tag |
| Pages | 🎨 Design System → Final screens → archive | legacy frames marked [LEGACY] |
Storage keys (do not rename)
| Key | Holds |
|---|---|
tuluna-entries / tuluna-protocols | live data (legacy prefix — renaming breaks existing users) |
peri-profile / peri-onboarded | onboarding profile + flag |
tuluna-custom-*-tags / tuluna-*-favorites | per-vocabulary custom tags and favourites |
tuluna-data.json | Google Drive appdata file |