Some initial CSS

app/assets/stylesheets/colors.css

@@ -0,0 +1,5 @@
+:root {
+  --inset-bg-color: #eee;
+
+  --border-radius: .5em;
+}

app/assets/stylesheets/forms.css

@@ -0,0 +1,22 @@
+form {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 2fr;
+
+  input, label {
+    padding: .5em;
+  }
+
+  label {
+    grid-column: 1;
+    text-align: right;
+  }
+
+  input {
+    grid-column: 2;
+  }
+
+  input[type="submit"] {
+    grid-column: 1/3;
+  }
+}

app/assets/stylesheets/layout.css

@@ -0,0 +1,27 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-size: 1.1em;
+  margin: 0 auto;
+  max-width: 80em;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+section.inset {
+  width: 70%;
+  max-width: 60em;
+  background-color: var(--inset-bg-color);
+  border-radius: var(--border-radius);
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h1, h2 {
+  text-align: center;
+}

app/views/layouts/application.html.erb

@@ -17,6 +17,8 @@
       <h1><%= link_to t("forg"), root_path %></h1>
     </header>
     <%= render partial: "shared/flash_messages" %>
+    <main>
       <%= yield %>
+    </main>
   </body>
 </html>

app/views/users/_form.html.erb

@@ -1,6 +1,7 @@
 <%# locals: (user:, button_text:) -%>
 
-<%= form_with model: user do |f| %>
+<section class="inset">
+  <%= form_with model: user do |f| %>
     <%= f.label :username %>
     <%= f.text_field :username %>
 
@@ -20,4 +21,5 @@
     <%= f.password_field :password_confirmation %>
 
     <%= f.submit button_text %>
-<% end %>
+  <% end %>
+</section>

app/views/users/new.html.erb

@@ -1,6 +1,6 @@
 <% content_for :title, "Sign up" %>
 
-<h1><%= t(".sign_up") %></h1>
+<h2><%= t(".sign_up") %></h2>
 
 <%= render partial: "users/form",
            locals: { user: @user, button_text: t(".sign_up") } %>