Designs

Builds

danitesler.com

Principles, tokens, live components and six patterns — the core of danitesler.com.

01

Principles

Seven decisions every page follows. When in doubt, come back here.

  1. Monochrome frame, colour from the work

    The chrome is black, white and greys. Colour arrives only with what is being shown — a case study’s theme, a service or a platform — through --spot, --acc and --cs-accent.

  2. Dark first, both themes always

    Dark is the default and light is one click away. Every colour is a token, or a token mixed with transparent, so nothing needs a second rule to flip.

  3. Content lives in data

    Copy, links, metrics and case studies sit in data/site.ts and data/work/. Components render data; they don’t own strings or hex values.

  4. Code the visuals

    Product ideas are shown with coded mini-UIs — covers, service previews, case-study visuals — instead of flat images with baked-in text. They scale, theme and stay readable to crawlers.

  5. Quiet motion with a purpose

    Transform and opacity only, ease-out-expo by default, played on reveal or hover rather than looping. Everything collapses under prefers-reduced-motion.

  6. Accessible by default

    A visible focus ring on every control, 44px touch targets, decorative layers hidden from assistive tech and real text behind every animated heading.

  7. Static and light

    Astro and plain CSS partials, no UI framework. Scripts bind once and survive ClientRouter page swaps.

02

Foundations

The tokens in use. Pick from these before inventing a new value.

Colour

A neutral frame; colour arrives only with what is shown.

  • --color-bg #000000 #ffffff Page background
  • --color-text #ffffff #0a0a0a Primary text; the base for every line, border and hover mix
  • --color-muted #939393 #6b6b6b Secondary text: descriptions, captions, labels
  • --color-border #3b3b3b #dadada Card and control borders at rest
  • --color-surface #1a1a1a #ffffff Floating panels

Accents

  • --accent-research What I do · Research & validation
  • --accent-product What I do · Product design
  • --accent-ai What I do · AI & agents
  • --accent-system What I do · Design systems
  • --accent-brand What I do · Brand & identity
  • --accent-marketing What I do · Marketing automation
  • --accent-dribbble Designs · More on Dribbble
  • --accent-figma Builds · Figma
  • --accent-playnite Builds · Playnite Extensions
  • --accent-github Builds · GitHub
  • --accent-ayywi Builds · Ayywi design system
  • --accent-github-ink

Lines, borders and hovers mix --color-text with transparent (4% wash, 10% hairline, 23% hovered border). Raw accents are for fills and glows; text and icons use the -text variant.

Typography

Unbounded for headings and numbers, Sora for everything read, Caveat for the handwritten touch.

  • Aa Unbounded --font-heading Loaded weights 500 · 700 Headings, metrics and numbers
  • Aa Sora --font-body Loaded weights 400 · 500 · 600 Body copy, UI and labels
  • Aa Caveat --signature-font Loaded weights 600 · 700 The name in the header, case-study kickers and card labels
  1. Display clamp(44px, 15vw, 202px) · 700 · 0.9 · -0.03em Home hero title

    Product

  2. Heading 2 40px · 32px phone · 700 · 48px Section titles: SectionHeader, Connect

    Designs

  3. Card title 21–22px · 500 · 1.3 ProjectCard, ProfileCard, ServiceCard

    Oktopost

  4. Metric 44px · 700 · 1 · -1px ProfileCard metric, case-study stats

    200k

  5. Body 18px · 400 · 1.6 Default body text

    Flows, interfaces and clickable or coded prototypes.

  6. Eyebrow 12px · 600 · 1.6 · 1.5px ds/Eyebrow

    KEEP EXPLORING

Spacing & radius

A 4/8 scale for layout. Round, never bubbly: 16px cards, fully round controls.

  1. 4 Icon to label inside tags
  2. 8 Inline groups, chip gaps
  3. 12 Button rows, footer lists
  4. 16 Card grid gaps, gaps inside cards
  5. 24 Page gutter, card padding on phones
  6. 32 Card padding, stacked blocks
  7. 40 Section header to content
  8. 48 Footer and About gaps
  9. 64 Between case-study blocks
  10. 96 Section divider margins
  11. 128 Section padding
  • 4px Focus rings on text links
  • --radius-button Small thumbnails, skip link
  • 12px Menu rows, chat bubbles
  • --radius-card Cards, covers, frames, media
  • --cs-radius-lg Large case-study panels
  • 999px Buttons, pills, chips, breadcrumb
  • 50% Icon buttons, avatars, dots

Motion & layout

Transform and opacity only, --ease-out-expo by default. One container, a few reading widths.

  • --ease-spring Small tactile moves that overshoot: button lift, logo
  • --ease-out-expo Default for movement: lifts, reveals, zooms
  • --ease-menu Menus and carets
  • 0.3s · --transition Colour, border, background
  • 0.3s · --ease-menu Menus open, carets turn
  • 0.4s · --ease-spring Buttons and icon buttons lift 2px
  • 0.45s · --ease-out-expo Cards lift, spotlight fades in
  • 0.6s · --ease-out-expo Images zoom inside media
  • 1s · --ease-out-expo Entrances: reveal-on-scroll, hero
  • 1400px --container-max: header, hero, project grid
  • 1100px Builds, Keep exploring
  • 1040px /work/ list
  • 960px What I do grid
  • 880px About copy
  • 740px Reading measure for case-study prose

Breakpoints: max-width: 1024px (Tablet) · max-width: 899–960px (Narrow) · max-width: 767px (Phone) · max-width: 359px (Small phone) · hover: hover / none (Input). Gutters are 24px, 16px from 1024px down.

03

Components

Primitives take no site data; cards render data from site.ts and data/work/. Every preview is the real component.

Primitives

Button

Pill button. Primary has the gradient ring that spins on hover; ghost is the quiet secondary beside it. One primary per view.

src/components/ds/Button.astro · See it: Home · Hero

Icon

UI arrows and brand marks drawn in currentColor, defined once in ds/icons.ts. Case-study content icons live in work/CaseStudyIcon.astro.

  • arrow-up-right
  • arrow-right
  • chevron-down
  • menu
  • search
  • close
  • download
  • linkedin
  • dribbble
  • figma
  • github
  • ayywi

src/components/ds/Icon.astro · See it: Footer social links

Pill

Small rounded label for a status or a short fact. The dot pulses; --pill-dot changes its colour.

Currently at Oktopost B2B SaaS Agent running

src/components/ds/Pill.astro · See it: Home · Hero status

Eyebrow

Small uppercase label that introduces a heading or a group. Two or three words.

Keep exploring

A label names the thing below it

src/components/ds/Eyebrow.astro · See it: Keep exploring

SectionHeader

Opens a homepage section: a TextReveal title with a muted description that fades in just behind it. Centred; left-aligned on phones.

Six ways I help teams ship. Pick one or bundle them.

src/components/ds/SectionHeader.astro · See it: Designs

Cards

One recipe: 1px border, 16px radius, Lift on hover and a Spotlight in the accent of what the card shows.

PlatformIcon

Dark app-icon tile with a platform mark (Dribbble, Figma, Playnite, GitHub, Ayywi), lit from below by the --spot of the card around it.

src/components/PlatformIcon.astro · See it: Home · Builds

ProfileCard

A public profile with its app icon and lead metric, lit by the platform accent. Opens in a new tab.

src/components/ProfileCard.astro · See it: Home · Builds

ServiceCard

A service with its outlined number and coded preview, tinted by the service accent. The preview replays on hover. Sits inside a .svc-f list.

  • Research & Validation

    Interviews, usability tests and data that show what people need, then prove a design works before it ships.

  • Product Design & Prototyping

    Flows, interfaces and clickable or coded prototypes, from a 0→1 idea to B2B SaaS screens engineers can ship.

src/components/ServiceCard.astro · See it: Home · What I do

WorkCard

Case-study row: cover, eyebrow, title, intro and Role / Years / Platform facts. The title link covers the card.

B2B social media management

Oktopost

Oktopost helps B2B teams publish social content and run employee advocacy programs. I realigned the Lobster design system, redesigned the Advocacy Board with points gamification and custom branding, and rebuilt the post editor and AI Assistant.

Role
Product designer
Years
2023 – present
Platform
Web, mobile web & email

src/components/WorkCard.astro · See it: Case studies

Navigation, content & blocks

ProjectCover

Branded case-study thumbnail built from the case-study data: theme glow, wordmark, hero screen in a browser window and one signature chip. Sized in container units.

  • Oktopost
  • Comeet
  • Scalez
  • SMSEdge
  • Dojohome

src/components/ProjectCover.astro · See it: Designs

ProjectIcon

Coded app icon for a project in the ProfileCard style: a dark tile lit from below by the product accent, with its glyph in that accent. Crisp at any size.

  • chart
  • sections
  • pixel
  • empty
  • foundation
  • annotate
  • grid
  • hover
  • autostatus
  • randomtheme
  • callingcard
  • holotape
  • launchpad
  • questlog
  • coldseat
  • uplink
  • hearthside
  • payload
  • attache
  • medallion
  • nightcity
  • blacklist
  • dropzone
  • cordon
  • overworld
  • biome
  • tumbleweed
  • libertalia
  • codex
  • clutch
  • ace
  • mannco
  • ancient
  • shade
  • chakram
  • materia
  • primo
  • fluence
  • ayywi
  • ayywi

src/components/ProjectIcon.astro · See it: Builds

AiTag

Marks work with AI features. Grey at rest; hovering the tag plays a purple glow and shows why.

AI This work contains AI features, or tools used in the process

src/components/AiTag.astro · See it: Designs

Page sections

Whole sections, composed from the pieces above. Follow the link to see each in place.

Case-study blocks

Case studies are data: typed blocks (data/work/types.ts) rendered by components/work/CaseStudyBlock.astro. 26 types in use — the most common:

  • group 64 in 5 studies
  • brief 25 in 5 studies
  • custom 16 in 5 studies
  • cards 15 in 5 studies
  • callout 15 in 4 studies
  • prose 10 in 5 studies
  • gallery 8 in 4 studies
  • media 8 in 3 studies

04

Patterns

The six recipes that repeat. Reuse them instead of re-inventing the effect.

  • Spotlight

    A cursor-lit wash and border in the card’s accent, pointer devices only. One delegated listener (scripts/spotlight.ts) feeds every card.

    Used by ProjectCard, ProfileCard, ServiceCard, WorkCard, header menu

  • Card lift

    Hovered cards rise 4–6px and pick up the Lift shadow over 0.45s ease-out-expo. The border stays neutral; accent comes from the spotlight.

    Used by Every card

  • Scroll reveal

    Sections fade up 24px once as they enter the viewport. Stagger siblings with --reveal-delay in 80–90ms steps.

    Used by Sections, cards, case-study blocks

  • Theme-safe colour

    Lines, borders and hovers mix --color-text with transparent, so they flip with the theme. Glows use --color-glow and shadows --color-shadow.

    Used by Everywhere

  • Accent layering

    Raw accents are for fills, tints and glows. Text, icons and strokes use the -text variant, darkened in the light theme so bright shades stay readable.

    Used by Case studies (--cs-accent), What I do (--acc)

  • Browser frame

    Screens sit in a window with a three-dot bar, so product shots read as product, not as decoration.

    Used by ProjectCover, case-study media

05

Rules

The same rules are written for coding agents in the files below, so people and agents build the same way.

Do

  • Reach for a primitive in components/ds before writing markup for a button, pill, label, icon button or section header.
  • Take colours from tokens; mix --color-text with transparent for lines and hovers.
  • Keep copy, links and metrics in data/site.ts or data/work/<slug>.ts.
  • Give every control a focus ring: 2px solid var(--color-border-hover).
  • Check dark, light and a 375px-wide screen before calling it done.
  • Register new components in data/ds.ts so they show up here.

Don’t

  • Hardcode hex values or white/black alphas in component CSS (overlays on images excepted).
  • Add a UI framework, Tailwind or a heavy script.
  • Animate layout properties, or loop animations while nothing is happening.
  • Bake copy into images.
  • Edit the generated files at the repo root.

For agents

  • src/danitesler/src/components/ds/AGENTS.md How to use and extend the system
  • .claude/rules/design-system.md Short rules for editing
  • src/danitesler/src/data/ds.ts Registry behind this page

Image preview