10er.com website design: fonts, colors and UI patterns

Design character

10er makes creator funding feel direct rather than financial. A near-black field, oversized centered language, one saturated blue action, and a small yellow circular mark create the shell. Creator work—podcast covers, portraits, expressive type, and vivid artwork—provides the personality. The product chrome remains spare.

The central contrast is dark infrastructure and colorful creator work. On the home page, a compact promise ends in a loose fan of project covers. On pricing, the same dark field makes one number, one action, and a few plain-language benefits feel decisive.

Overview

The captured scope includes the homepage and pricing page at wide desktop sizes. Both views use a compact navigation bar, centered content, pills for actions and utilities, white/gray type, blue for the primary path, thin dividers, and a lighter charcoal footer. Information is deliberately reduced to a promise, proof, a fee, benefits, and FAQ instead of a dashboard.

Key characteristics:

• Dark canvas with high-contrast off-white text and muted gray support copy.
• Fixel as the recorded family reference across display and UI roles.
• A 48px home claim and a 96px pricing figure create two intentional display scales.
• Blue appears on the primary action; black and outlined pills support parallel utilities.
• Creator-cover art is the expressive gallery, not generic decoration.
• Round controls and 24px panels soften the dark interface.
• Thin borders and small 0/1/2px shadows create quiet depth.

Design tokens

The token names below are practical labels for observed values. The names are descriptive, not official 10er naming.

Color inventory

The exact dark canvas, blue button, yellow logo, warm pricing label, and footer charcoal are visible in the captures but were not returned as measured palette values. Keep their relationships, but do not turn them into exact tokens here.

Typography inventory

The site asset identifies Fixel. The capture profile establishes the measured hierarchy below; it does not establish a license for use outside 10er.

The hierarchy is intentionally blunt: a giant promise or price, a short explanation, then one action. Weight 700 belongs to the central claim and number; 600 carries headings; 400–500 keeps the platform conversational.

Spacing inventory

The 1689–1712px views use large outer margins—about 84.5px on the home capture and 404.5px on the pricing capture. Those are wide-layout outcomes, not portable tokens. Preserve the centered measure and vertical rhythm rather than copying raw margins.

Shape, border, and depth inventory

No gradients were recorded. Value changes, thin borders, product artwork, and restrained shadows create the depth.

Colors

Text on dark

#f4f4f5 is the dominant text tone. It carries the hero, pricing number, headings, navigation, and action labels without using pure white everywhere. #9f9fa9 is the support layer for descriptions, fee qualifiers, body copy, and footer labels.

Accent discipline

The blue Get started action is the principal conversion color in both captures. Blue means the next step, not every link or panel. Black and white appear as inverse treatments. The yellow mark and warm pricing label are small identity notes rather than a broad UI palette.

Creator artwork

The home gallery supplies the strongest saturation: pink, yellow, red, blue, and photographic imagery belong to individual creator projects. Keep that color inside the gallery; do not transfer it to navigation or pricing chrome.

Typography

Family and hierarchy

Fixel is the recorded family reference. The screenshots show no competing display or editorial face. Personality comes from scale, weight, and the tight -1.2px hero tracking, not from type mixing.

• The 48px/48px home headline is compact, centered, and set at 700.
• The 96px/96px price turns the fee into the pricing page’s visual anchor.
• 24px/32px labels structure FAQ and secondary sections.
• 20px/28px and 16px/24px handle benefits, navigation, descriptions, and creator-platform detail.
• 14px/20px and 12px/16px keep metadata quiet.

Availability

The captured site asset identifies Fixel. This is a reference to the site, not a grant of font rights. If Fixel is unavailable in an adaptation, preserve the measured hierarchy and tone with a properly licensed alternative.

Layout

Homepage composition

The home page follows a deliberate vertical sequence:

1. Compact global header.
2. Centered two-line claim and short explanation.
3. One primary blue action.
4. Reassurance line and a small 300+ proof marker.
5. Six creator covers in a loose horizontal fan.
6. Wide rounded project search field.

The gallery is the hero’s base, not a generic card grid. The rest of the frame is still and symmetrical, so the cover art can be playful.

Pricing composition

Pricing narrows into a centered column. A warm label sits above the giant 8% figure, then the underlined fee qualifier and blue action. Benefits become a left/right split: bold benefit names at left, concise explanation at right. FAQ returns to a single vertical list. The footer switches to lighter charcoal and a multi-column link layout.

Whitespace philosophy

Empty dark space establishes confidence. The hero does not crowd the header, the covers do not crowd the search, and the price does not crowd its explanatory copy. Preserve the large intervals before reducing type scale or adding containers.

Visual language

Dark shell, bright work

The shell is flat, near-black, and low-noise. The visual peak is the row of real creator covers, not a gradient or glass effect. Covers are intentionally louder than the product UI.

Pill geometry

The primary action, outlined project finder, search field, and account utility all use fully rounded geometry. Large content surfaces remain softly rounded rather than pill-shaped.

Lines instead of cards

FAQ uses full-width rows divided by hairlines. Pricing uses open space around its number and benefits. Add a border only when it defines a choice, search field, or row boundary; do not surround every section with a card.

Footer value shift

The footer moves to lighter charcoal so its multi-column link inventory becomes readable without competing with conversion content above.

Motion

No motion or transition data is available. Do not infer cover animation, hover behavior, or accordion timing from the stills.

Components and states

Global header

The circular yellow 10 mark sits at left. Creators and Features include chevrons; Pricing is a plain link. At right, an outlined Find a project pill, blue Get started pill, and circular account utility form the conversion cluster. The header stays quiet enough for the hero to read first.

Hero stack

Anatomy:

• Two-line statement.
• Short explanation.
• Filled blue Get started pill with trailing arrow.
• Reassurance sentence.
• Compact 300+ proof marker.

The hero has one action. Reassurance and proof support it rather than becoming separate cards.

Creator-cover gallery

Six rectangular covers sit in a relaxed fan. Each cover retains its own identity; the group receives the stagger and slight rotation. Keep the covers large enough to read as projects and avoid turning them into identical upright cards.

Project search

The search is a wide pill-shaped dark-field utility with a search icon, muted placeholder, and thin light outline. It is discovery UI, so it remains secondary to the primary action.

Pricing statement

Anatomy:

• Small warm Pricing label.
• Giant 8% display.
• Underlined transaction-fee qualifier.
• Filled blue action.
• Benefit/explanation split.

The central number carries the section. Do not add plan cards, comparison matrices, or a second primary action around it.

FAQ accordion

One question is open and several are closed. Rows contain bold question text, a right-aligned chevron, and a divider; the expanded row reveals muted body copy and an underlined external link.

Hover, focus, disabled, loading, error, and validation states are not established.

Footer

The footer uses lighter charcoal and sparse link columns. Product, Discover, Tools, Legal, and Contact labels are muted; links are high contrast. Brand mark, social icons, and “10er is a Brainbow project” sit in a separate left block.

Responsive behavior

The captures cover wide desktop widths and a shorter desktop viewport. Home maintains a centered hero and horizontal cover gallery; pricing maintains its centered price, benefit split, and desktop footer columns.

Mobile breakpoints, navigation collapse, cover stacking, and touch-target changes are not shown. A responsive adaptation should preserve information order—header, claim, action, proof, covers, search; then price, benefits, FAQ, footer—before preserving desktop columns.

Practical guidance

Preserve

1. Dark shell plus colorful creator-art contrast.
2. One primary blue action per major decision.
3. Single-family Fixel hierarchy with tight display text.
4. The 48px hero and 96px pricing-display distinction.
5. Pill actions and a wide pill search field.
6. Whitespace and thin dividers instead of a dense card system.
7. Loose tilted creator covers as the expressive centerpiece.
8. A lighter charcoal footer for information architecture.

Avoid

1. Adding a rainbow of UI accents because creator art is colorful.
2. Turning pricing into a SaaS plan-table grid.
3. Covering the dark canvas with gradients, glass, or heavy shadows.
4. Making every control a filled blue button.
5. Flattening the creator gallery into identical upright cards.
6. Inventing mobile behavior, motion, or unseen states.
7. Treating the Fixel reference as a font license.

Known gaps

The captures do not establish exact dark-surface, blue-action, yellow-logo, or pricing-label values; mobile/tablet behavior; hover/focus/disabled/loading/error states; motion; or the full project-detail flow.

Reference scope

This guide studies four 10er captures: two homepage views and two pricing views, at 1689–1712px desktop widths. The representative pins cover the hero/gallery and pricing/FAQ/footer.