Quartz

Quartz is Stratum’s most expressive theme. Inspired by Go Club’s iOS app, it uses translucent surfaces (BlurView), vibrant accent colors, light icon weights, and pill shapes to create a soft, layered, premium feel.

Character

Trait	Value
Inspiration	Go Club
Button shape	Pill (radius.full)
Icon weight	Light
Border radius (md)	8
Border width (thin)	1
Accent	Vibrant violet
Effects	Glass tint, blur intensity, inner border

When to use Quartz

Quartz works for lifestyle apps, social products, music and media players, and any product that benefits from a layered, tactile, and lively aesthetic. The translucent surfaces require native rendering — this theme performs best on actual devices or simulators, not in the Metro bundler preview.

Effects tokens

Quartz extends the base AppTheme with specific effects values:

effects: {
  blurIntensity: 20,       // BlurView intensity
  glassTint:     'rgba(255,255,255,0.12)',  // tint over blur
  glowColor:     'rgba(167,139,250,0.3)',   // accent glow
  innerBorderColor: 'rgba(255,255,255,0.2)', // inner highlight
}

The <Surface> atom reads these values automatically when rendering a variant="glass" surface.

Files

src/tokens/themes/quartz.ts

Exports: quartzThemeLight, quartzThemeDark

Related

• Slate — clean, high-contrast default theme
• Obsidian — structural, editorial theme
• Custom Themes — extending any built-in theme
• Theming — AppTheme interface and effects tokens