feat(brand): BrandWordmark renders ∆I in petrol, lifts the logo

Adds a dedicated BrandWordmark widget that splits 'Recl∆Im'
into three TextSpans and tints the middle ∆I in the petrol
signal colour. The fai_web universe uses this same accent rule
for the F∆I and Ch∆In glyphs — Recl∆Im now follows it, so
the brand stays visually coherent across every F∆I surface.

Where it lands:

  - Landing page: large DeltaMark (96 px) and BrandWordmark
    (56 px) sit on a single row, the wordmark to the right of
    the mark. The two together carry the brand identity that
    a viewer sees first when opening the app.
  - NavigationRail leading: the muted 'Recl∆Im' Text line is
    replaced with the petrol-accented BrandWordmark (18 px),
    keeping the vendor tag 'F∆I' as a small muted line under it.

widget_test.dart adapts: the literal 'Recl∆Im'-find no longer
matches because the wordmark is now three text spans, so the
test checks for BrandWordmark by type — equivalent assertion,
robust to glyph-level splits.

Signed-off-by: flemming-it <sf@flemming.it>
This commit is contained in:
flemming-it 2026-06-18 15:06:13 +02:00
parent 94f4473686
commit c6400302dd
4 changed files with 73 additions and 13 deletions

View file

@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import '../data/repository.dart'; import '../data/repository.dart';
import '../theme/reclaim_theme.dart'; import '../theme/reclaim_theme.dart';
import '../theme/reclaim_tokens.dart'; import '../theme/reclaim_tokens.dart';
import '../widgets/brand_wordmark.dart';
import '../widgets/delta_mark.dart'; import '../widgets/delta_mark.dart';
import 'shell_page.dart'; import 'shell_page.dart';
@ -20,7 +21,7 @@ class LandingPage extends StatelessWidget {
body: SafeArea( body: SafeArea(
child: Center( child: Center(
child: ConstrainedBox( child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 720), constraints: const BoxConstraints(maxWidth: 820),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: ReclaimSpace.xxl, horizontal: ReclaimSpace.xxl,
@ -30,9 +31,18 @@ class LandingPage extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const DeltaMark(size: 96), const Row(
const SizedBox(height: ReclaimSpace.xxl), crossAxisAlignment: CrossAxisAlignment.center,
Text('Recl∆Im', style: t.displaySmall), children: [
DeltaMark(size: 96),
SizedBox(width: ReclaimSpace.xl),
BrandWordmark(
size: 56,
letterSpacing: -1.0,
),
],
),
const SizedBox(height: ReclaimSpace.xl),
const SizedBox(height: ReclaimSpace.sm), const SizedBox(height: ReclaimSpace.sm),
Text( Text(
'Pflicht-basierte Wirkungsanalyse von Rechtsnormen — ' 'Pflicht-basierte Wirkungsanalyse von Rechtsnormen — '

View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import '../data/repository.dart'; import '../data/repository.dart';
import '../theme/reclaim_tokens.dart'; import '../theme/reclaim_tokens.dart';
import '../widgets/brand_wordmark.dart';
import '../widgets/delta_mark.dart'; import '../widgets/delta_mark.dart';
import 'about_page.dart'; import 'about_page.dart';
import 'heatmap_page.dart'; import 'heatmap_page.dart';
@ -51,14 +52,7 @@ class _ShellPageState extends State<ShellPage> {
children: [ children: [
const DeltaMark(size: 36), const DeltaMark(size: 36),
const SizedBox(height: ReclaimSpace.sm), const SizedBox(height: ReclaimSpace.sm),
Text( const BrandWordmark(size: 18),
'Recl∆Im',
style: t.labelLarge?.copyWith(
letterSpacing: 1.5,
color: ReclaimColors.signal,
fontWeight: FontWeight.w600,
),
),
Text( Text(
'F∆I', 'F∆I',
style: t.labelSmall?.copyWith( style: t.labelSmall?.copyWith(

View file

@ -0,0 +1,55 @@
import 'package:flutter/material.dart';
import '../theme/reclaim_tokens.dart';
/// "Recl∆Im" wordmark with the I glyphs petrol-coloured the
/// brand rule of thumb in the fai_web universe: wherever the name
/// stands as a brand, the I tinted petrol carries the FI-family
/// identity. As plain text it would all share the surrounding ink
/// colour.
///
/// Pass [size] for the base font size; the I scales relative.
class BrandWordmark extends StatelessWidget {
const BrandWordmark({
super.key,
this.size = 24,
this.fontWeight = FontWeight.w600,
this.color,
this.letterSpacing = -0.5,
});
final double size;
final FontWeight fontWeight;
/// Color of the non-I letters. Defaults to the surface's
/// onSurface so the wordmark reads against whichever ink/paper
/// backdrop it sits on.
final Color? color;
final double letterSpacing;
@override
Widget build(BuildContext context) {
final base = color ?? Theme.of(context).colorScheme.onSurface;
final style = TextStyle(
fontSize: size,
fontWeight: fontWeight,
fontFamily: ReclaimTypography.display,
color: base,
letterSpacing: letterSpacing,
height: 1.0,
);
return RichText(
text: TextSpan(
style: style,
children: [
const TextSpan(text: 'Recl'),
TextSpan(
text: '∆I',
style: style.copyWith(color: ReclaimColors.signal),
),
const TextSpan(text: 'm'),
],
),
);
}
}

View file

@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
import 'package:reclaim_app/main.dart'; import 'package:reclaim_app/main.dart';
import 'package:reclaim_app/widgets/brand_wordmark.dart';
void main() { void main() {
// Generous surface so NavigationRail + Heatmap fit without // Generous surface so NavigationRail + Heatmap fit without
@ -20,7 +21,7 @@ void main() {
await tester.binding.setSurfaceSize(surfaceSize); await tester.binding.setSurfaceSize(surfaceSize);
await tester.pumpWidget(const ReclaimApp()); await tester.pumpWidget(const ReclaimApp());
await tester.pump(); await tester.pump();
expect(find.text('Recl∆Im'), findsOneWidget); expect(find.byType(BrandWordmark), findsWidgets);
expect( expect(
find.widgetWithText(FilledButton, 'App öffnen (Demo-Modus)'), find.widgetWithText(FilledButton, 'App öffnen (Demo-Modus)'),
findsOneWidget, findsOneWidget,