DESIGN.md — daylightcomputer.com

1. Visual Theme & Atmosphere

Daylight Computer’s site evokes warmth, intentionality, and a philosophy of calm computing. The palette is rooted in natural, earthy tones — warm creams, olive darks, and a single amber accent — that feel organic against the sterile backgrounds typical of tech hardware brands. This is a product positioned against digital overstimulation, and the design embodies that: no blues, no saturated tech colors, no hard whites. The typographic pairing of a custom ABC Arizona Flare serif with ABC Room sans creates a feeling of considered craft, like a boutique hardware journal rather than a consumer electronics page. The signature amber CTA button literally glows on hover through a box-shadow bloom effect — subtle theatre in an otherwise restrained environment.

2. Color Palette & Roles

Body & Text

• Olive Black (rgb(23, 25, 15) = #17190f): The primary text color. Not gray, not pure black — a dark olive that leans warm and organic. Used across all body copy.
• Warm White (rgb(250, 245, 242) = #faf5f2): Secondary surface and text on dark backgrounds. A cream rather than white.

Backgrounds

• Dark Olive (rgb(24, 25, 15)): Footer and primary dark surface. Matches the olive black text family — the entire dark system is olive-shifted.
• Muted Cream (rgb(250, 245, 242)): Main light card surfaces. The site’s default light background is cream, not white.
• Frosted Nav (rgba(232, 222, 216, 0.8)): Navigation bar with 80% opacity warm blush — a frosted glass effect rooted in the warm palette.
• Olive Overlays (rgba(67, 70, 38, 0.9), rgba(39, 40, 25, 0.9), rgba(88, 91, 61, 0.9)): Dark olive overlay surfaces for image-over-text zones. All deep, all olive-green in hue.

Accent

• Amber (rgb(255, 157, 0) = #ff9d00): The single chromatic accent. Used exclusively on the primary CTA button. On hover, emits an amber glow via box-shadow: rgba(249, 157, 4, 0.565) 0px 0px 15.7px 0px.

Borders

• Light Gray (rgb(229, 231, 235) = #e5e7eb): Standard border color — the only neutral-cool element in an otherwise warm system.

3. Typography Rules

ABC Arizona Flare (__abcArizonaFlareFont): A custom-licensed serif with optical character. Used for hero and display headings:

• H1 hero: 56px / 56px line-height, weight 300 (light) — editorial and spacious
• H2 display: 44px / 48px, weight 300 — maintains the lightness
• Secondary display: 27px / 34px, weight 500 — mid-weight for subheadings

The weight-300 serif at large sizes creates a refined, book-like aesthetic. The custom --text-scale-* CSS properties signal a fluid typography system scaling with viewport width.

ABC Room (__abcRoomFont): A custom sans-serif for all UI and body copy:

• Labels and nav: 16px, weight 500
• Body: 15px / 24px
• Small UI: 14px / 20px, weight 400
• Buttons: 14–16px weight 500

No monospace. No system fallback faces beyond the serif/sans-serif generic. The two ABC typefaces are the typographic identity — both custom, both warm in proportion.

The fluid type scale (--text-scale-screen-max, --text-scale-screen-min, --text-scale-offset) means sizes are not fixed — they grow and shrink continuously with viewport width.

4. Component Styling

• CTA Button: Amber fill (#ff9d00), dark olive text. On hover: amber glow bloom via box-shadow. The hover effect is the site’s most expressive micro-interaction.
• Navigation: Frosted blush bar (rgba(232,222,216,0.8)) with 0.1 opacity border — clearly a backdrop-filter bar floating over content.
• Cards: Cream surfaces (#faf5f2) with olive dark text. Rounded at various radii inferred from Tailwind utilities.
• Image overlays: Three distinct olive-dark overlays for feature image zones — tonal depth without leaving the warm palette.
• Border Radius: Not explicitly listed in the data, suggesting Tailwind’s default utility classes handle all radii.

5. Layout Principles

Tailwind CSS breakpoints inferred from the standard scale. The fluid type scale expands layout breathing room at larger viewports. The Shopify integration suggests an e-commerce purchase flow exists alongside the editorial content. Navigation uses a nav-menu-addon pattern, suggesting a hamburger or slide-out menu. Sections are full-width with centered content columns, typical of hardware product landing pages.

6. Depth & Elevation

The amber CTA button hover glow (box-shadow: rgba(249,157,4,0.565) 0px 0px 15.7px 0px) is the only explicit elevation effect. Otherwise, depth is achieved through:

• Olive dark overlays on image sections (the image bleeds through at ~10% opacity)
• The frosted nav bar creating a sense of floating above content
• Tonal warmth gradient from cream light surfaces to olive-dark footer

7. Do’s and Don’ts

Do:

• Use the amber accent exclusively for the primary CTA. One glowing button per page.
• Keep the warm palette intact: olive blacks, cream whites, no grays, no cool blues.
• Use ABC Arizona Flare at weight 300 for display text. Heaviness kills the editorial quality.
• Apply the amber glow box-shadow on button hover — it is the signature interaction.
• Use the fluid type scale — static font sizes undermine the system’s responsiveness.

Don’t:

• Introduce cool-toned colors. Even borders are a warm gray.
• Use pure white (#ffffff) as a surface. The system uses cream (#faf5f2).
• Set the serif at weight 700+ — it is a light-weight editorial face.
• Add blue link colors or standard tech color accents.
• Flatten the olive dark footer — the warm dark anchor is essential to page rhythm.

8. Responsive Behavior

The --text-scale-* fluid type system means type scales continuously rather than snapping at breakpoints. The Tailwind-standard breakpoints handle layout reflow. Navigation converts to drawer/hamburger at mobile. The amber CTA should remain full-width on small screens. Cream and olive surfaces stack vertically without losing their tonal relationship.

9. Agent Prompt Guide

Build a hardware product page matching daylightcomputer.com: warm cream background (#faf5f2), olive-black text (#17190f), olive-dark footer (#18190f). ABC Arizona Flare serif weight 300 for hero headlines (56px), ABC Room sans weight 500 for UI. Single amber CTA button (#ff9d00) with hover glow: box-shadow: rgba(249,157,4,0.565) 0px 0px 16px 0px. Frosted nav with rgba(232,222,216,0.8). No blue tones. No pure white. Warm throughout.

Generated by Sparkbites — extracted from live CSS analysis