---
title: "Bejamas design system"
variant: extended
source: https://bejamas.com/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/bejamas-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Bejamas · Design System

> Quiet editorial layouts with a vivid lime signal.

**Theme:** light · **Industry:** agency · **Source:** https://bejamas.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Bejamas presents its website migration and ongoing platform services through a restrained editorial layout. A cinematic, dark opening gives way to pale, spacious content sections, with lime CTAs and project imagery providing contrast.

## North star

Use a quiet, spacious editorial canvas and let dark imagery and lime CTAs provide the page’s few high-impact contrasts.

## Overview

The visual system contrasts a near-black opening with a soft cool-gray canvas for most of the page. Bright lime is reserved for the primary “Talk to us” action, so it reads clearly without competing with the content. Use NeueMontreal throughout: large, lightly weighted headlines with tight negative tracking establish an editorial voice, while body copy and compact labels stay understated. The opening hero layers white type and navigation over abstract, blurred black-and-green imagery; later sections return to clean, mostly flat surfaces. Content is arranged in broad two-column compositions with generous vertical pauses: service explanations, an asymmetric project gallery, a dark testimonial panel, and a centered closing CTA. Project cards bring their own photography and colors, but remain contained within the neutral page system. Fine gray rules and softly rounded cards structure content without relying on shadows. Keep the page airy, direct, and focused on a small number of strong visual contrasts.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Black | `#131314` | `--color-soft-black` | brand | Primary dark surface and text; anchors the hero and testimonial panel and provides strong contrast for white type. |
| Cool Canvas | `#f3f3f4` | `--color-cool-canvas` | surface | Main page canvas across the light service, project, CTA, and footer sections. |
| Cloud Gray | `#e5e5e5` | `--color-cloud-gray` | neutral | Card and muted surface fill, pale text on dark areas, and light separators. |
| Signal Lime | `#befc65` | `--color-signal-lime` | accent | Primary rounded “Talk to us” CTA fill with dark text. |
| Muted Graphite | `#66646d` | `--color-muted-graphite` | semantic | Secondary copy and subdued heading or footer text on light surfaces. |
| Deep Shadow | `#0c0c0c` | `--color-deep-shadow` | semantic | Dark gradient endpoint and shadow tone within the hero media treatment, not a distinct content color. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Hero navigation and text over dark media, plus occasional light control surfaces. |
| Soft Divider | `#e0dfdf` | `--color-soft-divider` | semantic | Subtle hairlines and section details where a border is visible against the pale canvas. |
| Button Slate | `#4e4e4f` | `--color-button-slate` | semantic | Minor button detail in measured styles; not a defining page-wide color. |
| Quiet Gray | `#a1a1a1` | `--color-quiet-gray` | semantic | Occasional low-emphasis text, such as subdued supporting labels. |

### Semantic aliases

`--color-canvas` → `#f3f3f4` (Cool Canvas) · `--color-surface` → `#131314` (Soft Black) · `--color-surface-2` → `#e5e5e5` (Cloud Gray) · `--color-text` → `#131314` (Soft Black) · `--color-text-muted` → `#66646d` (Muted Graphite) · `--color-text-subtle` → `#e5e5e5` (Cloud Gray) · `--color-border` → `#e5e5e5` (Cloud Gray) · `--color-accent` → `#befc65` (Signal Lime) · `--color-on-accent` → `#131314` (Soft Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#131314` | `#f3f3f4` | 16.74:1 | AAA |
| `#131314` | `#e5e5e5` | 14.74:1 | AAA |
| `#66646d` | `#f3f3f4` | 5.25:1 | AA |
| `#66646d` | `#131314` | 3.19:1 | AA-large |
| `#66646d` | `#e5e5e5` | 4.62:1 | AA |
| `#e5e5e5` | `#f3f3f4` | 1.14:1 | fail |
| `#e5e5e5` | `#131314` | 14.74:1 | AAA |
| `#befc65` | `#f3f3f4` | 1.09:1 | fail |
| `#befc65` | `#131314` | 15.3:1 | AAA |
| `#befc65` | `#e5e5e5` | 1.04:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 55%, rgba(0, 0, 0, 0.38) 100%)`
- `linear-gradient(to right, oklch(0.1872 0.002 286.2) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(oklch(0.1872 0.002 286.2), oklch(0.1872 0.002 286.2))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NeueMontreal | `--font-body` | webfont | 500, 400 | Site-wide type for display headings, body copy, navigation, labels, links, and buttons. | Inter |

- **NeueMontreal:** Use measured regular and medium weights. Headlines use tight negative tracking; keep case natural and avoid decorative capitalization.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1.2 | -0.035em | — | NeueMontreal | Large hero statement and standout campaign-style messaging. |
| h1 | 56px | 500 | 1.18 | -0.025em | — | NeueMontreal | Primary page headline and prominent closing statement. |
| h2 | 32px | 500 | 1.18 | -0.02em | — | NeueMontreal | Major section titles and large content statements. |
| h3 | 30px | 500 | 1.5 | 0 | — | NeueMontreal | Feature or subsection headings. |
| h4 | 24px | 500 | 1.2 | 0 | — | NeueMontreal | Compact card and supporting section headings. |
| body | 16px | 500 | 1.5 | 0 | — | NeueMontreal | Paragraphs, service explanations, and testimonial copy. |
| caption | 14px | 400 | 1.43 | 0 | — | NeueMontreal | Small project metadata and subdued supporting labels. |
| button | 20px | 500 | 1.4 | 0 | — | NeueMontreal | Primary CTA labels such as “Talk to us.” |
| nav | 18px | 400 | 1.56 | 0 | — | NeueMontreal | Header navigation links over the hero. |
| link | 24px | 500 | 1.2 | -0.015em | — | NeueMontreal | Large service links and prominent text actions. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 16, 20, 24, 32, 40, 46, 48, 64, 80, 105 px.
- Section rhythm 128px · element gap 4px · card padding — · max content width 608px.

The page uses a spacious, centered content system with a measured 608px page maximum and broad two-column arrangements. The hero is full-bleed, while the light sections align content to consistent edges. The service list and project gallery use split layouts; project cards vary in visual size and imagery. Large section gaps create deliberate pauses, and the density stays low outside the case-study gallery and footer link groups. Align headings and copy to the start, reserving centered alignment for the closing CTA.

## Shape & elevation

- Radius: button `9999px` · card `18px` · nav `9999px` · link `18px` · xs `18px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Use surface contrast and fine pale borders to separate content rather than floating panels. Cards have softly rounded corners, while the lime CTA is pill-shaped. The hero and testimonial create depth through dark media, overlays, and white text, not conventional drop shadows.

## Imagery

The hero uses full-bleed abstract, blurred black, gray, and green media behind the navigation and headline. Project cards contain varied client imagery, including device mockups and photography; treat these as case-study assets rather than brand palette references. A testimonial uses dark video-led framing. Keep imagery cropped within rounded card boundaries and avoid adding decorative illustrations unsupported by the page.

## Components

### Primary CTA

Pill-shaped Signal Lime (#befc65) button with Soft Black (#131314) NeueMontreal text; the recurring label is “Talk to us.”

### Hero navigation

Logo and compact links sit directly over the dark hero media; links use light text for contrast and the CTA remains lime.

### Service steps

Four numbered entries—Audit, Design, Migrate, Run—pair concise headings with smaller explanatory copy and a simple list structure.

### Project cards

Rounded case-study media cards combine client or platform metadata, imagery, and brief results or project descriptions.

### Testimonial panel

A broad dark section combines client quotation, attribution, performance figures, and a video control in a two-column composition.

### Closing CTA

Centered statement on the pale canvas followed by a small lime pill button, separated from surrounding content by generous whitespace.

### Footer

Pale two-column footer pairs a short positioning statement with grouped navigation links and an oversized, pale brand wordmark.

### Measured component styles

- **Primary button** (“Talk to us”): background #befc65 · text #131314 · radius 3.35544e+07px · padding 0px 24px · 500 18px NeueMontreal
- **Secondary button** (“See how we work”): background #141414 · text #ffffff · border 1px solid #4e4e4f · radius 3.35544e+07px · padding 0px 24px · 500 20px NeueMontreal
- **Link** (“(Contentful, Next.js) Rippling Rebuildin”): transparent background · text #131314 · radius 17.6px · padding 0px · 500 16px NeueMontreal
- **Card** (“4M+ Monthly Active Users +127% Faster Pa”): background #e5e5e5 · text #131314 · radius 17.6px · padding 0px · 500 16px NeueMontreal
- **Navigation item** (“Trust & Security”): transparent background · text #131314 · radius 0px · padding 0px · 500 20px NeueMontreal

## Do

- Keep the main canvas cool and light outside dark media sections.
- Reserve Signal Lime (#befc65) for the primary action.
- Use Soft Black (#131314) for strong text and dark panels.
- Give headings tight tracking and clear editorial hierarchy.
- Use generous vertical pauses between major content blocks.
- Contain client imagery within the project gallery.

## Don't

- Do not turn the whole page into a dark interface.
- Do not use lime as a large decorative background.
- Do not add shadows to otherwise flat cards.
- Do not force every project image into the brand palette.
- Do not crowd the content with extra labels or controls.
- Do not use centered alignment for every section.

## Agent prompt

Build a new Bejamas-style agency page with NeueMontreal or Inter, using an airy editorial hierarchy and spacious two-column sections. Set the main canvas to Cool Canvas (#f3f3f4), use Soft Black (#131314) for key text and occasional dark panels, and reserve Signal Lime (#befc65) for pill-shaped primary CTAs with dark labels. Begin with a full-bleed abstract dark hero and legible light navigation. Keep later sections mostly flat, using subtle gray separators and rounded project cards rather than shadows. Mix concise service steps, a varied client case-study gallery, and a dark testimonial block with a centered closing CTA. Treat client imagery as independent content, not as a source for the site palette. Preserve generous whitespace and align most copy to the left.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark media with overlay navigation and headline; supporting copy and actions sit lower in the hero. | primary CTA, secondary work link, client trust marks | dark media overlay, white type, lime pill button |
| 2 | feature-split | Pale canvas in two columns, with a short setup on one side and stacked problem statements on the other. | problem framing, supporting explanation, text link | large headings, subtle dividers, open whitespace |
| 3 | how-it-works | Section heading alongside a vertical four-step list on the same pale canvas. | numbered sequence, service overview link, contact CTA | numbered markers, compact descriptions, lime pill button |
| 4 | product-showcase | Two-column, asymmetric case-study gallery with varied card heights and media crops. | case-study navigation, client outcomes, project metadata | rounded media cards, image-led tiles, compact result labels |
| 5 | testimonials | Wide dark panel with testimonial content and metrics distributed across two columns. | client quote, video playback, outcome metrics | dark surface, light text, rounded panel |
| 6 | cta | Centered statement and button on the pale canvas with generous breathing room. | closing prompt, single primary action | centered headline, small caption, lime pill button |
| 7 | footer | Two-column footer with positioning copy, grouped links, and a large wordmark below. | grouped site links, social links, trust information | pale canvas, small link labels, oversized pale wordmark |
| 8 | other | Minimal continuation of the footer area with a prominent graphic mark. | brand reinforcement, legal link | oversized wordmark, low-contrast treatment |

## Source CSS custom properties (selected)

```css
--radius: .5rem;
--background: oklch(96.44% .0013 286.38);
--foreground: oklch(18.72% .002 286.2);
--card-foreground: oklch(18.72% .002 286.2);
--popover-foreground: oklch(18.72% .002 286.2);
--primary: oklch(18.72% .002 286.2);
--primary-foreground: oklch(100% 0 0);
--secondary: oklch(100% 0 0);
--secondary-foreground: oklch(18.72% .002 286.2);
--muted-foreground: oklch(50.81% .0143 296.07);
--accent: oklch(91.98% .1905 128.5);
--accent-foreground: oklch(18.72% .002 286.2);
--destructive-foreground: #fafafa;
--border: oklch(91.36% .006 239.83);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/bejamas-com