Obsidian OS

Dark-first canvas — primary surface #000000 paired with foreground #ffffff doing the bulk of reading-layer work. Accent moments use #0000ee + #1d1d1d sparingly. Near-black backdrop with restrained warm or cool accents.

• #000000 — primary surface / dominant background
• #ffffff — primary foreground / reading layer
• #0000ee — first accent — used for CTAs and highlights
• #1d1d1d — secondary accent / hover states
• #ff5700 — tertiary surface / panels

// No gradient extracted — use solid surfaces

• Primary family: sans-serif. Mono fallback: JetBrains Mono for code and tabular numerics.
• Weight ladder: 300 / 400 / 500. Keep substitutions tight — the captured ladder is the typographic signature.
• Display tracking uses negative px (not em) for optical correction at large sizes — typically -0.5 to -1.5px at 48-64px hero scale.
• Heading line-height tightens at display sizes (1.0-1.2); body sits at 1.4-1.6. Captions and small UI labels at 1.3.
• Tabular numerals mandatory on aligned columns: font-variant-numeric: tabular-nums.
• Italic reserved for editorial quotes and emphasis where weight cannot carry — never for product UI labels.
• Paragraph max 45-55ch at body size; dense data tables may extend to 65ch with line-height 1.5.

• Scale (observed): 2 / 6 / 8 / 10 / 12 / 16 / 20 / 24 px. Stay on the scale — no magic numbers.
• Container max-width: 1512px. Secondary bounded rails for narrow content clusters at ~480-640px.
• Section vertical rhythm: 64-128px on desktop, 40-80px on mobile, scaled by page depth.
• Card padding: 16-24px on desktop, 12-16px on mobile.
• Gutter values draw from the smaller half of the scale (4 / 8 / 12 / 16 / 24).

• Primary elevation is inset 1px border shadow — `box-shadow: <border-color> 0 0 0 1px inset`. Use this before reaching for drop shadow.
• Drop shadows stay subtle (opacity 0.05-0.4, blur 1-12px, zero spread). No bloom, no halo.
• Layering depth comes from border weight + background tone shift, not stacked shadow.
• Focus state uses inset ring at accent color — never an outer glow on form fields.

• Radius scale: 8 / 12 / 16 / 20 / 24. Buttons default to 16px, cards to 20px, modals to 24px.
• Icon style is linear — stroke-based at 1.5-2px weight; no filled or duotone variants.
• Tap targets minimum 44×44 on touch, 40×40 on pointer devices.

• button-primary

  backgroundColor

  #0000ee

  textColor

  #000000

  radius

  16px

  padding

  10px 16px

  border

  1px solid transparent

  boxShadow

  none

  fontWeight

  500

  fontSize

  14px

  lineHeight

  20px

  Tailwind

  Copy

  inline-flex items-center gap-1.5 rounded-[16px] bg-[#0000ee] px-4 py-2.5 text-[14px] font-medium text-[#000000] transition-colors duration-200 ease-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0000ee]

• button-secondary

  backgroundColor

  transparent

  textColor

  #ffffff

  radius

  16px

  padding

  10px 16px

  border

  1px solid #1d1d1d

  boxShadow

  none

  fontWeight

  500

  fontSize

  14px

  Tailwind

  Copy

  inline-flex items-center gap-1.5 rounded-[16px] border border-[#1d1d1d] bg-transparent px-4 py-2.5 text-[14px] font-medium text-[#ffffff] transition-colors duration-200 ease-out hover:bg-[#ff5700] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0000ee]

• card-surface

  backgroundColor

  #ffffff

  textColor

  #ffffff

  radius

  20px

  padding

  24px

  border

  none

  boxShadow

  #1d1d1d 0 0 0 1px inset

  Tailwind

  Copy

  rounded-[20px] bg-[#ffffff] p-6 text-[#ffffff] shadow-[#1d1d1d_0_0_0_1px_inset]

• input-field

  backgroundColor

  #ffffff

  textColor

  #ffffff

  radius

  12px

  padding

  8px 12px

  border

  1px solid #1d1d1d

  boxShadow

  none

  fontSize

  14px

  lineHeight

  20px

  Tailwind

  Copy

  w-full rounded-[12px] border border-[#1d1d1d] bg-[#ffffff] px-3 py-2 text-[14px] leading-5 text-[#ffffff] placeholder:text-[#ff5700] focus-visible:outline-none focus-visible:border-[#0000ee] focus-visible:ring-2 focus-visible:ring-[#0000ee]/30

• Captured motion level: moderate. Libraries detected: Framer Motion.
• useReducedMotion mandatory — all animations collapse to opacity-only or disable entirely.
• Deterministic cubic-bezier or ease-out only; spring animations only where genuinely needed.
• Loop animations forbidden except explicit loaders.
• Hover and reveal motion use the same primary easing curve to feel consistent across the page.

• Segmented controls for binary/ternary choices (pricing toggle, doc version switcher) over toggle switches.
• Accordion: single-open for FAQ; multi-open only for deeply nested documentation.
• Tooltips: hover + focus with 300-400ms delay, dismiss instantly on blur.
• Modals for destructive confirmations; drawers for mobile-only expansions; never nested modals.
• Form validation: inline below field on blur; submit disabled until pristine.
• Empty states: small icon + one-line copy + primary action link, no illustrations beyond brand pattern.
• Loading states: skeleton shimmer for content blocks; inline spinner for button confirm states.

Desktop-first because the audience is technical teams on wide displays. Mobile adapts the same language without reinventing it — no hamburger-revealed alternate architecture.

• Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard Tailwind ladder.
• Container max-width: 1512px. Below 1280, padding compresses but composition holds.
• Hide-on-mobile is banned — if a control exists on desktop, it must reach mobile via reflow.
• Tap target minimum 44×44 on touch; 40×40 on pointer devices.
• Typography scales proportionally: hero 48-64 → 32-40 on tablet → 28-32 on mobile.

• Color contrast: foreground #ffffff on background #000000 should meet WCAG AA at minimum (4.5:1 for body, 3:1 for display). Verify with axe-core or Lighthouse.
• focus-visible: 2px ring at accent color, never display:none on focus outline. Mandatory on every interactive element.
• All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions.
• ARIA labels on icon-only buttons; aria-expanded on collapsibles; aria-live='polite' on toasts.
• Motion respects prefers-reduced-motion — animations reduce to opacity-only or disable entirely.
• Form errors announced via aria-describedby on the associated input; never color-only signaling.
• Screen reader-only content uses sr-only; never display:none for meaningful context.

Motion library detected: Framer Motion. Image handling uses Next/Image (or equivalent) with lazy-loading default. Icons: Custom.

• Motion: motion.div with whileInView and viewport={{ once: true, margin: '-10%' }} for scroll reveals.
• Transitions use constants only — define ease and duration as named tokens (e.g. ease.standard, duration.fast).
• useReducedMotion guard wraps every animation primitive — no exceptions.
• Next/Image with sizes attribute always set; priority only on LCP candidate (hero image).
• No canvas, no WebGL, no Lottie unless required by product (e.g. waveform demos).

• Apply focus-visible ring at accent color #0000ee on every interactive element.
• Use tabular-nums on aligned numerics; reach for monospace fallback for code and kbd inline.
• Stay within the captured spacing scale (2, 6, 8, 10, 12, 16 px) — no magic numbers.
• Break body text at 45-55ch; dense tables may extend to 65ch at 13-14px.
• Reach for inset 1px border shadows before any drop shadow.
• Pass every page through useReducedMotion before shipping.
• Default to the primary easing curve for interactive transitions; reserve longer durations for atmospheric beats.

• Never introduce a font weight outside the captured ladder — the discipline is the signature.
• Never invent durations or easings outside the captured set — pick from the existing scale.
• Never use drop shadows above 0.4 opacity or 16px blur — heavy elevation breaks the surface language.
• Never introduce a secondary display font without explicit reason — one family + one mono is the boundary.
• Never animate height: auto — use measured transforms or scaleY.
• Never use em for tracking on display sizes — the px-based scale is an optical constant.
• Never apply hover-only affordances — every interaction must be keyboard + screen reader reachable.

• Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS beyond the design system.
• Spacing scale: 2 / 6 / 8 / 10 / 12 / 16 / 20 / 24 px.
• Container max-width: 1512px — do not exceed.
• Single font family: sans-serif, plus JetBrains Mono mono fallback.
• Weight ladder: 300 / 400 / 500 — no substitutions.
• Motion: durations 0.1s; easings ease-out + cubic-bezier(0.4, 0, 0.2, 1). No springs unless explicitly motivated.
• Radius scale: 8 / 12 / 16 / 20 / 24 px.

• Container width: no page section exceeds 1512px wide.
• Spacing grep: no values outside the 2 / 6 / 8 / 10 / 12 / 16 ladder (+ scale extensions).
• Font weight grep: only 300, 400, 500 appear in computed styles.
• Transition timing-function values draw from the captured easing set (ease-out + cubic-bezier(0.4, 0, 0.2, 1)).
• Transition duration values draw from {0.1s}s.
• Shadow audit: every elevation uses an inset 1px shadow first; drop shadows ≤ 0.4 opacity.
• Image audit: loading='lazy' on every non-LCP image; priority only on hero.
• Contrast audit: body text on dominant background ≥ 4.5:1 (WCAG AA).
• Tap target audit: minimum 44×44 on touch surfaces; 40×40 on pointer.