# Design from Reference: Koyeb About Page Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Koyeb - **Category:** About Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad12cb2165b6c7fffad08_6acad0b60c49d10a7abcfa3f_cms-3b4500ecdd250141dd92083f.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Character:** A textured infrastructure-company page combines warm off-white, grainy charcoal, neon green and a technical grid. - **Capture scale:** The image measures 2880 × 10482 pixels and was inspected in four readable portions. Approximate CSS dimensions assume a 1440px viewport at 2× density; this is unverified. - **Type personality:** Heavy condensed uppercase display headings contrast with ordinary sans-serif prose and compact monospaced navigation. ### Page composition - **Navigation:** Brand sits left, a gray menu strip center and login/signup controls right. - **Opening:** A centered brand symbol, large company-introduction title and short subtitle sit on an off-white grid. - **About text:** A narrower offset column contains a small green-rule label, bold subheading and multiple paragraphs. - **Team band:** A dark full-width region contains a large centered title and sixteen portrait-led team entries arranged in four columns. - **History:** A light two-column region pairs prose with a team photograph and faint circuit-like line decoration. - **Investors:** A centered heading and description lead into a horizontally clipped row of dark investor cards and a logo row. - **Closing regions:** Three outlined promotional cards precede dark company-news links and a large neon-green footer. ### Information hierarchy - **Display headings:** Condensed uppercase headings establish major company, team and investor sections. - **Section labels:** Short green horizontal marks precede small uppercase labels. - **People entries:** Circular portraits sit beside name, role and smaller handle text. - **History:** A regular bold title introduces prose, with the photograph as supporting evidence. - **News:** Bright article titles sit above muted source/date lines. - **Footer:** Dark rectangular group labels organize uppercase monospaced links on green. ### Typography - **Families:** Condensed display sans, neutral body sans and monospace navigation/footer roles are visible; exact identities are unverified. - **Display:** Approximately 64–72px CSS, very heavy uppercase and tightly spaced. - **Subheadings:** Approximately 34–36px bold sans-serif. - **Body:** Approximately 16px with 28px line-height. - **People cards:** Names around 18px semibold, roles around 16px and handles around 14px. - **Navigation/actions:** Approximately 12–14px uppercase monospace. - **Footer:** Approximately 16px monospace with generous row spacing. ### Colors & surfaces - **Green:** Sampled #2EFF9B supplies the large footer and small accent rules. - **Light texture:** Sampled #EDECE7, #F0EFEB, #EEEDE8 and #F1F0EC appear in the warm grainy background. - **Dark texture:** Sampled #201E20, #211F21 and #1F1D1F appear in dark team/news regions. - **Ink contrast:** Black headings sit on light regions; warm off-white text sits on charcoal. - **Boundaries:** Fine gray grid lines continue across both light and dark sections. - **Portrait accents:** Thin green circular outlines connect the people imagery to the brand accent. ### Components - **Technical grid:** Broad vertical rails and widely spaced horizontal rules structure the full page. - **People entries:** Small circular portraits align with three-line identity blocks, without individual enclosing cards. - **History image:** A wide rounded photograph has a thin dark outline and subtle shadow. - **Investor cards:** Dark rounded rectangles combine tiny portraits, names and brief roles; the row is clipped at the viewport edge. - **Promotional cards:** Three equal light panels use dashed borders, around 8px radii, centered copy and dark hard-shadow actions. - **Buttons:** Dark rectangles have small radii, uppercase monospace labels and a pronounced black lower offset. - **Footer:** A bright green inset panel has a notched upper-right detail, dark group-header strips, review badges and social icons. ### Visual rhythm - **Grid consistency:** Persistent rails unify otherwise strongly contrasting sections. - **Reading width:** Prose stays within roughly 520px columns rather than spanning the page. - **Section padding:** Major bands use roughly 100–140px vertical spacing. - **Team cadence:** Portrait entries repeat in an evenly spaced four-column matrix. - **Closing contrast:** The neon footer creates a strong visual endpoint after the dark news region. ### Responsive - **Evidence limit:** Only desktop is observed; carousel motion and breakpoints are unverified. - **Grid recommendation:** Reduce team columns and stack history copy/photo. - **Investor recommendation:** Provide accessible scrolling or a stacked list rather than relying on clipped content. - **Type recommendation:** Scale condensed headings down while retaining readable body text. - **Footer recommendation:** Stack link groups and preserve contrast on green. ### Adaptation guidance - **Visual system:** Use coherent grain textures, fine grid lines and neon accents with consistent stroke weights. - **Type roles:** Keep display, body and monospace roles distinct. - **Content:** Use accurate team/investor assets and maintained company information. - **Accessibility:** Supply portrait alternatives where useful, clear link focus and text equivalents for status. - **Historical state:** Footer service status and news dates are captured content, not a current operational report. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.