Cron Calendar
Dark · Generated 19/04/2026 · 8 colors · 16 type tokens · 9 spacing steps · 3 breakpoints · 1 motion token
v1.0.0
Color Palette
Background Colors
Dark Gray
#161412 · ×2
Orange
#FF4700 · ×1
Black 2
#0F0D0A · ×1
Text Colors
Light Gray
#CCCCCC · ×58
White
#FFFFFF · ×31
Black
#000000 · ×23
Border Colors
No border color tokens were detected. Cron uses inline RGBA values for all border styling rather than named border tokens.
Shadow Colors
Orange Glow
rgba(255,71,0,.2) · ×2
Orange Glow 3
rgba(255,71,0,.5) · ×1
19
Display Hero · 140px (capped for preview) · Bold · letter-spacing: −3px · line-height: 126px
Sunday, April 19
Body Large · 22px · Bold · line-height: 22px
Team standup · 9:00 AM – 9:30 AM · Google Meet
Body Default · 16px · Regular · line-height: 22px
3 events today · Next: Product Review in 45 min
Body Small · 15px · Regular · line-height: 19.5px
MON · TUE · WED · THU · FRI
Caption · 13px · Medium · line-height: 15px · letter-spacing: 0.15px
Line Heights
Tight
15px
Snug
19.5px
Normal
22px
Relaxed
37.4px
Loose
126px
Letter Spacing
19
Tight
−3px · hero date display, monumental numerals
Calendar · Events · Today
Normal
0.15px · body text and UI labels
Spacing
Spacing Scale
9 tokens — 1px → 431.906px
1
12
16
20
24
40
80
140
431.9
Borders
Border Radii
sm
4px
md (Pill)
9999px
Cron uses a binary radius system — either a minimal 4px for card and input corners, or a full pill (9999px) for tags, badges, and buttons. No intermediate values exist.
Border Widths
No border width tokens were detected in Cron's design system. All borders are defined inline using 1px values or via box-shadow for the orange glow effects. The orange shadow tokens (rgba(255,71,0,0.5) 0px 0px 0px 0.5px inset) act as a hairline colored border substitute.
Shadows / Elevation
Shadow Tokens
2 tokens — orange glow system unique to Cron
sm
×1
rgba(255,71,0,.2) 100px diffuse — wide ambient orange glow for hero backgrounds and section highlights
md
×1
0.5px orange inset border + rgba(255,71,0,.2) 28px diffuse — active/focused element state with glowing edge
Cron's shadow system is entirely orange-tinted and replaces traditional neutral drop-shadows. The glow effect reinforces the brand color as the sole interactive signal throughout the UI.
Z-Index
No Z-Index Tokens Detected
Cron's design system defines no named z-index tokens at the CSS custom property level. Stacking contexts are managed directly in component stylesheets without a centralized token layer — consistent with the system's overall minimalism (only 8 colors, 1 motion token).
Breakpoints
📱
XS · Mobile
500px
--breakpoint-xs · compact phone
📲
SM · Tablet
768px
--breakpoint-sm · tablet portrait
💻
MD · Desktop
1000px
--breakpoint-md · desktop layout
3 clean breakpoints — no micro-clustering like X's 13-point mobile-dense system. Reflects Cron's desktop-primary calendar focus (500 → 768 → 1000px).
Opacity
Opacity Tokens
1 token — 30%
Dim
30% · ×1
Cron defines a single opacity token at 30%. This is the most minimal opacity system in the entire series — only 1 token — consistent with Cron's extreme minimalism across all token categories.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
Light Gray (#CCC)Dark Gray (#161412)11.44:1AAA
Light Gray (#CCC)Orange (#FF4700)2.13:1Fail
Light Gray (#CCC)Black 2 (#0F0D0A)12.08:1AAA
White (#FFF)Dark Gray (#161412)18.37:1AAA
White (#FFF)Orange (#FF4700)3.41:1AA Large
White (#FFF)Black 2 (#0F0D0A)19.4:1AAA
Black (#000)Dark Gray (#161412)1.14:1Fail
Black (#000)Orange (#FF4700)6.15:1AA
Black (#000)Black 2 (#0F0D0A)1.08:1Fail
CSS Variables Reference
Colors
Black 2 (Canvas)--color-black-2#0F0D0A
Dark Gray--color-dark-gray#161412
Black--color-black#000000
Orange (Brand)--color-orange-2#FF4700
Orange Glow--color-orangergba(255,71,0,.2)
Orange Glow 3--color-orange-3rgba(255,71,0,.5)
Light Gray (Text)--color-light-gray#CCCCCC
White (Text)--color-white#FFFFFF
Typography
Font Family--font-family-baseHelvetica Neue
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
2xs (Caption)--font-size-2xs13px
xs (Body sm)--font-size-xs15px
sm (Body)--font-size-sm16px
base (Body lg)--font-size-base22px
lg (Display Hero)--font-size-lg140px
Tight Tracking--letter-spacing-tight−3px
Normal Tracking--letter-spacing-normal0.15px
Spacing
space-1--space-11px
space-2--space-212px
space-3--space-316px
space-4--space-420px
space-5--space-524px
space-6--space-640px
space-8--space-880px
space-10--space-10140px
space-12--space-12431.906px
Borders, Shadows & Motion
sm (Rect)--radius-sm4px
md (Pill)--radius-md9999px
No border-width tokens——
Orange Glow Wide--shadow-sm100px diffuse
Orange Edge + Glow--shadow-md0.5px inset + 28px
Transition--duration-instant175ms
No easing tokens——
Dim--opacity-3030%
XS · Mobile--breakpoint-xs500px
SM · Tablet--breakpoint-sm768px
MD · Desktop--breakpoint-md1000px
No z-index tokens——
Design System Preview · Cron Calendar (Dark) · Generated 19/04/2026 · 8 color tokens · 5 font-size · 1 font-family · 3 font-weight · 5 line-height · 2 letter-spacing · 9 spacing · 2 radius · 0 border-width · 2 shadow · 1 duration · 0 easing · 0 z-index · 3 breakpoints · 1 opacity