サイトのキャッチフレーズの位置について

逆にどのようなのが正解なのか具体的なものがないと何とも言えませんが、寝ログと同じにしたいということなら、

#site-description {
    margin-top: 40px;
}

これだけの事かと思います。ただし、これら間隔(スペース)をとる方法は上記だけではありません。目的や最終形態をどのようにするかでどの方法が良いのか(やりやすいか)は変わると思います。

#site-titleの方にスペースを設置するのが良いのか、上記のようにするのが良いか、あるいは.alignleft(.top-title-catchphrase)に高さを入れてかつ、その中にある#site-titleは高さの上辺にあわせ、#site-descriptionは下辺に合わせるというようにするかなども考えられます。

サンプル: ヘッダのタイトルとディスクリプションの間隔をflexで自動調整 | codepen
※cssはscssで書いてあります。css欄の下向き三角よりview compiledを選ぶとcssで表示されます。

このサンプルは、.alignleftの高さを指定すれば、そのtopとbottomにタイトル、ディスクリプションが自動で張り付くというものです。
調整方法は、.alignleftのheightを任意のサイズで指定(#h-topにmin-heightがあるため100px以上にする)、.alignleftのpaddingでサンプルボーダー内の上下スペースを作っています。
もしサンプルで.alignleftのpaddingを0にすると、ボーダーの上下にピッタリつくはずです。

.alignleftの高さを100px以下にする場合は#h-topのmin-heightが邪魔なので、initialなどで無効にしてください。
これは#h-topは最低100pxの高さを確保しているので、その中にある.alignleftの高さが100pxより小さくなった時、.alignleftの下におそらく#h-topとの差分のスペースが空きます。これを埋めるための処置です。

サンプルの高さを150pxとした場合、padding 25pxが上下にとってあるので、

150px – (25px x 2) = 100px

つまり.alignleftの高さは150pxですが#site-titleと#site-description間の高さは100pxとなっているわけです。

このサンプルでは、.alignleftの高さとpaddingを指定すれば自動で.alignleftの上下にくっつくというものです。余程狭い高さを指定しないなら、どんな画面サイズでも任意の高さで自動調整されます。メディアクエリを使ってスマホの時高さを変更するなどした場合も、自動で.alignleftの上下にくっつきます。
一応480px以下の画面サイズになった時にどうなるかも入れておきました。

一応#header-inが100%で設定してあるので、画面幅が変わっても追従すると思います。