My QBits

Design Guideline Implementation

Jun 17, 20262 min read

1. Preparation

<Color_Palette_light>
Primary color: #005F9E
Secondary color: #F2F4F7
Vibe: Professional, lean and trusting
</Color_Palette_light>

<Color_Palette_dark>
Primary color: #013A63
Secondary color: #4B545F
Vibe: Professional, lean and trusting
</Color_Palette_dark>

<Typography>
Font Family: Trebuchet MS; H1: Bold, 32px; H2: Semibold, 24px; Other: 18px; textual, minimalistic, professional, SAP-related, on white or very light backgrounds; thin-outline icons following SAP-standard iconography, mainly in #005F9E.
</Typography>

<Logo>
Textual, minimalistic, professional, SAP-related, on white background
</Logo>

<Icons>
Thin-outline icons following the SAP-standard iconography
</Icons>

<Brand_Voice>
Innovative, trusting, collaborative, professional; emphasizes SAP Gold Partner expertise,
</Brand_Voice>

<UI_Specifics>
12-column centered layout; white background with #F2F4F7 bands; hero with left-aligned text and primary blue CTA; flat cards for services, KPIs and insights; generous spacing
</UI_Specifics>

2. Prompt for image generation

Based on the following description and guidelines, generate a single comprehensive UI design **image** concept used for website, power-point presentations, magazines, blog articles and other media communication channels

<Subject>
A design-guideline slide in 16:9 format with a logo on the top-right side for the company 'Q-Bytes Data'
</Subject>

<Action>
visualizing colors, typography and styles for the brand
</Action>

<Location> 
White Background
</Location>


<Style>
Fill in from above
</Style>

3. Instructions

  1. Fill in the templates
  2. Use a prompt-engineering prompt to create the prompt itself
  3. Generate the image
  4. Use the image as reference for further prompts

4. Next step

Example for Wallpaper creation overview

<Subject>
Ultra-realistic grey lynx, full body, standing on a grassy hill, facing the camera, with a cyberpunk city in the background and the moon shining brightly
</Subject>

<Action>
The lynx calmly watches the camera the neon-lit cyberpunk city below, ears slightly raised, tail wrapped around its paws
</Action>

<Location> 
Night-time cyberpunk megacity in the far distance, dense futuristic skyscrapers with holographic billboards, starry sky above, large shiny full moon behind the skyline, faint mist between hill and city
</Location>

<Style>
Ultra-realistic, cinematic wide-angle composition, high-detail fur and landscape textures, strong contrast between dark silhouettes and vibrant neon lights (orange and red), crisp starry night sky, soft moonlight rim-lighting the lynx
</Style>

Backlinks