UI Constants

KitColors

It’s just as important to have a consistent color palette. Our favourite color is the Neutral Colors from Tailwind CSS (you can see it used thoughout all of Hungrimind).

There is a utility class called KitColors that contains all the shades of the neutral colors and other colors that might be relevant for you.

The colors in the theme class will be inverted correctly depending on the current theme.

1
context.kitColors.neutral500
2
context.kitColors.red500
3
context.kitColors.green500
4
context.kitColors.yellow500

Consistent UI

For your apps to have a professional look and feel, it is important to have a consistent UI. We have created a set of utility classes to help you create a consistent UI.

✅ TIP

All of these are accessible through extensions on the BuildContext.

AppSpacing

The AppSpacing class helps you to create consistent spacing between your UI elements.

1
context.spacings.xxs
2
context.spacings.xs
3
context.spacings.sm
4
context.spacings.md
5
context.spacings.lg
6
context.spacings.xl
7
context.spacings.xxl

BorderRadius

The BorderRadius class helps you to create consistent border radii.

1
context.borderRadius.none
2
context.borderRadius.sm
3
context.borderRadius.md
4
context.borderRadius.lg
5
context.borderRadius.lg
6
context.borderRadius.xxl
7
context.borderRadius.xxxl
8
context.borderRadius.full

Breakpoints

The Breakpoints class helps you to create responsive UI.

1
context.breakpoints.sm
2
context.breakpoints.md
3
context.breakpoints.lg
4
context.breakpoints.xl
5
context.breakpoints.xxl

Durations

The Durations class helps you to create consistent durations.

1
context.durations.duration75
2
context.durations.duration100
3
context.durations.duration150
4
context.durations.duration200
5
context.durations.duration300
6
context.durations.duration500
7
context.durations.duration700
8
context.durations.duration1000

Shadows

The Shadows class helps you to create consistent shadows.

1
context.shadows.sm
2
context.shadows.md
3
context.shadows.lg
4
context.shadows.xl
5
context.shadows.xxl

Text Styles

The TextStyles class helps you to create consistent text styles.

1
context.textStyles.xs
2
context.textStyles.sm
3
context.textStyles.standard
4
context.textStyles.lg
5
context.textStyles.xl
6
context.textStyles.xxl
7
context.textStyles.xxxl