# How designsystems.surf is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/designsystems.surf-design)

Last updated: 2026-08-08

## Captured pages

[![Accordion page with left rail and centered reading column](https://pin.fontofweb.com/8109?format=jpg)](https://design.withfudge.com/share/pin-8109)

[Accordion page with left rail and centered reading column](https://design.withfudge.com/share/pin-8109)

[![Apple detail page with tall brand rail and compact text column](https://pin.fontofweb.com/8105?format=jpg)](https://design.withfudge.com/share/pin-8105)

[Apple detail page with tall brand rail and compact text column](https://design.withfudge.com/share/pin-8105)

[![Split promo page with white pitch block and dark form card](https://pin.fontofweb.com/8107?format=jpg)](https://design.withfudge.com/share/pin-8107)

[Split promo page with white pitch block and dark form card](https://design.withfudge.com/share/pin-8107)

[![Soft card grid with circular logo chips and a strong CTA](https://pin.fontofweb.com/8108?format=jpg)](https://design.withfudge.com/share/pin-8108)

[Soft card grid with circular logo chips and a strong CTA](https://design.withfudge.com/share/pin-8108)

## Overview

designsystems.surf feels like a calm library front door with a commercial edge. The page uses a wide white stage, a slim top bar, a left index, and a centered reading column that stays easy to scan even when the content runs long. Black headlines carry the structure, muted supporting copy softens the pace, and action color appears in the smaller orange button while a separate black full-width CTA gives the page a stronger closing note.

The visual rhythm comes from restraint. Most surfaces stay white or near-white, while a few pale cards and one dark access panel break the page into clear chapters. Brand marks, token diagrams, and compact promo rows add variety without changing the core language. The result is editorial, practical, and lightly promotional without feeling busy.

## Colors

| token | hex | use |
|---|---|---|
| action | #FF6A00 | Primary button fill and the warmest call to action on the page |
| action-soft | #FFB000 | Bright lower edge on orange buttons and small warm highlights |
| ink | #000000 | Main headings, body text, and strong contrast labels |
| muted-ink | #666666 | Supporting copy, meta text, and quiet navigation items |
| canvas | #FFFFFF | Overall page background and broad open fields |
| surface | #FFFFFF | Main cards, content panels, and white content blocks |
| surface-soft | #FFFFFF | Pale cards, inset rows, and gentle section breaks |
| surface-dark | #1F1F1F | Dark access panels and high-contrast form areas |
| border | #D9D9D9 | Top-bar rule, card outlines, and faint hairline separators |

The palette is almost entirely light, so tone differences matter more than saturated color. White and pale surfaces create the quiet base, while the neutral separator color gives the page its structure without stealing attention. Orange is reserved for the smaller action button and a few small emphasis moments, which keeps it strong. The dark panel appears only in isolated sections, where it sharpens focus for the form and makes the orange button feel brighter. Black text anchors the page, and the gray text family keeps the long reading blocks from becoming harsh. The black closing CTA adds a second action mode that feels heavier and more emphatic than the warm orange accent. Photographic thumbnails and logo marks sit on top of this restrained base without changing it.

## Typography

Inter is the main voice of the site. It carries the big page titles, the reading copy, the sidebar labels, and the promotional text. IBM Plex Mono adds a technical note for counts, small tags, and utility markers. System appears in the smallest support lines where the page needs a plain, neutral finish. The hierarchy depends on scale, weight, and spacing more than on frequent font changes.

Verify licensing for these families before production use.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| hero-display | Inter | 3rem | 700 | 1 | -0.03em | Main page title and strongest section heading |
| section-display | Inter | 2.25rem | 700 | 1.05 | -0.025em | Large section headings and major page labels |
| card-title | Inter | 1.25rem | 600 | 1.25 | -0.02em | Card titles, promo headings, and compact leads |
| body | Inter | 1rem | 400 | 1.55 | 0em | Article copy, descriptions, and explanatory paragraphs |
| body-strong | Inter | 1rem | 600 | 1.55 | 0em | Button copy, emphasized phrases, and key labels |
| navigation | Inter | 0.875rem | 500 | 1.4 | 0em | Top bar links and sidebar navigation |
| label | Ibm Plex Mono | 0.75rem | 500 | 1 | 0.08em | Counts, tiny section markers, and utility tags |
| mono-ui | Ibm Plex Mono | 0.875rem | 400 | 1.4 | 0em | Small technical notes and compact UI text |
| footnote | System | 0.75rem | 400 | 1.5 | 0em | Legal copy and the quietest support text |

The type scale is firm but not oversized. The big title gives the page a strong opening, then the body copy relaxes into a comfortable reading rhythm. Mono labels add structure without turning the design into a code sample. Weights stay limited so the page never feels heavy. The most important move is the gap between the headline, the supporting paragraphs, and the surrounding white space.

## Layout

The page is built around a wide desktop canvas. A slim top bar spans the width, then the layout opens into three stable zones: a left navigation rail, a central reading column, and a broad field of whitespace on the right. The left rail is dense with links but visually quiet, so the main title and content block remain the first thing the eye finds. That gives the site a curated, library-like feel rather than a generic app dashboard.

Vertical rhythm is generous. The top of the content sits well below the header, and the main article blocks use large gaps between sections so each idea has room to breathe. The page relies less on hard borders and more on spacing, slight surface changes, and the occasional divider line. That keeps the interface from feeling cramped even when the navigation is long.

The detail pages share the same structure but vary the density inside it. The Apple page keeps the long brand rail, then places a large title, a small mono count line, and a compact article column. The accordion page uses a similar reading pattern, but the content widens slightly and a featured resource row breaks the flow before the component list begins. The AI DS pages shift the mood toward promotion: a large promo block, a logo strip, a soft card grid, and a dark conversion panel. The typography remains consistent while the layout moves from documentation-first to offer-first.

The card system is also important. Soft cards are roomy and rounded, with enough internal padding for diagrams and token trees. Logo rows are centered and often sit inside circular containers, which gives the supporting brand strip a neat cadence. The dark form panel changes the tone without changing the structure: it still uses clear hierarchy, but with stronger contrast and tighter control around the form fields. The page also uses a second, heavier action moment near the end: a broad black button that spans the width and closes the long flow with a strong stop.

## Visual language

The visual language is spare, tidy, and slightly institutional. It favors quiet lines, soft surfaces, and small brand marks over decorative illustration. The strongest shape is the pill: search fields, subscription controls, and the orange button all use rounded capsules that keep the interface friendly. Larger cards use medium-soft corners, while logo badges and icon chips are often circular.

Depth is intentionally flat. There is little shadow, so the page feels crisp rather than glossy. Separation comes from white space, border hairlines, and careful shifts in surface tone. That flatness makes diagrams and token trees feel like part of the system instead of special effects. The page also leans on symmetry: many sections align content to the left and place a companion image, logo row, or form block to the right.

Orange is the compact accent color. It gives the page a sales signal without breaking the calm reading experience. Black remains the main text color, and muted gray takes over whenever copy is supportive rather than primary. Circular logo marks, mono labels, and small count badges give the site a technical, catalog-like character. Together these choices create a design that feels careful, useful, and easy to trust. When the page wants a stronger finish, the black CTA becomes the dominant action and pushes the eye to the end of the flow.

## Components

### Top bar

- **Anatomy:** Small brand mark, three text links, a centered search pill, and a right-aligned subscribe pill.
- **Surface:** White canvas with a faint neutral rule underneath.
- **Typography:** Small navigation text in a medium weight, kept compact and legible.
- **Shape:** The search field and the subscribe control both use pill geometry.
- **Spacing:** The bar is thin, but the controls have generous internal padding so they never feel cramped.
- **Visible states:** The small orange count badge is the loudest mark in the bar, and it should stay clearly legible.

### Sidebar index

- **Anatomy:** A stacked list of brand names or component names, each with a small logo or dot-like mark when needed.
- **Surface:** No boxed container; the rail sits directly on the white page.
- **Typography:** Quiet body-sized text, with the active item darker than the rest.
- **Composition:** The rail is vertically dense but visually light, so it supports the main content without competing with it.
- **Spacing:** Rows are separated by small, consistent gaps that keep the list scannable.

### Reading column and title block

- **Anatomy:** Large page title, small mono count or meta line, then two or more paragraphs of body copy.
- **Typography:** The title is heavy and compact; the supporting text is regular and more open.
- **Shape:** No frame is needed here. The white page does the framing.
- **Hierarchy:** The mono count sits close to the title, while the body copy drops beneath with enough air to create a clear break.

### Feature and resource row

- **Anatomy:** Small thumbnail, bold resource title, softer supporting sentence, and a right-aligned button.
- **Surface:** White or surface-soft background with a light separator above and below.
- **Typography:** The title is semibold, the description is muted, and the button is stronger still.
- **Composition:** The text cluster sits left; the button sits far right, which keeps the call to action clean and easy to find.
- **Variants:** The same structure can also appear as a quieter inline row without a button when the page wants to stay editorial.

### Soft card grid

- **Anatomy:** Rounded cards containing a diagram, a small title, and a brief explanation.
- **Surface:** Pale gray fills with thin borders and no heavy shadow.
- **Shape:** Medium-soft corners and roomy padding.
- **Spacing:** The internal spacing is generous enough for diagrams, token trees, and logo rows to breathe.
- **Composition:** The cards work best in pairs or in a balanced grid where each card carries one idea.
- **Visible states:** The cards stay calm; the emphasis comes from content contrast, not hover treatment.

### Logo strip

- **Anatomy:** A horizontal row of circular brand chips with centered marks.
- **Surface:** White chips on a white page, separated by thin outlines or enough spacing to read as individual units.
- **Shape:** Circles are the main motif here, which keeps the strip neat and rhythmic.
- **Composition:** The strip works as social proof and as a visual pause between larger content blocks.
- **Typography:** None; the marks do the speaking.

### Dark access panel

- **Anatomy:** Dark title, muted helper line, stacked form fields, and a bright orange button at the bottom.
- **Surface:** Near-black panel with subtle input rules and very little chrome.
- **Typography:** White heading text, pale helper text, and small muted field labels.
- **Shape:** The panel keeps soft corners, but the interior becomes more linear and controlled.
- **Composition:** The left side can carry the pitch, while the right side holds the form; together they feel like one complete offer.
- **Visible states:** The orange button is the strongest color point in the panel, and it should remain visually dominant.

### Footer strip

- **Anatomy:** Small link groups, a muted brand line, and brief legal text.
- **Surface:** White or near-white, with low visual weight.
- **Typography:** Footnote-sized text and quiet navigation links.
- **Hierarchy:** This is the soft landing for the page, so the contrast should taper down rather than spike.

## Responsive behavior

On narrower screens, the left rail should collapse before the article typography shrinks too aggressively. The search pill can shorten, the sidebar list should become a compact drawer or stacked menu, and the main reading column should move to a single clean track. Card grids should stack into one column, while the logo strip can wrap or scroll horizontally if needed. The orange button should keep its pill shape and remain easy to tap. Mono labels should stay small but readable, and the page should keep its generous vertical spacing so the design never feels compressed. The black closing CTA should also keep enough width to feel deliberate rather than cramped.

## Practical implementation guidance

### Preserve

- Keep the page mostly white and black, with orange reserved for the strongest small call to action.
- Preserve the left navigation rail as a quiet index rather than turning it into a heavy app sidebar.
- Keep the title scale large and compact, then let body copy open up underneath it.
- Use soft-gray cards and circular logo chips to break up long reading sections.
- Keep shadows minimal; the system gets its depth from spacing and surface contrast.
- Keep the black closing CTA broad and centered so the end of the page feels intentional.

### Avoid

- Avoid colorful gradients across the full page; the orange button is enough.
- Avoid dense borders around every block.
- Avoid turning the page into a dashboard full of controls.
- Avoid oversized mobile type jumps that erase the page’s measured rhythm.
- Avoid mixing in extra font families or decorative icon sets that do not match the calm tone.
- Avoid softening the black closing CTA into a secondary link; it should still feel like the final action.

### Recommended build order

1. Build the top bar and the white page canvas.
2. Add the left index and the central reading column.
3. Recreate the large heading, meta line, and body copy rhythm.
4. Add the featured resource row and the soft card system.
5. Build the logo strip and the dark access panel.
6. Finish with the footer strip, the black closing CTA, and responsive collapsing behavior.

### Accessibility

- Keep the search field, subscribe control, orange button, and black closing CTA clearly focusable.
- Preserve strong contrast for all small text on dark panels.
- Give logo chips and diagram tiles useful text equivalents where they communicate meaning.
- Keep line length comfortable for body copy, especially in the central article column.
- Make list and card spacing large enough that keyboard users can move through the page without confusion.

## Scope note

This guide covers the desktop library and product surfaces shown here: the accordion article page, the Apple detail page, the AI DS promo and access sections, the logo strips, and the soft card grids. Mobile breakpoints, motion, hover styling, disabled states, and the full icon set are not included. Measurements are practical adaptation targets.

## More website design guides

[Browse website design guides by pattern and website](/design-guides).