Color Palette
All colors of your app for Light and Dark Mode
Global Settings
The global settings form the foundation of your app design. All values defined here are used as the basis for the entire app.
Overview
Section titled “Overview”Typography
Font family and font sizes for all text levels
Spacing
Unified spacing system
Corner Radii
Roundness for all elements
Branding
Logo and app icon
Live Preview
Section titled “Live Preview”At the top you see a live preview:
- Minimized: Shows the most important colors as compact dots
- Expanded: Shows a more detailed preview with example card
Tap “Expand” or “Minimize” to switch between views.
Color Palette
Section titled “Color Palette”The color palette defines all colors of your app. You can set separate colors for Light Mode and Dark Mode.
Light/Dark Mode Toggle
Section titled “Light/Dark Mode Toggle”At the beginning of the color section you’ll find a toggle:
- Light Mode: Edit colors for bright environments
- Dark Mode: Edit colors for dark environments
Main Colors
Section titled “Main Colors”| Color | Usage |
|---|---|
| Primary Color | Main accent color, buttons, active elements |
| Secondary Color | Additional accents, secondary buttons |
| Background Color | Main background of the app |
| Surface Color | Cards, dialogs, elevated elements |
| Primary Text Color | Headlines, important text |
| Secondary Text Color | Descriptions, less important text |
Status Colors
Section titled “Status Colors”These colors are used jointly for both modes (Light/Dark):
| Color | Usage |
|---|---|
| Error Color | Error messages, invalid inputs |
| Success Color | Success messages, confirmed actions |
| Warning Color | Warning notices, caution messages |
Color Selection
Section titled “Color Selection”Tap on a color to open the color picker:
- Color Wheel: Select the hue
- Saturation/Brightness: Fine-tuning
- Hex Input: Enter an exact color code
- Eyedropper: Pick colors from existing elements
Typography
Section titled “Typography”The typography settings determine the font family and font sizes in your entire app.
Font Family
Section titled “Font Family”Choose from over 1,000 Google Fonts:
- Tap on the font field
- Use search to find a font
- The preview shows each font in its own style
Popular Fonts:
- Roboto (default)
- Open Sans
- Lato
- Montserrat
- Poppins
Text Levels
Section titled “Text Levels”Each text level has its own size and can be customized individually:
| Level | Usage | Default Size |
|---|---|---|
| Headline 1 | Large headlines, hero sections | 32-64 px |
| Headline 2 | Section headlines | 24-48 px |
| Headline 3 | Subsection headlines | 18-36 px |
| Body 1 | Main text, paragraphs | 14-24 px |
| Body 2 | Smaller body text | 12-20 px |
| Caption | Image captions, notes | 10-16 px |
Advanced Typography Settings
Section titled “Advanced Typography Settings”For each text level you can open advanced settings:
- Font Weight - Light, Regular, Medium, Bold, etc.
- Letter Spacing - Spacing between letters
- Line Height - Spacing between lines
- Custom Font - Override the global font
Spacing
Section titled “Spacing”The spacing system ensures consistent spacing throughout the app.
Presets
Section titled “Presets”Choose a predefined spacing preset:
| Preset | Style | Description |
|---|---|---|
| Compact | Compact | Minimal spacing, lots of content |
| Normal | Standard | Balanced spacing |
| Comfortable | Generous | Lots of whitespace, airy design |
| Custom | Custom | Define all values yourself |
Individual Spacing (for “Custom”)
Section titled “Individual Spacing (for “Custom”)”When you choose “Custom”, you can set each spacing individually:
| Spacing | Usage | Typical Values |
|---|---|---|
| Tiny Gaps | Smallest spacing (XSmall) | 2-8 px |
| Small Gaps | Small spacing | 4-16 px |
| Normal Gaps | Standard spacing (Medium) | 8-24 px |
| Wide Gaps | Large spacing (Large) | 16-32 px |
| Extra Wide | Very large spacing (XLarge) | 24-48 px |
Each spacing shows a visual preview with typical use cases.
Corner Radii
Section titled “Corner Radii”The corner radii determine how rounded the corners of elements are.
Presets
Section titled “Presets”Choose a predefined style:
| Preset | Style | Description |
|---|---|---|
| Sharp | Angular | No rounding (0 px) |
| Subtle | Subtle | Slight rounding |
| Rounded | Rounded | Noticeable rounding |
| Pill | Pill Shape | Maximum rounding |
| Custom | Custom | Define all values yourself |
Individual Radii (for “Custom”)
Section titled “Individual Radii (for “Custom”)”| Radius | Usage | Typical Values |
|---|---|---|
| Subtle Corners | Small elements, badges | 0-8 px |
| Standard Corners | Buttons, input fields | 4-16 px |
| Prominent Corners | Cards, dialogs | 8-24 px |
| Fully Rounded | Chips, pills, round buttons | 999 px |
Branding
Section titled “Branding”Here you upload the visual brand elements of your app.
App Logo
Section titled “App Logo”The logo is displayed in various areas:
- Header and navigation
- Login page
- Splash screen (optional)
Recommendations:
- Format: PNG with transparency
- Minimum size: 512 x 512 px
- Aspect ratio: Square or horizontal
App Icon
Section titled “App Icon”The app icon appears on the device’s home screen:
- Used when publishing
- Should be square
- Without transparency (for best compatibility)
Recommendations:
- Format: PNG without transparency
- Size: 1024 x 1024 px
- Content: Centered symbol with margin
Frequently Asked Questions
Section titled “Frequently Asked Questions”Why don’t I see my changes immediately?
Section titled “Why don’t I see my changes immediately?”The live preview shows most changes immediately. For the complete view in the app, you must save and reload the corresponding page.
Can I have more than two color modes?
Section titled “Can I have more than two color modes?”No, BLOCQ currently supports Light Mode and Dark Mode. The system switches automatically based on the device setting.
What font formats are supported?
Section titled “What font formats are supported?”The Theme Suite uses Google Fonts. Custom font files (TTF, OTF) cannot currently be uploaded.
What happens to my images on upload?
Section titled “What happens to my images on upload?”Images are automatically compressed (max. 2048x2048 px, 85% quality) and stored locally.