SuperParent
Logo
Colors
hex: #217477
rgb: (33, 116, 119)
cmyk: 72%, 3%,0%, 53%
hex: #f37d61
rgb: (243, 125, 97)
cmyk: 0%, 49%,60%, 5%
hex: #ffffff
rgb: (255, 255, 255)
cmyk: 0%, 0%,0%, 0%
hex: #e8e8e8
rgb: (232, 232, 232)
cmyk: 0%, 0%,0%, 9%
Clearspace
The concept of clear space in the SuperParent design brief refers specifically to the required minimum area surrounding the logo, ensuring its visual integrity and readability.
Key requirements regarding clear space and general spacing include:
Logo Clear Space
• Minimum Clearance: You must maintain enough clear space around the logo (at least height of the “S” in Super).
• Purpose: This space must be maintained to keep the family icon and the overall shape of the logo exactly as provided.
• Logo Consistency: Designers are reminded not to stretch or warp the logo, only scaling it proportionally. The minimum size for the logo in the UI is 32px height.
General Spacing and White Space
The visual layout language of the app emphasizes generous and consistent use of space across the entire user interface:
• White Space: The design should use Generous white space so that "Nothing should feel cramped".
• Consistent Steps: Designers are instructed to use consistent spacing steps: 4, 8, 12, 16, 24, 32.
• Splash Screens: For splash screens, the logo should be centered with plenty of breathing room.
• Overall Mood: These guidelines support the overall design mood, which is defined as Warm, Trustworthy, and Modern
Logo Variations
The design brief requires the creation of several distinct logo variations to ensure the SuperParent brand identity is flexible and consistent across various platforms and backgrounds.
The core requirement is to use the provided logo as the single source of truth and keep the family icon and overall shape exactly as provided in all versions. The logo should only be scaled proportionally, never stretched or warped.
1. Layout and Configuration Variations
The primary logo set must be prepared in four main configurations for flexible usage:
Variation
Purpose/Ratio
File Specification (Examples)
Full Logo
Primary logo with text.
logo_primary_full.svg, logo_primary_full.png
Icon-Only Mark
Used as the app icon base.
logo_mark_icon.svg, logo_mark_icon.png
Horizontal
For horizontal layouts (approx. 3:1 ratio).
logo_horizontal.svg, logo_horizontal.png
Vertical
For vertical layouts (approx. 1:1.5 ratio).
logo_vertical.svg, logo_vertical.png
The minimum size required for the logo in the UI is 32px height.
2. Color and Background Variations
The logo must be created in light and dark color modes to ensure visibility across the app’s color palette.
Variation
Usage
File Specification (Examples)
Primary Color Version
Standard use.
logo_primary_full.svg
White/Light Version
For use on dark backgrounds.
logo_white_full.svg (white color mode)
Monochrome Version
For print or minimal use.
logo_monochrome.svg (Grayscale color mode)
The design must specifically prepare versions that work clearly on a White background, the Primary teal background (#217477), and a Very dark background (#000000 or near black).
Phase 1 Deliverables
Creating the main logo set (primary, white, icon‑only, horizontal/vertical) is specified as a key task for Phase 1 of the production roadmap.
Logos
Things to Avoid
Based on the design brief, several specific elements, actions, and aesthetic styles must be avoided to maintain the brand integrity and user experience of the SuperParent app:
I. Integrity of Logo and Brand Elements
Designers must strictly avoid altering the foundational brand assets.
• Do not stretch or warp the logo; it should only be scaled proportionally.
• Do not violate the clear space around the logo; minimum clearance (at least the height of the "S" in Super) must be maintained.
• Do not change the family icon or the overall shape of the provided logo.
II. Visual Style and Aesthetics
The overall design must maintain a Warm, Trustworthy, and Modern mood.
• Avoid heavy, dark drop shadows. Shadows should be soft and subtle to indicate elevation.
• Avoid sharp or aggressive shapes in icons and illustrations. Icons should have rounded corners, and illustrations should use soft shapes.
• Do not mix too many fonts. The typography should remain clean and modern.
• Avoid staged, stock-looking smiles in photography. Photography should feature real, diverse parents and kids with warm light.
III. Layout, Spacing, and Accessibility
Layout rules emphasize clarity and space.
• Do not let anything feel cramped. The design must use generous white space.
• Do not rely only on color to show states (such as errors or warnings); shapes and labels must also be added to maintain accessibility
Mockups
