# How antler.co is designed [Open the live Fudge conversation](https://design.withfudge.com/share/antler.co-design) Last updated: 2026-08-08 ## Captured pages [![Off-white footer grid with red wordmark and dense link columns](https://pin.fontofweb.com/5669?format=jpg)](https://design.withfudge.com/share/pin-5669) [Off-white footer grid with red wordmark and dense link columns](https://design.withfudge.com/share/pin-5669) [![Deep teal investor chapter with white headline and right-aligned photo](https://pin.fontofweb.com/5668?format=jpg)](https://design.withfudge.com/share/pin-5668) [Deep teal investor chapter with white headline and right-aligned photo](https://design.withfudge.com/share/pin-5668) [![Centered testimonial band with dark teal surface and quiet author row](https://pin.fontofweb.com/5667?format=jpg)](https://design.withfudge.com/share/pin-5667) [Centered testimonial band with dark teal surface and quiet author row](https://design.withfudge.com/share/pin-5667) ## Overview Antler’s homepage reads like a founder-network editorial page rather than a conventional corporate site. The page begins on a light, open canvas with a compact brand title, a red square mark, and a dense grid of links. It then moves into deep teal chapters where white headlines, serif emphasis, and photography work together to make the site feel international, selective, and active. The pacing is deliberate: one large idea per zone, with plenty of room around each block so the typography and imagery can carry the identity. The system depends on contrast more than ornament. Off-white surfaces hold the navigation and footer material. Deep teal holds the strongest narrative sections. Mint softens the newsletter card so it feels welcoming without losing the disciplined structure of the rest of the page. Red is the only forceful accent; it appears in the logo, the large wordmark, and a few slim brand marks. The most important qualities to preserve are the oversized type, the serif italic emphasis, the restrained spacing, and the clean separation between content clusters. The site feels confident because it says very little in each area and lets scale, color, and spacing do the work. ## Colors Antler uses a compact palette with a warm light base, one vivid brand red, one deep teal story surface, and a mint panel for softer promotion. The light mode handles navigation, logo presentation, and small informational lists. The dark mode belongs to the investor story and testimonial areas. The accent red stays tied to the logo and other brand marks, so the page never needs a second bright color. Photographs keep their own tones and sit comfortably inside either the light canvas or the dark chapter. | token | value | use | |---|---|---| | `action` | `#F04A46` | Logo block, large identity accents, and other slim brand signals | | `canvas` | `#F7F3EC` | Main page background and wide negative space around content | | `ink` | `#111111` | Main headings, dense labels, and the wordmark | | `muted-ink` | `#67615A` | Supporting copy, secondary labels, and low-priority metadata | | `border` | `#D9D2C7` | Hairline separations and quiet frame edges | | `surface-mint` | `#C9E0D8` | Newsletter card and other soft promotional surfaces | | `surface-dark` | `#0D2A2E` | Editorial story sections and the testimonial band | | `surface-soft` | `#EEE8DE` | Secondary light panels and subtle contrast fields | The palette should stay simple. Red needs to feel like a brand signal, not decoration. The mint panel should remain calm and slightly cooler than the canvas, so the page can introduce a softer message without breaking the overall discipline. On dark surfaces, the white text should stay clean and direct, with no extra color treatment competing with the photography. When photographs sit inside the system, they should remain natural and not be pushed toward the brand red or teal. ## Typography The site balances three roles: a large brand sans for headlines and the wordmark, a refined serif italic for short emphasis lines, and a clean sans for all reading copy. The hierarchy is more about scale and spacing than about many weights. Use the serif sparingly so it feels like a meaningful accent, not a decorative habit. Verify licensing for these families before production use. | token | family | size | weight | leading | tracking | use | |---|---|---:|---:|---:|---:|---| | `hero-display` | False | 4.5rem | 700 | 0.92 | -0.03em | Large brand title and the biggest identity statements | | `section-display` | False | 3.5rem | 700 | 0.95 | -0.025em | Campaign headlines and major section openers | | `feature-display` | Nib Pro | 2.75rem | 300 | 1 | 0em | Short italic emphasis lines such as the serif subheads | | `quote-display` | Satoshi | 2.5rem | 400 | 1.15 | -0.01em | Centered testimonial copy and long pull quotes | | `body` | Satoshi | 1rem | 400 | 1.5 | 0em | Supporting paragraphs, list items, and general reading text | | `body-medium` | Satoshi | 1rem | 500 | 1.5 | 0em | Buttons, emphasized labels, and short supporting links | | `navigation` | Satoshi | 0.75rem | 500 | 1.4 | 0.08em | Upper navigation and compact directory labels | | `legal` | Satoshi | 0.75rem | 400 | 1.4 | 0em | Small footer text and copyright details | False carries the visual weight of the brand. It is the voice of the large uppercase heads and the red wordmark. Satoshi carries the reading system and keeps the page from feeling overly stylized. Nib Pro appears only in short italic lines, where its light, elegant shape can slow the rhythm for a moment. The scale moves from large brand heads to mid-size section heads, reading copy, and compact legal text, so each role is easy to scan. ## Layout The layout is built from wide horizontal bands rather than a stack of boxed modules. The first screen uses open space and a narrow link grid to establish the brand before any sales message appears. The logo sits low and left, leaving the surrounding air to do part of the work. That top area feels almost like a directory cover page, with compact text columns spreading across the width. The dark chapter uses a strong two-column structure. Text sits in a stable left block, while photography anchors the right side. The headline is the dominant element, and the serif line breaks the mass of uppercase sans with a softer note. This chapter works because the image is large enough to feel editorial but not so large that it overwhelms the message. The spacing between the text and image is substantial, which makes the section feel deliberate and calm. The mint newsletter card uses a split layout with copy on one side and a diagonal or angled photo wedge on the other. The card is lighter, friendlier, and more promotional than the dark chapter, but it still obeys the same structural rules: strong margins, one major message, and one clear action. The card should look like a distinct insert rather than a full-page change in style. The testimonial band is the most centered composition on the page. A large block of text sits in the middle of the dark surface, with a small author row underneath. That layout removes the usual left-to-right scanning pressure and turns the quote into a pause in the page flow. The footer then returns to the off-white canvas and closes the page with the red mark, the wordmark, and a list of locations, investor links, company links, and social links. The whole page relies on this alternation between open light space and concentrated dark chapters. ## Visual language Antler’s visual language is editorial, international, and lightly institutional. It feels like a fund, a network, and a publication at the same time. The brand mark is bold and square, but the rest of the system avoids hard geometry overload. Instead, the page uses generous empty areas, restrained list columns, and softly rounded cards to keep the mood open. The imagery is practical and people-centered. Photos show speakers, founders, and collaborators in real settings. They are not treated as background texture; they are framed as content. The dark chapter uses photography to add a human anchor to the investment message. The mint card uses a photo cutout to make the newsletter feel current and approachable. In both cases, the images are strong enough to carry the section but quiet enough not to compete with the type. The typographic texture does most of the expressive work. The uppercase sans gives the page a steady institutional tone. The serif italic adds tension and refinement. The contrast between those two voices gives the system its personality: disciplined, global, and confident without being severe. Red is used sparingly enough that every appearance feels meaningful. That red square brand block is not just a logo; it is the clearest visual signature in the system. Borders stay light and secondary. The page prefers spacing, alignment, and scale over heavy outlines. This makes the content feel curated rather than boxed in. The overall result is a homepage that reads cleanly from far away and still feels composed when viewed up close. ## Components ### Brand header and wordmark - **Anatomy:** Large brand wordmark, square red mark, and compact link grid. - **Surface:** Off-white canvas with no heavy frame. - **Typography:** `hero-display` for the main brand name, `navigation` for the directory labels. - **Shape:** The red mark is a hard-edged square; the surrounding type remains unboxed. - **Composition:** Keep the brand block low and left so the rest of the grid can spread across the page. - **Visible states:** Links should remain simple and quiet; the brand should not rely on hover effects to be legible. ### Directory columns - **Anatomy:** Several narrow lists for locations, investors, about, and socials. - **Surface:** Same canvas as the header so the lists read as part of the page structure. - **Typography:** `navigation` for labels and items. - **Spacing:** Tight vertical rhythm with clear column gaps. - **Composition:** Keep the columns aligned to a shared baseline and avoid decorative separators. - **Visible states:** Social rows can use small icons, but the text must remain readable on its own. ### Primary action - **Anatomy:** Compact rectangular button with a short label and a small arrow when space allows. - **Surface:** On dark teal sections, the button is light with dark text. On the mint card, it inverts to a dark fill with light text. Both versions stay simple and high-contrast. - **Typography:** `body-medium`. - **Shape:** Slight rounding only; the control should feel functional, not pill-like. - **Spacing:** Compact horizontal padding with enough height to feel clickable. - **Composition:** Place the action close to the headline or message it supports. - **Visible states:** The control should stay legible without relying on color alone; the darker inverse version carries the same weight on lighter cards. ### Investor story band - **Anatomy:** Large headline, serif emphasis line, short explanatory paragraph, and a wide photo. - **Surface:** Deep teal with white text. - **Typography:** `section-display` for the main head, `feature-display` for the italic line, `body` for the paragraph. - **Shape:** Mostly rectangular with clean edges. - **Spacing:** Large gutters and a clear gap between text and image. - **Composition:** Text stays left; photography stays right. - **Visible states:** The contrast must remain strong enough that the section feels crisp even without color decoration. ### Newsletter card - **Anatomy:** Headline, serif subline, short description, button, and angled photo wedge. - **Surface:** Mint card against the dark chapter or canvas. - **Typography:** `section-display`, `feature-display`, and `body`. - **Shape:** Soft corners with a more relaxed feel than the dark band. - **Spacing:** A roomy inset so the copy can breathe. - **Composition:** Keep the message on one side and the image on the other so the card reads quickly. - **Visible states:** The button should stay readable against the mint background and not borrow extra visual weight from the photo. ### Testimonial band - **Anatomy:** Centered quote, small author row, and supporting portrait thumbnails or markers. - **Surface:** Deep teal with white and muted text. - **Typography:** `quote-display` for the quote, `body` or `legal` for attribution. - **Shape:** Broad, calm, and open; the section should not feel like a boxed card. - **Spacing:** Generous top and bottom padding so the quote can sit in the middle of the page. - **Composition:** Keep the quote centered and let the author row sit below it as a quiet secondary line. - **Visible states:** The band should not rely on motion or animation to create emphasis. ### Footer identity block - **Anatomy:** Red square mark, large wordmark, and compact legal text. - **Surface:** Off-white canvas. - **Typography:** `hero-display` for the large logo form and `legal` for the small copyright line. - **Shape:** Strong square geometry with minimal ornament. - **Spacing:** Tight around the mark and roomy around the larger footer structure. - **Composition:** Treat the identity block as a closing signature rather than a navigation hero. - **Visible states:** The footer should end the page cleanly without introducing a new accent treatment. ## Responsive behavior The page should keep the same chapter order on smaller screens: brand and directory, story band, newsletter card, testimonial, then footer. When the layout narrows, the most important change is not decoration but stacking. The large text should remain readable before the imagery compresses, and the italic line should stay short enough that it does not turn into a dense paragraph. On narrower widths, the directory columns should collapse into shorter grouped lists rather than maintaining many thin tracks. The dark story band should stack the copy above the image so the message remains immediate. The mint newsletter card should keep the image wedge below or beside the copy only if the available width allows it; otherwise it should become a vertical card with the action still visible without extra scrolling. The quote band needs special care because centered text can become too wide on desktop and too cramped on mobile. Keep the line length controlled and preserve generous side padding. In the footer, maintain a clean reading order for the locations, investors, about, and socials groups so the page still feels organized when the columns stack. ## Practical implementation guidance ### Preserve - Keep the red brand color as the only persistent accent. - Preserve the contrast between the off-white canvas and the dark teal story surface. - Keep the serif italic line short and intentional. - Let photos stay framed and content-like rather than using them as loose background texture. - Use open whitespace to separate page chapters instead of heavy dividers. ### Avoid - Avoid adding more than one accent hue for buttons or links. - Avoid over-rounding the cards; the system works because the shapes stay disciplined. - Avoid mixing too many font weights or families. - Avoid dense sidebars or multi-level navigation within the same page view. - Avoid decorative shadows that would make the cards feel heavier than the source system. ### Recommended build order 1. Build the canvas, spacing rhythm, and brand wordmark. 2. Add the directory columns and the red square identity block. 3. Recreate the dark story band with its two-column text-and-photo structure. 4. Add the mint newsletter card as a softer promotional module. 5. Build the centered testimonial band. 6. Finish with the footer identity block and the compact legal row. 7. Check how the page stacks when the available width is reduced. ### Accessibility - Keep white text on the dark teal surface at strong contrast. - Make sure the red accent color does not become the only cue for interactive elements. - Provide clear alternative text for all photos and logo imagery. - Keep the font sizes for body text and legal text large enough to remain readable on light and dark surfaces. - Preserve visible focus states on the button and on every text link in the directory and footer. ## Scope note This guide covers the desktop homepage surface shown here: the top link grid, the investor hero, the mint newsletter card, the testimonial band, and the footer identity block. Mobile layouts, exact breakpoints, motion, hover states, and alternate pages are not included. Measurements are practical adaptation targets. ## More website design guides [Browse website design guides by pattern and website](/design-guides).