Highlighter Yellow
#e6e51ePrimary brand accent — logo mark, filled pill buttons, accent shapes inside product mockups, highlight washes on feature cards
Aaply
aaply.appWebsite preview
The design language
Aaply reads as a digital sketchpad on a light gray canvas: everything is flat, everything is rounded, and electric yellow carries the energy while black anchors the structure. The headline itself behaves like a whiteboard — bold black type interrupted by colorful emoji and icon stickers, signaling that this is a tool for creative work. Surfaces float as soft white cards on a cool gray field with a faint dot-grid texture, never relying on shadows for depth. Brand color appears as generous fills (buttons, accent shapes, logo marks) rather than thin strokes or tinted backgrounds. The overall feeling is energetic but unpretentious — a working surface, not a gallery.
Color palette
brand
Sunbeam
#fff705Brighter yellow variant for highlighted feature containers — the outer glow on flow-diagram cards
accent
Annotation Red
#f34646Red supporting accent for decorative details and low-frequency emphasis
Signal Blue
#466cf3Product mockup logos, icon accents, connector arrows inside the flow diagram — the cool counterweight to warm yellow
Peach Wash
#ff8562Soft tinted background blocks behind product mockup clusters — warm secondary surface that softens the gray canvas
neutral
Carbon
#000000Primary text, dark filled buttons, icon strokes — the structural ink of the entire system
Paper White
#ffffffCard surfaces, navigation bar background, product mockup canvas — every elevated surface
Graphite Mist
#f2f2f2Page canvas background — the cool gray field that makes white cards appear to float
Hairline Gray
#e6e6e6Subtle borders, secondary surface fills, dividers between content sections
Shadow Gray
#ccccccSingle soft drop shadow color (used at 20% opacity as rgba), muted text on dark surfaces
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
57px · 700 · 1.05 · -4.22px trackingThe quick brown fox jumps
heading-lg
52px · 700 · 1 · -3.85px trackingThe quick brown fox jumps
heading
34px · 500 · 1.05 · -0.65px trackingThe quick brown fox jumps
text-31
31px · 500 · 1.55The quick brown fox jumps
heading-sm
27px · 500 · 1.33 · -0.49px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.4 · -0.5px trackingThe quick brown fox jumps
body
16px · 400 · 1.53The quick brown fox jumps
text-15
15px · 400 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Times
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2
Times — detected in extracted data but not described by AI
Additional typeface
Poppins
- Weights
- 400, 500, 700
- Sizes
- 14px, 27px, 34px, 52px, 57px
- Line height
- 1.00, 1.05, 1.33, 1.35, 1.57
- Letter spacing
- -0.0740em at display sizes, -0.0190em at heading, -0.0180em at heading-sm
- Fallback
- DM Sans, Nunito Sans
Display and heading family — weight 700 for the hero headline and section titles, weight 500 for sub-headings. Its geometric roundness echoes the pill buttons and rounded cards, making type and shape feel like one material. Tight negative tracking at large sizes pulls letters together into a confident block.
Additional typeface
Inter
- Weights
- 300, 400, 500, 700
- Sizes
- 15px, 16px, 18px, 27px, 31px
- Line height
- 1.40, 1.44, 1.53, 1.55, 1.56
- Letter spacing
- -0.0740em at large sizes, -0.0280em at 18px, normal at 16px and below
- Fallback
- system-ui, -apple-system, Segoe UI
Body and UI text — nav links, button labels, descriptions, form text. Inter's humanist proportions provide readable density at small sizes while weight 700 can punch up to match Poppins in nav and button contexts.
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 32-48px
- Element gap
- 16-24px
Border radius
nav
30pxtags
3000pxcards
30-40pxinputs
16pxbuttons
3000pxproductFrame
16pxGuidelines
Do
- Use border-radius 3000px for all buttons, tags, and small interactive elements
- Use Poppins weight 700 with tight negative tracking (-0.0740em) for display and hero headlines
- Pair every yellow filled button with a black filled button as a high-contrast companion
- Embed emoji or flat icon illustrations directly inside headlines — not beside them
- Use the dot-grid texture on product preview backgrounds to signal 'this is a working canvas'
- Set card border-radius between 30-40px for feature cards; 16px only for small UI mockups
- Keep all text #000000 on white/light surfaces — the system runs on maximum contrast
Don’t
- Do not stack multiple shadow layers — the system uses one shadow, on the nav bar, and nothing else
- Do not introduce new accent hues beyond the four-color palette (yellow, red, blue, peach)
- Do not use light or thin font weights for headlines — Poppins 700 is the floor for display text
- Do not use sharp corners on buttons, tags, or cards — every interactive element is fully rounded
- Do not separate the yellow and black buttons with other styles — they always appear as a matched pair
- Do not use emoji or illustrations as standalone decorations outside of headlines and product mockups
- Do not apply the peach #ff8562 as a full background section — it stays as a soft wash behind mockup clusters only
Components
Filled Yellow Pill Button
Primary brand accent button#e6e51 background, #000000 text, border-radius 3000px, padding 16px 32px, Inter weight 500 at 16px. The highest-energy button in the system — used for the main conversion moment. Black text on yellow achieves 15.6:1 contrast.
Filled Black Pill Button
Secondary high-emphasis button#000000 background, #ffffff text, border-radius 3000px, padding 16px 32px, Inter weight 500 at 16px. Used for the darker companion CTA beside the yellow button. Maximum contrast and weight.
Ghost Pill Button
Low-emphasis navigation actionTransparent background, #000000 1px border, border-radius 3000px, padding 12px 24px, Inter weight 500 at 15px. Used for 'Log in' in the nav bar — present but quiet.
Navigation Bar Card
Top-level site navigationWhite #ffffff surface on the gray canvas, border-radius 30px, horizontal padding 24px, vertically centered logo + link group + button group. Floats with a single soft drop shadow (rgba(0,0,0,0.2) 0px 10px 10px -5px). Max-width aligns with page content.
Product Screenshot Frame
Browser-style product preview containerWhite card with border-radius 16px, three colored traffic-light dots (red/yellow/blue) in the top-left corner to simulate a browser window. Contains a dot-grid background pattern and nested UI mockups.
Phone Mockup Card
Individual screen preview in a flow diagramWhite rounded rectangle (~16px radius) with a bold blue #466cf3 zigzag 'N' mark at the top, screen label text below (Inter 14px). Connected to adjacent mockups by thin lines with small arrowheads.
Flow Connector Line
Visual link between product screensThin #000000 1px line with a small arrowhead or node dot at the endpoint. Black-on-white, no fill — the lines are the diagram's grammar.
Annotation Tag
Callout label on product mockups#f34646 background, #ffffff text, border-radius 3000px, padding 6px 14px, Inter weight 500 at 13px. Small, saturated, attention-grabbing — points to specific features inside the product preview.
Highlight Feature Container
Yellow-bordered flow card grouping related screensOuter container with a #fff705 border (2-3px), border-radius ~30px, wrapping a group of 2-3 phone mockup cards. Functions as a visual 'chapter' boundary within the product preview.
Avatar Stack
Social proof / collaboration indicatorCircular user avatars (24-32px diameter) with 2px white border, stacked with negative horizontal offset. Positioned on the right edge of the product preview to suggest multi-user activity.
Brand Logo Mark
Brand identity in nav and footerYellow #e6e51 rounded square (~20px) with a simple 'A' or mountain-like glyph in black, paired with 'aaply' wordmark in Poppins 500 at 18px, #000000.
Emoji/Illustration Accent
Decorative element embedded in headlinesFull-color emoji or flat icon illustrations placed inline within the hero headline. They sit at baseline and break the text rhythm — a signature device that makes the headline feel hand-assembled rather than typeset.
Surfaces & elevation
Level 0
Canvas
#f2f2f2Page background — cool gray field with dot-grid texture
Level 1
Card
#ffffffNavigation bar, feature cards, product mockup containers
Level 2
Tinted Accent
#ff8562Peach wash behind mockup clusters, subtle warmth
Level 3
Highlight Frame
#fff705Yellow-bordered feature containers that frame the hero product flow
Elevation is used once and only once: on the navigation bar. Everything else separates surfaces through color contrast (white card on gray canvas) or border definition, never through stacked shadows. This keeps the system feeling flat, modern, and fast — a whiteboard rather than a control panel.
Navigation bar
rgba(0, 0, 0, 0.2) 0px 10px 10px -5px
Layout & imagery
Layout
Centered max-width layout (~1200px) on a light gray canvas. The hero is a centered headline stack with two pill buttons below, followed by a full-width product screenshot that bleeds edge-to-edge within the content container. Sections are separated by generous vertical rhythm (80-120px) rather than visual dividers. The navigation bar floats as a rounded white card with a single soft shadow. The product preview itself uses a Z-pattern: mockups flow left-to-right with connector arrows, then the flow continues in a second row slightly below. Content is text-light and visual-heavy — the product screenshot occupies more vertical space than all text combined above it.
Imagery
The visual language is dominated by product mockups and flat illustration, not photography. The hero contains a large browser-style screenshot of the actual product — a flowchart editor with phone-shaped screen cards connected by arrows on a dot-grid background. Inside the mockup, phone screens show the app's own onboarding flow (log in, company name, sign up) rendered in miniature. The page background carries a faint dot-grid texture, reinforcing the whiteboard/canvas metaphor. The only other visual elements are emoji and small flat icons (speech bubbles, flags, zigzags) placed directly inside the headline text. No stock photography, no 3D renders, no lifestyle imagery — the product IS the hero.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #f2f2f2 (page) / #ffffff (card) - border: #e6e6e6 - accent (brand): #e6e51e - annotation/callout: #f34646 - mockup icon/connector: #466cf3 - soft tint wash: #ff8562 - primary action: no distinct CTA color **Example Component Prompts** 1. Create a hero headline: Poppins weight 700, 57px, #000000, line-height 1.05, letter-spacing -4.22px. Center-aligned on #f2f2f2 background. Include 2-3 inline emoji or flat icon illustrations at baseline level. Below: a yellow pill button (#e6e51e, #000000 text, 3000px radius, 16px 32px padding) and a black pill button (#000000, #ffffff text, same shape) side by side with 16px gap. 2. Create a product preview card: white #ffffff surface, 16px border-radius, with three small traffic-light dots (red #f34646, yellow #e6e51e, blue #466cf3) in the top-left corner at 8px from edges. Interior background is a repeating dot-grid pattern in #e6e6e6 at 20px spacing. Contains 3-4 phone-shaped mockup cards (white, 16px radius, each with a blue #466cf3 zigzag mark at top and Inter 14px label below) connected by thin black lines with small arrowheads. 3. Create a navigation bar: white #ffffff background, 30px border-radius, single shadow rgba(0,0,0,0.2) 0px 10px 10px -5px. Left: yellow logo mark (rounded square #e6e51e, 20px, with black glyph) + 'aaply' wordmark in Poppins 500 18px #000000. Center: 4 nav links in Inter 500 15px #000000, 24px gap. Right: ghost pill button (transparent, 1px #000000 border, 3000px radius, 'Log in') + filled black pill button (#000000 bg, #ffffff text, 3000px radius, 'Sign up').
Signature Devices
Three patterns define Aaply's visual identity and should be repeated across every new page: 1. **The Emoji-In-Headline Pattern**: Display headlines are interrupted by inline emoji or flat icon stickers that sit at text baseline. The icons are full-color and bold, not monochrome or line-art. They are part of the sentence, not adjacent to it. 2. **The Yellow-Black Button Pair**: Conversion moments always offer two pill buttons — yellow first (the primary brand accent), black second (the high-contrast alternative). Never split them apart or substitute other styles. 3. **The Product-Is-The-Hero Pattern**: Below every headline section, a large browser-frame screenshot of the product fills the visual space. The screenshot is a true representation, not a stylized illustration — but the UI inside it uses the same yellow/blue/red accent system, creating a recursive brand experience.
Similar brands
Framer
Same bold sans-serif headlines with tight tracking, playful use of inline emoji, and a product screenshot as the hero visual
Pitch
Same generous border-radius on cards and buttons, light canvas with floating white surfaces, and a single vibrant accent color carrying the brand energy
Popsy
Same yellow as dominant brand accent, pill-shaped CTAs, and a flat illustration style that treats the product preview as decorative hero art
Whimsical
Same dot-grid background texture, flowchart-style product visualization, and a working-canvas aesthetic that makes the tool feel like the artifact
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
