acald-creator · acald-creator · Apr 14, 2026 · Apr 14, 2026 · Apr 14, 2026
diff --git a/index.html b/index.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/react.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Rspack + React + TS</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet" />
+  <title>Rspack + ReScript</title>
 </head>
 
 <body>

diff --git a/src/App.res b/src/App.res
@@ -8,53 +8,6 @@ Emotion.Css.injectGlobal(`
   width: 100%;
   min-height: 100vh;
 }
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em ${Theme.Theme.Colors.brand["primary"]}aa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-/* Hero section gradients */
-.hero-gradient {
-  background: linear-gradient(135deg, ${Theme.Theme.Colors.brand["primary"]} 0%, ${Theme.Theme.Colors.brand["secondary"]} 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .hero-gradient {
-    font-size: 2.5rem;
-  }
-
-  .logo {
-    height: 4em;
-    padding: 1em;
-  }
-}
 `)
 
 module App = {
@@ -63,17 +16,19 @@ module App = {
     <AuthContext.Provider>
       <AuthContext.UserProvider>
         <RescriptRelayReact.Context.Provider environment={RelayEnv.environment}>
-          <div>
+          <div className={css({"display": "flex", "flexDirection": "column", "minHeight": "100vh"})}>
             <NavBar.NavBar />
-            <main>
+            <main className={css({"flex": "1"})}>
               <Router />
             </main>
             <footer
               className={css({
-                "padding": "2rem",
+                "padding": "2rem 1rem",
                 "textAlign": "center",
+                "maxWidth": "680px",
+                "margin": "0 auto",
+                "width": "100%",
                 "borderTop": `1px solid ${Theme.Theme.Colors.border["default"]}`,
-                "marginTop": "2rem",
               })}>
               <Typography.Typography.Caption>
                 {React.string("Built with Rspack + ReScript + React + Bun")}

diff --git a/src/components/Avatar/Avatar.res b/src/components/Avatar/Avatar.res
@@ -0,0 +1,61 @@
+open Emotion.Css
+open Emotion.Utils
+
+module Avatar = {
+  type size = [#sm | #md | #lg]
+
+  @react.component
+  let make = (~name: string, ~src: option<string>=?, ~size: size=#md, ~className: string="", ()) => {
+    let dimension = switch size {
+    | #sm => "2rem"
+    | #md => "2.5rem"
+    | #lg => "3.5rem"
+    }
+
+    let fontSize = switch size {
+    | #sm => "0.75rem"
+    | #md => "0.875rem"
+    | #lg => "1.125rem"
+    }
+
+    let baseStyles = css({
+      "width": dimension,
+      "height": dimension,
+      "borderRadius": "50%",
+      "display": "inline-flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "flexShrink": "0",
+      "overflow": "hidden",
+      "backgroundColor": Color.bgElevated,
+      "border": `1px solid ${Color.border}`,
+      "color": Color.textSecondary,
+      "fontSize": fontSize,
+      "fontWeight": "500",
+      "letterSpacing": "0.05em",
+      "textTransform": "uppercase",
+    })
+
+    let imgStyles = css({
+      "width": "100%",
+      "height": "100%",
+      "objectFit": "cover",
+    })
+
+    let initials =
+      name
+      ->String.split(" ")
+      ->Array.filterMap(part => part->String.charAt(0)->Some)
+      ->Array.slice(~start=0, ~end=2)
+      ->Array.join("")
+
+    let avatarClassName = cx([baseStyles, className])
+
+    <div className={avatarClassName}>
+      {switch src {
+      | Some(url) => <img className={imgStyles} src={url} alt={name} />
+      | None => React.string(initials)
+      }}
+    </div>
+  }
+}
diff --git a/src/components/Badge/Badge.res b/src/components/Badge/Badge.res
@@ -0,0 +1,54 @@
+open Emotion.Css
+open Emotion.Utils
+
+module Badge = {
+  type variant = [#default | #primary | #success | #warning | #error]
+
+  @react.component
+  let make = (~variant: variant=#default, ~className: string="", ~children, ()) => {
+    let baseStyles = css({
+      "display": "inline-flex",
+      "alignItems": "center",
+      "fontFamily": Theme.Theme.Typography.fontFamily["sans"],
+      "fontSize": "0.6875rem",
+      "fontWeight": "500",
+      "letterSpacing": "0.05em",
+      "textTransform": "uppercase",
+      "padding": "0.25rem 0.625rem",
+      "borderRadius": "2px",
+      "lineHeight": "1.25",
+    })
+
+    let variantStyles = switch variant {
+    | #default => css({
+        "backgroundColor": Color.bgElevated,
+        "color": Color.textSecondary,
+        "border": `1px solid ${Color.border}`,
+      })
+    | #primary => css({
+        "backgroundColor": `${Color.primary}1a`,
+        "color": Color.primary,
+        "border": `1px solid ${Color.primary}33`,
+      })
+    | #success => css({
+        "backgroundColor": "rgba(34, 197, 94, 0.1)",
+        "color": Color.success,
+        "border": "1px solid rgba(34, 197, 94, 0.2)",
+      })
+    | #warning => css({
+        "backgroundColor": "rgba(245, 158, 11, 0.1)",
+        "color": Color.warning,
+        "border": "1px solid rgba(245, 158, 11, 0.2)",
+      })
+    | #error => css({
+        "backgroundColor": "rgba(239, 68, 68, 0.1)",
+        "color": Color.error,
+        "border": "1px solid rgba(239, 68, 68, 0.2)",
+      })
+    }
+
+    let badgeClassName = cx([baseStyles, variantStyles, className])
+
+    <span className={badgeClassName}> {children} </span>
+  }
+}
diff --git a/src/components/Blockquote/Blockquote.res b/src/components/Blockquote/Blockquote.res
@@ -0,0 +1,41 @@
+open Emotion.Css
+open Emotion.Utils
+
+module Blockquote = {
+  @react.component
+  let make = (~cite: option<string>=?, ~className: string="", ~children, ()) => {
+    let quoteStyles = css({
+      "fontFamily": Theme.Theme.Typography.fontFamily["serif"],
+      "fontSize": "1.375rem",
+      "fontWeight": "400",
+      "fontStyle": "italic",
+      "lineHeight": "1.6",
+      "color": Color.textPrimary,
+      "borderLeft": `3px solid ${Color.primary}`,
+      "paddingLeft": "1.5rem",
+      "margin": "2rem 0",
+    })
+
+    let citeStyles = css({
+      "display": "block",
+      "marginTop": "0.75rem",
+      "fontFamily": Theme.Theme.Typography.fontFamily["sans"],
+      "fontSize": "0.8125rem",
+      "fontStyle": "normal",
+      "fontWeight": "400",
+      "letterSpacing": "0.05em",
+      "color": Color.textSecondary,
+    })
+
+    let quoteClassName = cx([quoteStyles, className])
+
+    <blockquote className={quoteClassName}>
+      {children}
+      {switch cite {
+      | Some(attribution) =>
+        <cite className={citeStyles}> {React.string({`\u2014 `} ++ attribution)} </cite>
+      | None => React.null
+      }}
+    </blockquote>
+  }
+}
diff --git a/src/components/Card/Card.res b/src/components/Card/Card.res
@@ -15,7 +15,7 @@ module Card = {
     "flexDirection": "column",
     "minWidth": "0",
     "wordWrap": "break-word",
-    "borderRadius": Border.getRadius("lg"),
+    "borderRadius": Border.getRadius("sm"),
     "transition": Animate.getDuration("fast") ++ " ease-out"
   })
 

diff --git a/src/components/Divider/Divider.res b/src/components/Divider/Divider.res
@@ -0,0 +1,44 @@
+open Emotion.Css
+open Emotion.Utils
+
+module Divider = {
+  @react.component
+  let make = (~label: option<string>=?, ~className: string="", ()) => {
+    let baseStyles = css({
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "1rem",
+      "margin": "2rem 0",
+    })
+
+    let lineStyles = css({
+      "flex": "1",
+      "height": "1px",
+      "backgroundColor": Color.border,
+    })
+
+    let labelStyles = css({
+      "fontFamily": Theme.Theme.Typography.fontFamily["sans"],
+      "fontSize": "0.6875rem",
+      "fontWeight": "500",
+      "letterSpacing": "0.15em",
+      "textTransform": "uppercase",
+      "color": Color.textSecondary,
+    })
+
+    let dividerClassName = cx([baseStyles, className])
+
+    switch label {
+    | Some(text) =>
+      <div className={dividerClassName}>
+        <div className={lineStyles} />
+        <span className={labelStyles}> {React.string(text)} </span>
+        <div className={lineStyles} />
+      </div>
+    | None =>
+      <div className={dividerClassName}>
+        <div className={lineStyles} />
+      </div>
+    }
+  }
+}
diff --git a/src/components/NavBar/NavBar.res b/src/components/NavBar/NavBar.res
@@ -15,38 +15,39 @@ module NavBar = {
       "display": "flex",
       "alignItems": "center",
       "justifyContent": "space-between",
-      "padding": "1rem 2rem",
-      "borderBottom": `1px solid ${Color.border}`,
+      "padding": "1.5rem 2rem",
       "backgroundColor": Color.bgPrimary,
       "position": "sticky",
       "top": "0",
       "zIndex": "100",
     })
 
     let brandStyles = css({
-      "fontSize": "1.25rem",
-      "fontWeight": "700",
+      "fontFamily": Theme.Theme.Typography.fontFamily["serif"],
+      "fontSize": "1.5rem",
+      "fontWeight": "400",
+      "letterSpacing": "-0.02em",
       "color": Color.textPrimary,
       "cursor": "pointer",
       "textDecoration": "none",
     })
 
     let linksStyles = css({
       "display": "flex",
-      "gap": "1.5rem",
+      "gap": "2rem",
       "alignItems": "center",
     })
 
     let linkStyles = (~active) =>
       css({
-        "color": active ? Color.primary : Color.textSecondary,
+        "color": active ? Color.textPrimary : Color.textSecondary,
         "textDecoration": "none",
         "fontWeight": active ? "600" : "400",
-        "fontSize": "0.9375rem",
+        "fontSize": "0.75rem",
+        "letterSpacing": "0.08em",
+        "textTransform": "uppercase",
         "cursor": "pointer",
         "transition": "color 200ms ease-out",
-        "borderBottom": active ? `2px solid ${Color.primary}` : "2px solid transparent",
-        "paddingBottom": "0.25rem",
       })
 
     let handleNav = (path, evt: ReactEvent.Mouse.t) => {
@@ -56,7 +57,7 @@ module NavBar = {
 
     <nav className={navStyles}>
       <a className={brandStyles} href="/" onClick={evt => handleNav("/", evt)}>
-        {React.string("Rspack + ReScript")}
+        {React.string("The Journal")}
       </a>
       <div className={linksStyles}>
         <a