Signal Orange
#ff5000Full-bleed section surfaces, geometric illustration caps, partner section canvas — carries warmth and authority across an otherwise achromatic text system
Enter GmbH
enter-support.deWebsite preview
The design language
Enter GmbH reads like a Bauhaus-influenced IT services brochure printed on warm stock: bold full-bleed color panels (seafoam, cream, signal orange) stack like poster sheets, and a monospaced face (Maax Mono) carries nearly every word, giving the whole site the cadence of a technical readout rather than a marketing page. The visual rhythm is theatrical — each horizontal band changes color and mood, with no soft transitions, just hard seams between cream, teal, white, and orange. A single abstract geometric illustration of stacked blocks on poles lives in the hero, and every interactive control is a dark pill on a colored ground. Neutrality is the default (black on white for text, #282828 for filled buttons), with orange and teal used as architectural surfaces rather than accents — they ARE the layout, not decoration on it.
Color palette
brand
Seafoam Panel
#a5d3d4Hero canvas and alternating section ground — a cool counterweight to the warm orange, used as full-bleed background, never as a text highlight
neutral
Cream Stock
#f9f8eaSoft band surfaces between content sections — a paper-like off-white warmer than pure #ffffff, signals a transition zone
Charcoal
#282828Filled button background, dark illustration blocks, heading accents — the loaded weight of the palette, softer than pure black
Ink
#000000Primary body and heading text, hairline borders, icon strokes, link underlines — the dominant typographic color
Pebble
#6a6a6aMuted border and separator color for subtle structural lines that shouldn't compete with text
Paper
#ffffffDefault page canvas, text on dark filled buttons, surface for content sections between color bands
Typography
Type scale
Major Second (1.125) · 10px baseheading
28px · 400 · 1.3The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
caption
10px · 400 · 1.15The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Maax Mono
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.50–1.60
- Letter spacing
- normal
- Fallback
- IBM Plex Mono, JetBrains Mono, Roboto Mono
Primary text and body — monospaced at body size gives the whole site a code-readout, technical-manual cadence. This is the signature choice: a service company writing like a terminal
Additional typeface
Sofia-Regular
- Weights
- 400
- Sizes
- 28px
- Line height
- 1.29–1.36
- Letter spacing
- normal
- Fallback
- Sofia Sans, Nunito Sans, Quicksand
Display headings — a softer humanist sans used sparingly for larger section titles, providing the only non-monospaced typographic moment in the system
Additional typeface
Helvetica
- Weights
- 400, 700
- Sizes
- 10px
- Line height
- 1.15
- Letter spacing
- normal
- Fallback
- Inter, system-ui, Arial
Micro UI text — marquee strips, tiny labels, and small interface markers; falls back to system monospaced where available
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 24px
- Card padding
- 20px
- Element gap
- 24px
Border radius
tags
25pxcards
25pxbuttons
25pxSpacing scale
6px12px13px14px15px16px20px24px25px28px30px44px48px60px80px100px120pxGuidelines
Do
- Use Maax Mono (or a monospaced substitute) for all body, nav, link, and button text — the monospaced cadence is the site's identity
- Set border-radius to 25px on all buttons, tags, marquee containers, and link pills
- Stack sections as full-bleed color bands (#ffffff → #f9f8ea → #a5d3d4 → #ff5000) with hard seams and no gradients between them
- Use #282828 as the filled button background and #ffffff as the button text — no other filled-button color
- Anchor headings in Sofia-Regular 28px line-height 1.3; everything else stays in the mono family
- Use 24px as the default element gap and 20px as the default link/heading padding token
- Keep links typographic: underlined #000000 Maax Mono with a → arrow prefix, never styled as buttons or chips
Don’t
- Do not introduce a sans-serif body font — replacing the mono face destroys the technical-manual personality
- Do not use orange (#ff5000) as a button or link color — it's an architectural surface, not an interactive accent
- Do not add shadows, glows, or elevation effects to cards or buttons — the system is flat and hard-edged
- Do not use teal (#a5d3d4) for text or borders — it only works as a full-bleed surface
- Do not use border-radius values other than 25px on interactive elements — partial rounding breaks the pill vocabulary
- Do not place photography or product screenshots — the site is text-and-illustration only
- Do not add gradient transitions between color bands — every section boundary must be a hard seam
Components
Filled Pill Button
Primary action control (Support, Submit)Background #282828, text #ffffff, border-radius 25px, padding 13px 25px, Maax Mono 16px weight 400. The only filled button variant — black pill on whatever color band it sits on.
Icon Pill Button
Compact utility control (the + button)Background #282828, icon stroke #ffffff, border-radius 25px (reads as circular at this size), padding 13px. Same dark fill as the filled button, sized for single glyph.
Text Link with Arrow
Inline navigation to subpagesMaax Mono 16px weight 400, color #000000, underlined, prefixed with → arrow character. Underline is the standard link affordance — no button chrome.
Marquee Strip
Top-of-page announcement tickerPill-shaped container (border-radius 25px), background #ffffff, Maax Mono 10–16px, color #000000, horizontal padding ~20px. Sits between the logo and the action buttons in the header.
Header Bar
Top navigationFull-width transparent bar over whatever section color it sits on. Logo text left, marquee center, two pill buttons right. No background fill — the section color shows through.
Hero Illustration Block
Abstract visual identity assetThree vertical posts (cream and charcoal), three charcoal cubes, three orange caps — flat geometric composition centered on the hero canvas. No shadows, no gradients, hard 90° edges.
Two-Column Text Layout
Narrative + link list pairLeft column: Maax Mono 16px body text in dark ink, max-width ~50% of container. Right column: vertically stacked text links with → arrows, aligned to a left margin offset from the text column.
Section Divider Band
Color-block transition between content zonesFull-bleed horizontal strip, typically cream (#f9f8ea) or seafoam (#a5d3d4), 80–120px tall, containing a single small centered label in Maax Mono (e.g. 'Enter: Läuft bei Ihnen', 'Unsere Partner').
Partner Section (Orange Field)
Full-bleed spectacle bandSolid #ff5000 background spanning the full viewport width and significant height, minimal content — the loudest color in the system used as an architectural moment, not a CTA trigger.
Footer Label
Bottom-of-section identificationCentered Maax Mono text in a cream or white band, small size (10–14px), functions as a section title rather than legal footer copy.
Surfaces & elevation
Level 1
Paper
#ffffffDefault content canvas for text-heavy sections
Level 2
Cream Stock
#f9f8eaWarm transition band between content blocks
Level 3
Seafoam Panel
#a5d3d4Hero and alternate section canvas — the cool beat
Level 4
Signal Orange
#ff5000Full-bleed partner/spectacle section — the loud beat
The design is intentionally flat. No box-shadows, no drop shadows, no glow effects. Depth is created through color contrast between full-bleed bands, not through simulated elevation. Interactive elements (buttons) are identified by their dark fill and pill shape, not by casting shadow on the surface below.
Layout & imagery
Layout
Full-bleed horizontal color bands that stack top to bottom with hard seams — no gradients or soft transitions between sections. Hero is seafoam with a large centered illustration; the body alternates between white text columns and cream transition strips; a full-bleed orange partner band appears below. Content inside each band uses a centered max-width container (~1200px) with generous horizontal padding. The text layout is two-column on desktop (narrative text left, link list right) with wide gutters. Navigation is minimal: logo top-left, a marquee strip center, and two pill buttons top-right. The overall rhythm is poster-like — each screen is a single color field with one or two pieces of content, not a dense information layout.
Imagery
A single abstract geometric illustration in the hero: three vertical posts in cream and dark charcoal with charcoal cubes and orange caps stacked at varying heights. The aesthetic is Bauhaus / De Stijl / mid-century toy — flat, hard-edged, no gradients, no shadows, no human figures. Elsewhere, the site is text-only: no photography, no product screenshots, no decorative icons beyond minimal arrow markers (→) on links. The visual personality comes entirely from typography, color blocking, and this one sculptural illustration.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 - background: #ffffff - border: #000000 (hairline) or #6a6a6a (muted) - accent: #ff5000 (Signal Orange — surfaces only, not interactive) - primary action: #282828 (filled action) - section surface: #a5d3d4 (Seafoam), #f9f8ea (Cream Stock), #ff5000 (Signal Orange) 3-5 Example Component Prompts: 1. Build a Support pill button: background #282828, text #ffffff, border-radius 25px, padding 13px 25px, font Maax Mono 16px weight 400. Place on a seafoam (#a5d3d4) hero canvas. 2. Build a hero section with full-bleed background #a5d3d4. Center an abstract geometric illustration of three vertical posts in cream (#f9f8ea) and charcoal (#282828) with three charcoal cubes and three orange (#ff5000) caps at varying heights. No shadows. No gradients. 3. Build a two-column content section: left column contains Maax Mono 16px weight 400 body text in #000000 describing IT services; right column contains three text links stacked vertically, each prefixed with → and underlined. Background #ffffff, max-width 1200px centered, 24px gap between columns. 4. Build a marquee announcement strip: pill-shaped container (border-radius 25px) with background #ffffff, Maax Mono text in #000000 at 10–16px, padding ~6px 20px. Position it in the header between the logo and the action buttons. 5. Build a partner section: full-bleed #ff5000 background spanning the full viewport width, minimal content, no buttons or CTAs. Below it, a cream (#f9f8ea) band with a centered small label 'Unsere Partner' in Maax Mono.
Similar brands
Basecamp
Same flat-color-band section stacking with hard seams and no decorative chrome
Linear
Mono-influenced UI vocabulary with pill buttons and achromatic surfaces accented by a single signal color
Vercel
Full-bleed color blocks alternating with white content panels, minimal text-only composition
Are.na
Editorial / poster-like layout with bold color fields and quiet, typographic content
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
