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

# Cora · Design System

> A calm blue sky for a clearer inbox

**Theme:** dark · **Industry:** ai · **Source:** https://cora.computer/ · **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._

Cora’s homepage pairs a vivid, continuous blue canvas with cloud-and-landscape imagery to present inbox automation as a calmer way to work. Refined serif headlines, restrained white controls, and product previews keep the long-form story approachable and legible.

## North star

Keep the interface legible and restrained against immersive, continuous sky-and-landscape scenes.

## Overview

The visual identity is built around a saturated blue canvas (#117bc8) that carries the page from the hero through the feature story, giving the long scroll the feeling of one open sky. White is the main contrast for the serif headline, body copy, navigation, and pill-shaped calls to action; black and pale grays are mostly contained in product and pricing surfaces. Signifier’s light, editorial serif gives major statements a human tone, while Switzer handles compact supporting copy and controls. The layout is spacious and centered at the top, then shifts into alternating text-and-product compositions surrounded by broad scenic backgrounds. Cloud imagery softens the interface and visually connects product demonstrations to the sky-colored canvas. Later, a golden field scene introduces a warm photographic-feeling counterpoint around learning, pricing, and FAQ content. Keep UI cards crisp and readable, and let the atmospheric imagery provide the richness rather than adding decorative interface clutter.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cora Sky | `#117bc8` | `--color-cora-sky` | brand | Dominant page canvas and defining blue field behind the hero and feature narrative. |
| Cloud White | `#ffffff` | `--color-cloud-white` | surface | Headlines, navigation and CTA text, card surfaces, and light borders. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Primary text and high-contrast button or pricing-card details. |
| Sky Edge | `#6aaddd` | `--color-sky-edge` | accent | Subtle outlined CTA edge; a minor control accent rather than a broad page color. |
| Action Blue | `#1073bb` | `--color-action-blue` | accent | Blue fill on prominent trial buttons. |
| Soft Border | `#dadada` | `--color-soft-border` | neutral | Pale framing around a product display; not a dominant brand surface. |
| Deep Harbor | `#09436c` | `--color-deep-harbor` | accent | Dark blue fill for a secondary subscribe control. |
| Mist Gray | `#ebebeb` | `--color-mist-gray` | surface | Light card or inverse surface, including subdued product and interface areas. |
| Charcoal Text | `#2b2b2b` | `--color-charcoal-text` | neutral | Occasional softer dark text in headings and supporting copy. |
| Cloud Tint | `#f5f8fe` | `--color-cloud-tint` | surface | Very pale section or gradient tint, not the principal canvas. |
| Silver Copy | `#a1a1a1` | `--color-silver-copy` | neutral | Minor muted text, chiefly in interface-like supporting details. |
| Bright Detail | `#2586cd` | `--color-bright-detail` | accent | Sparse blue detail detected in minor interface elements. |
| Muted Graphite | `#7d7d7d` | `--color-muted-graphite` | neutral | Low-emphasis supporting text and fine interface copy. |

### Semantic aliases

`--color-canvas` → `#117bc8` (Cora Sky) · `--color-surface` → `#ffffff` (Cloud White) · `--color-surface-2` → `#ebebeb` (Mist Gray) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#ffffff` (Cloud White) · `--color-border` → `#ffffff` (Cloud White) · `--color-accent` → `#117bc8` (Cora Sky) · `--color-accent-2` → `#1073bb` (Action Blue) · `--color-accent-3` → `#09436c` (Deep Harbor) · `--color-on-accent` → `#ffffff` (Cloud White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#117bc8` | 4.69:1 | AA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ebebeb` | 17.62:1 | AAA |
| `#ffffff` | `#117bc8` | 4.48:1 | AA-large |
| `#ffffff` | `#ebebeb` | 1.19:1 | fail |
| `#117bc8` | `#ffffff` | 4.48:1 | AA-large |
| `#117bc8` | `#ebebeb` | 3.76:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgb(0, 0, 0) 100%)`
- `linear-gradient(rgba(245, 248, 254, 0) 0%, rgb(245, 248, 254) 12%, rgb(245, 248, 254) 88%, rgba(245, 248, 254, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| switzer | `--font-body` | webfont | 500, 400, 700, 600 | Body copy, navigation, links, and button labels. | DM Sans |
| signifier | `--font-display` | webfont | 400, 300 | Large hero and section headlines. | Cormorant Garamond |

- **switzer:** Use compact, clean sans-serif forms; measured weights span 400–700, with controls and body copy leaning medium or semibold.
- **signifier:** Editorial serif, often light in the hero; preserve natural case and airy headline presence.

### Type scale — Augmented Fourth (ratio ≈ 1.408, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 55px | 300 | 1.18 | 0 | — | signifier | Hero promise, set as a light editorial statement. |
| h2 | 36px | 400 | 1.2 | 0 | — | signifier | Major section headings throughout the long-form story. |
| h3 | 34px | 400 | 1.02 | 0 | — | signifier | Feature and content-group headings. |
| h4 | 24px | 400 | 1.02 | 0 | — | signifier | Smaller card or subsection headings. |
| body | 14px | 600 | 1.24 | 0 | — | switzer | Feature explanations and primary supporting copy. |
| caption | 12px | 500 | 1.24 | 0 | — | switzer | Compact labels and fine-print details. |
| button | 14px | 600 | 1.24 | 0 | — | switzer | CTA and other action labels. |
| link | 12px | 400 | 1.24 | 0 | — | switzer | Small navigation and inline links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 11, 12, 14, 15, 16, 20 px.
- Section rhythm 100px · element gap 8px · card padding 14px · max content width 1410px.

The page uses a broad, spacious canvas with a measured maximum content width of 1410px. The hero centers its headline, subtitle, and primary action, with navigation anchored at the top and a large product preview below. Further down, feature copy and interface previews sit within expansive scenic sections; centered content and split alignments alternate rather than relying on a dense grid. The measured section gap is 100px, with an 8px element gap and 14px card padding. Maintain generous breathing room and keep small controls distinct against the background.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `50%` · nav `9999px` · xs `8px` · sm `10px` · md `12px` · lg `16px` · xl `20px` · 2xl `24px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.07) 0px 4px 9.99999px 0px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.25) 4px 6px 8px -2px, rgba(0, 0, 0, 0.2) -4px -1px 8px -2px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.1) 0px 4px 4px 0px`
- Shadow `md-3` (card, section): `rgba(0, 0, 0, 0.25) 4px 6px 8px 0px, rgba(0, 0, 0, 0.25) -4px -6px 8px 0px`
- Shadow `md-4` (card): `rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.12) 0px 2px 8px 1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 1px`
- Shadow `md-5` (card): `rgba(0, 0, 0, 0.14) 0.48px 0.48px 0.48px 0px, rgba(0, 0, 0, 0.145) 3.86px 5.78px 7.71px 0px, rgba(0, 0, 0, 0.125) -3.86px -0.64px 7.71px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

Most of the page feels open and atmospheric rather than built from stacked panels. White cards and product previews use clear surface contrast, rounded corners, and soft shadows; the larger display has a visible pale frame. Use thin, light outlines on pill controls, and reserve stronger layering for product mockups and pricing surfaces.

## Imagery

Scenic cloud and sky imagery frames the product demonstration, then gives way to tree-lined sky and a broad golden field later in the page. Product previews appear as crisp, framed interface compositions within the landscape rather than as isolated catalog photography. Let natural clouds overlap or soften section transitions, while keeping text and app surfaces sharply legible. The scenery is an important part of the visual identity, but its blue and gold tones belong to imagery, not extra interface palette colors.

## Components

### Hero navigation

Place the compact brand mark at the upper left and a white pill-style login/trial group at the upper right.

### Centered hero

Stack a large Signifier headline, short Switzer value statement, and white rounded primary action over the blue sky canvas.

### Product preview

Show the inbox briefing interface inside a prominent pale-framed, rounded display, partially softened by cloud imagery.

### Feature callouts

Pair concise white feature copy and a small outlined pill CTA with floating email-interface previews across open scenic space.

### Testimonial strip

Set compact white quote cards in a horizontal band that contrasts with the blue background.

### Pricing cards

Use high-contrast white plan surfaces with dark text and prominent black trial buttons, surrounded by the warm field scene.

### FAQ list

Stack dark, compact question rows over the golden scenic background with clear disclosure affordances.

### Measured component styles

- **Primary button** (“Start your free trial”): background #1073bb · text #ffffff · border 2px solid #6aaddd · radius 9999px · padding 12px 38px · 400 16px Times New Roman
- **Secondary button** (“Start free trial”): background #117bc8 · text #ffffff · border 2px solid #ffffff · radius 9999px · padding 8px 23px · 400 20px switzer
- **Link** (“Spiral”): transparent background · text #ffffff · radius 0px · padding 0px · 500 14px switzer
- **Card** (““I deleted Cora just to feel the differe”): background #ffffff · text #000000 · radius 12px · padding 12px 15px · 400 16px Times New Roman · shadow rgba(0, 0, 0, 0.07) 0px 4px 9.99999px 0px
- **Navigation item** (“Log in Start free trial”): background #e7f2f9 · text #ffffff · radius 9999px · padding 1px 1px 1px 23px · 400 20px switzer

## Do

- Use Cora Sky (#117bc8) as the dominant canvas.
- Set major statements in an editorial serif.
- Keep controls white, rounded, and easy to spot.
- Use Switzer-style sans serif for functional copy.
- Give scenic imagery room to breathe.
- Keep interface previews crisp against atmospheric backgrounds.

## Don't

- Do not replace the continuous blue story with unrelated color bands.
- Do not let landscape imagery reduce text contrast.
- Do not crowd the hero with secondary interface elements.
- Do not use heavy decorative borders across every card.
- Do not treat image-only gold and green tones as UI palette colors.
- Do not make supporting copy compete with the serif headlines.

## Agent prompt

Build a new page in Cora’s visual style: use Cora Sky (#117bc8) as the expansive primary canvas, with Cloud White (#ffffff) for headlines, controls, and clean surfaces. Set major statements in a light editorial serif similar to Signifier, and use a Switzer-like sans serif for navigation, descriptions, and buttons. Keep the top-level message centered and spacious, then let feature sections shift between concise copy and crisp product previews. Use clouds, sky, or landscape imagery as atmospheric framing, not as a source for extra UI colors. Separate functional content with white cards, restrained pale borders, and soft shadows; use Action Blue (#1073bb) for a primary filled trial CTA and Deep Harbor (#09436c) only for secondary actions. Preserve generous whitespace and strong contrast.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long, full-page blue canvas: centered hero and product preview lead into scenic feature, pricing, and FAQ content. | Prominent trial CTA, Top-level login and signup, Long-form product story | White pill controls, Serif headline, Scenic cloud imagery, Framed product previews |

## Source CSS custom properties (selected)

```css
--color-primary: #117bc8;
--color-secondary: #fff;
--color-tertiary: #000;
--color-contrast: #117bc8;
--color-black: #000;
--color-white: #fff;
--color-grey: #ebebeb;
--color-light-grey: #7d7d7d;
--spacing-0: 0;
--spacing-safe: min(calc(((42*100)/1440)*1vw),42px);
--spacing-gap: min(calc(((16*100)/1440)*1vw),16px);
--font-switzer: "switzer","switzer Fallback";
--ease-out-expo: cubic-bezier(.19,1,.22,1);
--ease-gleasing: cubic-bezier(.4,0,0,1);
--gap: min(calc(((16*100)/1440)*1vw),16px);
--ease-in-quad: cubic-bezier(.55,.085,.68,.53);
--ease-in-cubic: cubic-bezier(.55,.055,.675,.19);
--ease-in-quart: cubic-bezier(.895,.03,.685,.22);
--ease-in-quint: cubic-bezier(.755,.05,.855,.06);
--ease-in-expo: cubic-bezier(.95,.05,.795,.035);
--ease-in-circ: cubic-bezier(.6,.04,.98,.335);
--ease-out-quad: cubic-bezier(.25,.46,.45,.94);
--ease-out-cubic: cubic-bezier(.215,.61,.355,1);
--ease-out-quart: cubic-bezier(.165,.84,.44,1);
--ease-out-quint: cubic-bezier(.23,1,.32,1);
--ease-out-circ: cubic-bezier(.075,.82,.165,1);
--ease-in-out-quad: cubic-bezier(.455,.03,.515,.955);
--ease-in-out-cubic: cubic-bezier(.645,.045,.355,1);
--ease-in-out-quart: cubic-bezier(.77,0,.175,1);
--ease-in-out-quint: cubic-bezier(.86,0,.07,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-out-circ: cubic-bezier(.785,.135,.15,.86);
--color-blue: #117bc8;
--color-grey-900: #1c1917;
```

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