editorialv1.0.0·light

Almanac

Almanac — Vintage Reference Editorial

editorialvintageforestserifarchival

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

almanac · rendered from tokens

Color

brand.primary

oklch(0.42 0.09 150)

brand.secondary

oklch(0.5 0.12 50)

brand.onBrand

oklch(0.98 0.01 90)

text.primary

oklch(0.24 0.014 80)

text.muted

oklch(0.45 0.018 80)

text.link

oklch(0.42 0.09 150)

surface.base

oklch(0.965 0.014 85)

surface.raised

oklch(0.99 0.008 85)

surface.sunken

oklch(0.94 0.018 85)

border.default

oklch(0.87 0.016 85)

state.success

oklch(0.5 0.13 150)

state.danger

oklch(0.52 0.19 25)

state.warning

oklch(0.62 0.13 70)

state.info

oklch(0.5 0.11 240)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full

Use this system

Three ways to drop Almanac into your workflow.

Save the file for your tool — your agent then generates UI in Almanac, automatically.

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/almanac.mdc

Project rule — applied to every generation.

WsWindsurf

.windsurfrules

Repo root — Cascade reads it automatically.

GCGitHub Copilot

.github/copilot-instructions.md

Repo-wide custom instructions for Copilot.

The system

Brand & Voice

Almanac reads like a well-thumbed reference book: aged-paper surfaces, forest green, and a literary serif. Authoritative and warm, it suits archives, guides, and documentation that wants to feel timeless.

Layout & Grid

Structured, table-of-contents layouts with footnotes and marginal notes. Forest green marks links and section markers; the warm base lowers glare for long reads.

Components

Buttons

Classic radius.sm buttons in forest green with light onBrand text, or a restrained outline for secondary actions.

Entry Cards

Reference entries on color.surface.raised, divided by warm borders, with serif titles and muted metadata.

Accessibility

Aged but legible: primary and muted text pass WCAG AA on every surface. Links are underlined, contrast favors reading, and focus rings stay clearly visible.

Tokens

Color (14)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md97 lines

1---

2$schema: https://designmd.in/schema/v1.json

3id: almanac

4name: Almanac

5title: Almanac — Vintage Reference Editorial

6version: 1.0.0

7category: editorial

8tags: [editorial, vintage, forest, serif, archival]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.42 0.09 150)", type: color }

17 secondary: { value: "oklch(0.5 0.12 50)", type: color }

18 onBrand: { value: "oklch(0.98 0.01 90)", type: color }

19 text:

20 primary: { value: "oklch(0.24 0.014 80)", type: color }

21 muted: { value: "oklch(0.45 0.018 80)", type: color }

22 link: { value: "{color.brand.primary}", type: color }

23 surface:

24 base: { value: "oklch(0.965 0.014 85)", type: color }

25 raised: { value: "oklch(0.99 0.008 85)", type: color }

26 sunken: { value: "oklch(0.94 0.018 85)", type: color }

27 border:

28 default: { value: "oklch(0.87 0.016 85)", type: color }

29 state:

30 success: { value: "oklch(0.5 0.13 150)", type: color }

31 danger: { value: "oklch(0.52 0.19 25)", type: color }

32 warning: { value: "oklch(0.62 0.13 70)", type: color }

33 info: { value: "oklch(0.5 0.11 240)", type: color }

34 typography:

35 family:

36 serif: { value: "Spectral, Georgia, serif", type: fontFamily }

37 sans: { value: "Inter, system-ui, sans-serif", type: fontFamily }

38 mono: { value: "ui-monospace, monospace", type: fontFamily }

39 scale:

40 sm: { value: "0.875rem", type: dimension }

41 base: { value: "1.0625rem", type: dimension }

42 lg: { value: "1.35rem", type: dimension }

43 xl: { value: "1.75rem", type: dimension }

44 "2xl": { value: "2.3rem", type: dimension }

45 "3xl": { value: "3.1rem", type: dimension }

46 weight:

47 regular: { value: 400, type: fontWeight }

48 bold: { value: 600, type: fontWeight }

49 leading:

50 tight: { value: 1.15, type: number }

51 normal: { value: 1.65, type: number }

52 spacing:

53 base: { value: "0.25rem", type: dimension }

54 radius:

55 sm: { value: "0.25rem", type: dimension }

56 md: { value: "0.5rem", type: dimension }

57 full: { value: "9999px", type: dimension }

58 shadow:

59 sm: { value: "0 1px 2px oklch(0.24 0.014 80 / 0.07)", type: shadow }

60 md: { value: "0 6px 18px oklch(0.24 0.014 80 / 0.1)", type: shadow }

61 motion:

62 duration:

63 base: { value: "200ms", type: duration }

64 easing:

65 standard: { value: "cubic-bezier(0.25, 0, 0.15, 1)", type: cubicBezier }

66 breakpoint:

67 md: { value: "768px", type: dimension }

68 iconography:

69 style: { value: "engraved 1.25px line icons, classic", type: descriptor }

70 zIndex:

71 dropdown: { value: 1000, type: number }

72 modal: { value: 1300, type: number }

73---

75# Almanac Design System

77## Brand & Voice

78Almanac reads like a well-thumbed reference book: aged-paper surfaces, forest

79green, and a literary serif. Authoritative and warm, it suits archives, guides,

80and documentation that wants to feel timeless.

82## Layout & Grid

83Structured, table-of-contents layouts with footnotes and marginal notes. Forest

84green marks links and section markers; the warm base lowers glare for long reads.

86## Components

87### Buttons

88Classic `radius.sm` buttons in forest green with light `onBrand` text, or a

89restrained outline for secondary actions.

91### Entry Cards

92Reference entries on `color.surface.raised`, divided by warm borders, with serif

93titles and muted metadata.

95## Accessibility

96Aged but legible: primary and muted text pass WCAG AA on every surface. Links are

97underlined, contrast favors reading, and focus rings stay clearly visible.

Related systems

View →

Button

Broadsheet

98AAA

Broadsheet — Newspaper Editorial

editorialeditorialserif

View →

Button

Folio

98AAA

Folio — Magazine Editorial

editorialeditorialmagazine

View →

Button

Vellum

95AA

Vellum — Warm Editorial Reading

editorialeditorialwarm