Reflect Notes PlatformSolutionsUse CasesResources Schedule a Demo

Starlit violet cosmos —

#8a5cf6

Nebula Violet

#7ce3ff

Comet Cyan

#05060f

Void

Reflect Notes

Visit ↗

Starlit violet cosmos — a dark editorial notebook

Reflect is a dark cosmological interface: a deep-navy canvas dusted with violet nebulae, hairline gradients, and razor-sharp serif display type. Content reads like an editorial page floating in space, with soft glows replacing hard borders. Every accent is a saturated cool tone — never warm — so the eye stays calm even under long reading sessions.

https://reflect.app

Color Palette

ACCENT

Nebula Violet

#8a5cf6

--color-nebula-violet

Primary CTA, active state, brand mark

Comet Cyan

#7ce3ff

--color-comet-cyan

Link hover, secondary highlight

NEUTRALS

Void

#05060f

--color-void

Page background, deepest layer

Midnight

#0b0b1a

--color-midnight

Card surface, elevated panel

Nebula Mist

#1a1b2e

--color-nebula-mist

Divider surface, inset panels

Stardust

#a5a6c0

--color-stardust

Body text primary on dark

Moonlight

#f2f2f7

--color-moonlight

Headline text, high emphasis

Typography

Type Scale

Perfect Fourth (1.333) from 16px base

display-xl

96px · 400 · 1.02

The quick brown fox jumps

display

72px · 400 · 1.05

The quick brown fox jumps

heading-lg

48px · 400 · 1.1

The quick brown fox jumps

heading

32px · 500 · 1.2

The quick brown fox jumps

subheading

20px · 500 · 1.35

The quick brown fox jumps

body-lg

18px · 400 · 1.55

The quick brown fox jumps

body

15px · 400 · 1.6

The quick brown fox jumps

Fonts

display GT Sectra

Weights 400, 500

Sizes 32px–96px

Line-height 1.02–1.2

Letter-spacing -0.02em

Fallback Cormorant Garamond, Playfair Display

High-contrast serif that carries the entire brand voice.

body Inter

Weights 400, 500, 600

Sizes 13–20px

Line-height 1.4–1.6

Letter-spacing -0.01em

Fallback -apple-system, Söhne, Segoe UI

Neutral grotesque for reading UI.

code JetBrains Mono

Weights 400

Sizes 13–15px

Line-height 1.5

Letter-spacing 0

Fallback IBM Plex Mono, ui-monospace

Code snippets inside notes.

Spacing & Shape

Spacing

space-2

8px

Icon-to-text gap

space-4

16px

Component padding

space-6

24px

Card padding

space-10

40px

Block gap

space-16

64px

Section gap

space-24

96px

Hero vertical rhythm

Radii

radius-sm

6px

Buttons, inputs

radius-md

12px

Cards

radius-lg

20px

Feature panels

Guidelines

Serif is reserved for display and hero. Never mix serif into body copy.
Glow (soft box-shadow with violet at 20% opacity) replaces hairline borders on hover.
Warm colors are forbidden. If you need emphasis, saturate a cool accent instead.
Prefer generous line-height (1.55+) — reading is the primary task.

More like this

AI for Business

Brutalist editorial showroom on warm gray

dope.security

Midnight terminal with violet phosphor accents

Hungry Tiger

Turmeric-bright graffiti on a warm cream wall

Apple

White room with a single blue accent

Vercel

Typeset terminal on white paper

Notion

Warm paper notebook under morning light

# Reflect Notes — Style Reference
> Starlit violet cosmos — a dark editorial notebook

**Theme:** dark

Reflect is a dark cosmological interface: a deep-navy canvas dusted with violet nebulae, hairline gradients, and razor-sharp serif display type. Content reads like an editorial page floating in space, with soft glows replacing hard borders. Every accent is a saturated cool tone — never warm — so the eye stays calm even under long reading sessions.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Nebula Violet | `#8a5cf6` | `--color-nebula-violet` | Primary CTA, active state, brand mark |
| Comet Cyan | `#7ce3ff` | `--color-comet-cyan` | Link hover, secondary highlight |
| Void | `#05060f` | `--color-void` | Page background, deepest layer |
| Midnight | `#0b0b1a` | `--color-midnight` | Card surface, elevated panel |
| Nebula Mist | `#1a1b2e` | `--color-nebula-mist` | Divider surface, inset panels |
| Stardust | `#a5a6c0` | `--color-stardust` | Body text primary on dark |
| Moonlight | `#f2f2f7` | `--color-moonlight` | Headline text, high emphasis |

## Tokens — Typography

**Scale:** Perfect Fourth (1.333), base 16px

| Step | Size | Weight | Line-height |
|------|-----:|-------:|------------:|
| display-xl | 96px | 400 | 1.02 |
| display | 72px | 400 | 1.05 |
| heading-lg | 48px | 400 | 1.1 |
| heading | 32px | 500 | 1.2 |
| subheading | 20px | 500 | 1.35 |
| body-lg | 18px | 400 | 1.55 |
| body | 15px | 400 | 1.6 |

### Fonts
- **DISPLAY — GT Sectra** · weights 400, 500 · sizes 32px–96px · line-height 1.02–1.2 · letter-spacing -0.02em
  - Fallback: Cormorant Garamond, Playfair Display
  - High-contrast serif that carries the entire brand voice.
- **BODY — Inter** · weights 400, 500, 600 · sizes 13–20px · line-height 1.4–1.6 · letter-spacing -0.01em
  - Fallback: -apple-system, Söhne, Segoe UI
  - Neutral grotesque for reading UI.
- **CODE — JetBrains Mono** · weights 400 · sizes 13–15px · line-height 1.5 · letter-spacing 0
  - Fallback: IBM Plex Mono, ui-monospace
  - Code snippets inside notes.

## Tokens — Spacing & Shape

| Name | Value | Role |
|------|-------|------|
| `space-2` | 8px | Icon-to-text gap |
| `space-4` | 16px | Component padding |
| `space-6` | 24px | Card padding |
| `space-10` | 40px | Block gap |
| `space-16` | 64px | Section gap |
| `space-24` | 96px | Hero vertical rhythm |
| `radius-sm` | 6px | Buttons, inputs |
| `radius-md` | 12px | Cards |
| `radius-lg` | 20px | Feature panels |

## Guidelines

- Serif is reserved for display and hero. Never mix serif into body copy.
- Glow (soft box-shadow with violet at 20% opacity) replaces hairline borders on hover.
- Warm colors are forbidden. If you need emphasis, saturate a cool accent instead.
- Prefer generous line-height (1.55+) — reading is the primary task.