DBTech45, as shipped

Overview

DBTech45 is a working almanac, not a polished founder portfolio. It should feel like a broadsheet newspaper connected to a live operations terminal: authoritative serif headlines, terse monospaced filing data, unvarnished personal writing, and one unmistakable blue signal.

The voice is candid, industrious, and current. The interface should show that Derek is building in public while restaurant work, markets, family, and autonomous agents continue around him. Evidence outranks claims. Shipped products, timestamps, editions, and named agents make the work credible.

Principles

1. Filed, not posted. Treat updates as records with dates, desks, issue numbers, and status.
2. Editorial first. Typography and hierarchy carry the identity. Decoration stays quiet.
3. One live signal. Blue marks links, active states, live data, and phrases worth remembering.
4. Proof over polish. Prefer working links, real timestamps, and useful details over promotional language.
5. Human at the center. Automation is visible, but Derek remains the author and only public face.
6. Both shifts count. Light and dark themes are equal products, not an original and an afterthought.

Colors

Functional palette

• **Signal Blue (#0666F5)** is the sole brand accent. Use it for primary actions, links, live states, selected navigation, key headline phrases, and data emphasis.
• **Light Canvas (#FFFFFF)** gives the site its paper character.
• **Light Surface (#F7F8FA)** separates long editorial regions without card clutter.
• **Light Ink (#101010)** is the default text and headline color.
• **Dark Canvas (#030620)** is blue-black, not neutral black. It preserves the newsroom-at-midnight identity.
• **Dark Surface (#060A2A)** creates subtle section changes without visible containers.
• **Dark Ink (#F7F8F8)** carries primary copy.
• Muted and faint colors are for metadata and secondary explanations only. Never use faint text for essential instructions.

Theme mapping

Do not introduce project-brand colors into the DBTech45 shell. Product cards may display a small product mark, but their container, type, and interaction remain DBTech45.

Typography

Typography creates the tension between personal essay and operating system.

• Playfair Display is the editorial voice. Use it for page titles, major section headings, pull quotes, and large numerical proof. It should feel composed, never ornamental.
• Inter is the reading and interface voice. Use it for paragraphs, navigation, buttons, cards, and supporting copy.
• JetBrains Mono is the filing voice. Use uppercase mono for timestamps, desk labels, dates, issue markers, status, table headings, and compact navigation in dense editorial contexts.

Hierarchy rules

• A page gets one display-xl headline. On small screens, reduce it fluidly to 2.6rem rather than allowing awkward one-word lines.
• Keep prose between 55 and 72 characters per line. Introductory copy may reach 46rem.
• Use sentence case for editorial headings. Uppercase belongs only to compact monospaced labels.
• Blue headline emphasis may highlight one or two semantic phrases. Do not color arbitrary words to manufacture energy.
• Body copy must remain at least 1rem. Metadata may drop to 0.75rem only with strong contrast and generous tracking.
• Never replace the serif with a generic geometric display face. The contrast between Playfair, Inter, and JetBrains Mono is the brand.

Layout

The desktop content frame is a centered 69rem to 72rem column with roughly 5.5rem side clearance at a 1280px viewport. Text aligns to one shared left edge.

Grid

• Use a 12-column desktop grid with 24px gutters.
• Use 8 columns from 768px to 1023px.
• Use 4 columns below 768px with 20px page gutters.
• Major editorial sections span the full frame. Prose blocks usually span 7 to 8 desktop columns.
• Product and newsletter collections may use two columns. Operational metrics may use four equal columns.
• Section dividers extend across the frame. Nested prose rules align to the content column.

Rhythm

• Default major section padding: 80px top and 64px bottom.
• High-impact narrative sections may use more breathing room, but never use empty viewport-height gaps as decoration.
• Separate entries with 1px rules rather than individual floating cards.
• Use spacing tokens only. The 8px rhythm is primary, with 4px reserved for tight label relationships.
• On mobile, stack CTAs and metrics when needed. Preserve reading order and keep 20px gutters.

Responsive behavior

• The desktop navigation collapses to one accessible menu below 900px.
• Metric rows become a two-column grid, then one column only when labels or localization demand it.
• Headline sizes use clamp() and remain readable without horizontal overflow.
• Tables become scroll regions with a visible affordance. Do not shrink tabular text below 14px.
• Every control has a minimum 44px hit target.

Elevation & Depth

DBTech45 is flat by design. Depth comes from type scale, rules, spacing, and changes in surface tone.

• Default elevation is none.
• Use 1px borders for cards, tables, stat grids, menus, and secondary buttons.
• Shadows are allowed only for temporary overlays such as menus and dialogs. Keep them broad and low contrast.
• Do not use glass effects, gradients, glow, or layered floating cards.
• In dark mode, distinguish surfaces by blue-black value shifts, not luminous outlines.

Shapes

The system uses two shape languages:

• Square editorial structures: articles, product rows, stat grids, tables, images, and content sections use zero radius.
• Pill controls: primary buttons, secondary buttons, tags, filters, and compact status controls use a full pill.

This contrast is deliberate. Content feels archival and stable; actions feel immediate and touchable. Do not apply medium rounded corners to every container.

Icons are simple line symbols with a 1.5px to 2px stroke. Use SVG icons, never emoji. Icons support labels and never replace unfamiliar actions.

Components

Masthead

The masthead combines the DBTech45 wordmark, a small almanac descriptor, primary desk navigation, theme control, and Subscribe action. Keep it visually quiet so the first headline owns the page. The active desk uses blue or a restrained underline, not a filled tab.

Filing line

A filing line places date, location, filing time, and edition in uppercase JetBrains Mono. Use middle-dot separators. The edition status aligns opposite on desktop and wraps below on mobile. A full-width rule closes the line.

Hero

The hero contains one editorial headline, one short self-description, an optional italic pull quote, no more than two actions, and a recently filed ledger. Avoid illustration unless it is documentary evidence.

Buttons

• Primary buttons are blue pills with white text.
• Secondary buttons are transparent pills with a theme-aware rule and primary text.
• Hover states darken or lighten with a visible change, not motion alone.
• Focus uses a 2px signal-blue outline with at least 3px offset.
• Button labels are direct verbs: “Read,” “See,” “Meet,” “Browse,” or “Subscribe.”

Product ledger

Products are evidence. Show operational status, product name, one plain-English sentence, and canonical domain. The whole row or card may be clickable, but it must retain visible focus. Avoid feature-list bloat and fake dashboard imagery.

Editorial cards

Story cards include desk label, headline, short summary when needed, source or filing time, and link. Ranking uses large serif numerals. Use rules and spacing instead of shadows.

Metric rail

Metrics use a bordered four-column rail. A small line icon sits above a large blue Playfair numeral and uppercase mono label. Dividers are shared between cells. Values must have text equivalents and may not rely on icons alone.

Newsletter block

Each newsletter identifies cadence, title, price or access level, purpose, and one subscription action. Treat it as an editorial department, not a sales pricing card.

Agent identity

Agent avatars are clean functional role icons only. No faces and no lettering inside avatars. Agent displays identify name, lane, responsibility, and current status without pretending agents are people.

Forms

Inputs use a plain surface, 1px theme-aware border, 8px control radius, Inter text, and persistent labels. Focus uses the same blue outline as buttons. Errors pair danger with explicit text and an icon. Never communicate state by color alone.

Motion

• Default transition duration: 160ms.
• Large spatial transitions: no more than 240ms.
• Use ease-out for entrances and ease-in-out for state changes.
• Motion explains menu expansion, filtering, and content updates. It does not decorate scrolling.
• Respect prefers-reduced-motion by removing transforms and nonessential transitions.
• Live updates should not move keyboard focus or cause layout jumps.

Accessibility

• Target WCAG 2.2 AA minimum.
• Text contrast must be at least 4.5:1; large text at least 3:1.
• Controls and graphical boundaries must reach 3:1 against adjacent surfaces.
• Keep visible focus on every interactive element.
• Use semantic landmarks, one h1, ordered headings, descriptive link text, and useful image alt text.
• Provide a skip link as the first focusable item.
• Theme choice must honor system preference by default and persist only after the user changes it.
• Dynamic editions and live statuses require polite announcements only when the update matters to the current task.

Do's and Don'ts

Do

• Lead with a strong editorial headline and real evidence.
• Use blue as a signal with a specific meaning.
• Label dates, editions, status, and desks consistently.
• Let rules, alignment, and whitespace form the interface.
• Write plainly enough that a reader outside technology understands the point.
• Preserve equal quality, contrast, and hierarchy in light and dark themes.
• Show what is live, shipped, or filed with truthful status.

Don't

• Do not turn the site into a generic SaaS landing page.
• Do not use gradient text, glass cards, glowing borders, giant blobs, or stock 3D art.
• Do not place every idea inside a rounded card.
• Do not mix multiple bright accent colors into the DBTech45 shell.
• Do not use serif type for interface controls or long paragraphs.
• Do not over-animate, auto-rotate content, or hide information in hover-only states.
• Do not invent metrics, testimonials, affiliations, biographies, or product status.
• Do not use faces or lettering for agent avatars.
• Do not ship a component in only one theme.