Skip to content
UI CSS Conventions
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

UI CSS Conventions

Fragment reference UI CSS Conventions
tags
uiconvention

Wireframe CSS Conventions

StarSpec uses a low-fidelity, themeable CSS system for UI wireframes. It follows a BEM-lite convention for predictable styling and easy theme overrides.

Naming Convention

  • Block: .wf-{component} (e.g., .wf-tabs)
  • Element: .wf-{component}__{element} (e.g., .wf-tabs__header)
  • Modifier/State: [data-{modifier}] (e.g., .wf-tabs__header[data-active="true"])

Selector Pattern

Core variables are defined in :root and must be overridden in two compound selectors per theme — one for light mode and one for dark mode. Both wa-dark/wa-light and data-wf-theme are on the same <html> element, so the compound selectors resolve correctly by specificity alone.

/* Light (default) */
:root[data-wf-theme="ios"],
:root.wa-light[data-wf-theme="ios"] { … }


/* Dark */
:root.wa-dark[data-wf-theme="ios"] { … }

For the full copy-paste template including component override scoping, see get_instructions("starspec/fragments/wireframe/theme-selector-pattern").

Variable Reference

For the full --wf-* variable reference (brand, semantic, geometry, font), see get_instructions("starspec/fragments/wireframe/theme-variables").