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

# Oevra · Design System

> A quiet canvas for creative flow

**Theme:** light · **Industry:** productivity · **Source:** https://oevra.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._

Oevra pairs a serene, blurred green hero with oversized white editorial typography to introduce a creativity and flow-state app. A pale gray continuation keeps the experience calm and spacious, with restrained copy and minimal interface cues.

## North star

Let atmospheric imagery and oversized, delicate type create the mood, while keeping interface details sparse and precise.

## Overview

The visual identity hinges on contrast between a soft, organic green hero image and an understated neutral foundation. The screenshot’s green tones belong to the photographic background, not the measured brand palette; keep them confined to immersive imagery. On top, white typography and navigation remain crisp and legible. Below the hero, #efefef creates a quiet canvas, while #4e4e4e is the principal measured text color; white also appears as a hairline and outline color. Suisse Light gives the large headline a fine, airy editorial quality, balanced by Suisse Regular for compact explanatory copy. Space Regular supplies the uppercase, technical-feeling navigation and micro-labels. Layout is intentionally sparse: the hero statement occupies the center, with navigation at the top and small supporting details near the bottom. Generous vertical breathing room and the absence of prominent cards, shadows, or decorative UI preserve a meditative, image-led flow.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Signal | `#ffffff` | `--color-soft-signal` | neutral | White hero headline, navigation, microcopy, and delicate outlined signup control; also the measured hairline color. |
| Quiet Canvas | `#efefef` | `--color-quiet-canvas` | surface | Light gray page canvas and broad background for the second section. |
| Gentle Ink | `#4e4e4e` | `--color-gentle-ink` | neutral | Primary measured text tone for readable copy on the light gray canvas. |
| True Black | `#000000` | `--color-true-black` | neutral | Sparse dark text detail, including a measured link; not a dominant page color. |

### Semantic aliases

`--color-canvas` → `#efefef` (Quiet Canvas) · `--color-text` → `#4e4e4e` (Gentle Ink) · `--color-text-muted` → `#ffffff` (Soft Signal) · `--color-border` → `#ffffff` (Soft Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#4e4e4e` | `#efefef` | 7.24:1 | AAA |
| `#ffffff` | `#efefef` | 1.15:1 | fail |

### Gradients

- `linear-gradient(285.8deg, rgb(255, 255, 255) 7.1%, rgb(255, 255, 255) 43.13%, rgb(255, 255, 255) 91.71%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| suisse-regular | `--font-body` | webfont | 400 | Main body copy and general readable text. | Inter |
| space-regular | `--font-space-regular` | webfont | 400 | Navigation, uppercase labels, and button text. | Space Mono |
| suisse-light | `--font-display` | webfont | 400 | Oversized hero display statement and large section heading. | Manrope |

- **suisse-regular:** Regular weight; restrained sentence case for short explanatory paragraphs.
- **space-regular:** Regular weight; uppercase microcopy gives navigation and actions a technical, spaced-out character.
- **suisse-light:** Light, fine-stroked display treatment; sentence case and generous line breaks.

### Type scale — Custom (ratio ≈ 2.236, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 75px | 400 | 1.1 | 0 | — | suisse-light | Oversized hero statement and prominent editorial messaging. |
| h1 | 45px | 400 | 1 | 0 | — | suisse-light | Large section headline introducing the app’s creative practice. |
| body | 15px | 400 | 1.2 | 0 | — | suisse-regular | Short explanatory copy beneath or alongside major statements. |
| caption | 12px | 400 | 1.25 | 0 | uppercase | space-regular | Compact uppercase section markers and small metadata. |
| button | 13.5px | 400 | 1.3 | 0 | uppercase | space-regular | Uppercase signup and other concise action labels. |
| nav | 13.5px | 400 | 1.3 | 0 | uppercase | space-regular | Uppercase top-level About, Login, and Sign Up links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 11, 15, 30, 38, 60, 68, 75, 120 px.
- Section rhythm 120px · element gap 15px · card padding — · max content width 1125px.

Use a wide, centered composition with a measured page maximum of 1125px. Keep the hero statement visually centered and broken into deliberate, staggered lines, with navigation near the top edge and supporting copy and a trial link low in the frame. The following section returns to the #efefef canvas and uses a restrained split between a large headline and compact explanatory text. Preserve a spacious rhythm: the measured section gap is 120px, with an overall low-density presentation.

## Shape & elevation

- Radius: button `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s cubic-bezier(0.43, 0.195, 0.02, 1)` on interactive elements.

The page reads as flat and unboxed: measured data reports no shadows and no card components. Separate the hero photograph from the pale content canvas through the change in background, not through elevated panels. Use only the measured white hairline and thin signup outline as subtle boundaries.

## Imagery

The hero is defined by a full-bleed, softly blurred green photograph with diffuse light and no sharply legible subject. Treat its green palette as imagery rather than a reusable UI color system. The next section appears mostly typographic on a pale neutral background; avoid adding decorative illustrations or product mockups that compete with the atmospheric opening.

## Components

### Hero navigation

Place the white Oevra wordmark at the upper left; align compact uppercase About and Login links with an outlined, pill-shaped Sign Up action at the upper right.

### Hero statement

Set the central message in Suisse Light with oversized, fine white letterforms, staggered line breaks, and short horizontal hairlines as pauses.

### Hero microcopy

Keep the vertical scroll cue at the lower left and a small explanatory paragraph near the lower right, both white and visually secondary.

### Trial link

Show a compact uppercase free-trial prompt near the hero’s lower edge, with a small directional arrow and no filled button background.

### Intro section

Continue on #efefef with a large, light-weight headline and a small block of supporting copy, maintaining generous open space.

### Measured component styles

- **Primary button** (“SIGN UP”): transparent background · text #ffffff · border 1px solid #ffffff · radius 50% · padding 15px · 400 13.5px space-regular · uppercase
- **Link** (“TRY IT FREE FOR 7 DAYS”): transparent background · text #ffffff · radius 0px · padding 0px · 400 7.5px ui-sans-serif
- **Navigation item** (“ABOUT LOGIN SIGN UP”): transparent background · text #ffffff · radius 0px · padding 0px · 400 13.5px space-regular · uppercase

## Do

- Use #efefef as the broad light-page canvas.
- Keep the hero image soft-focus and visually immersive.
- Set major statements in a light, delicate sans serif.
- Use compact uppercase labels for navigation and actions.
- Preserve strong negative space around text groups.
- Keep interface outlines thin and low emphasis.

## Don't

- Do not treat the hero’s greens as measured brand UI colors.
- Do not introduce card grids or raised panels.
- Do not use heavy bold typography for the main statement.
- Do not crowd the hero with dense navigation or controls.
- Do not add conspicuous shadows or gradients to UI elements.
- Do not let small supporting copy compete with the headline.

## Agent prompt

Build a new Oevra-style page as a spacious editorial canvas. Use #efefef for the light content background and #4e4e4e for readable copy; reserve #ffffff for hero text, fine rules, navigation, and subtle outlines. Keep #000000 limited to occasional small text. If using a blurred green photograph, treat its greens as image content rather than interface palette. Use a light Suisse-like display face for oversized, carefully broken-up statements, a clean regular sans for body copy, and an uppercase mono-like face for navigation and labels. Align navigation along the top, center the primary message within the hero, and place small supporting copy near its lower edge. Continue into a quiet, open section with sparse text, no cards, no shadows, and generous vertical breathing room.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-screen, full-bleed blurred green image; top-edge navigation, centered multi-line headline, and small bottom-edge details. | Top-level navigation, Signup action, Scroll cue, Free-trial link | Soft-focus green photography, White display text, Thin hairline accents, Outlined pill signup |
| 2 | feature-split | Pale gray, spacious section with a large headline and smaller explanatory copy arranged as separate text blocks. | Introductory explanation, App discovery link | Light display typography, Small body copy, Open neutral canvas |

## Source CSS custom properties (selected)

```css
--color-offBlack: #4e4e4e;
--color-black: #000;
--color-lightGrey: #efefef;
--color-primary: #ffffff;
--color-secondary: #ffffff;
--color-content: #ffffff;
--title-gradient-color1: #ffffff;
--title-gradient-color2: #ffffff;
--title-gradient-color3: #ffffff;
```

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