Keyboard Shortcuts

j / kScroll down / up
ggScroll to top
GScroll to bottom
/Open search
?Show this help
EscClose search / help
n / NNext / previous section
hGo to landing
dGo to docs
:Command mode — type section name

Press ? or Esc to close

Architecture

Design System

Full design token system. Runtime theme switching with zero refactor cost. All UI uses semantic tokens — never hardcoded values.

ClassRole
AppColorsRaw palette — never used directly in UI
AppThemeColorsThemeExtension with semantic properties. Access via context.colors.*
AppTypographyTextStyle constants. Display · Heading · Body scales. Two font families.
AppSpacingBase scale s0–s1200. Aliases: xxs(4) xs(8) sm(12) md(16) lg(20) xl(24) xxl(32) xxxl(40) huge(48)
AppShadowsElevation shadow tokens

ThemeCubit — runtime switching

class ThemeCubit extends Cubit {
  void setLight() => emit(ThemeMode.light);
  void setDark()  => emit(ThemeMode.dark);
  void toggle()   => emit(state == ThemeMode.light
      ? ThemeMode.dark : ThemeMode.light);
}

BlocBuilder(
  builder: (_, mode) => MaterialApp.router(
    theme:     ThemeCubit.buildTheme(AppThemeColors.light()),
    darkTheme: ThemeCubit.buildTheme(AppThemeColors.dark()),
    themeMode: mode,
  ),
);
Rule: Never use AppColors.* directly in widgets. Always context.colors.* — the only API into the color system.
sam's arch — A Pragmatic Flutter Architecture
← Landing Overview Checklist