Skip to main content
GEDEProvisional nameOpen the app shell

Design system · B2-T11a

Styles

Tokens and components of the approved premium/editorial system (stage-2/DESIGN_SYSTEM.md), under the provisional name GEDE. Try the keyboard: Tab shows the focus ring, Esc closes dialogs and menus.

Brand (provisional)

GEDEProvisional name

A neutral placeholder: the first letter of the name in the serif. Name and mark live insrc/brand/so they can change without touching the rest.

Color

  • page

    #F3F1EC

  • surface

    #FBFAF7

  • raised

    #FFFFFF

  • sunken

    #ECE9E2

  • selected

    #D9E4DD

  • ink

    #111A2E

  • ink-2

    #2A3550

  • accent

    #0E6B52

  • accent-hover

    #0B5843

  • mint (on ink only)

    #6FD1A8

  • fg-2

    #5B6375

  • fg-3

    #666C7D

  • line-subtle

    #E2DED5

  • line

    #CFC9BD

  • line-input

    #8C8576

Live80% usedPayment failedDraft

Typography

  • display-xl

    Serif 56/60

    A calm place for your business

  • display-l

    Serif 40/44

    Your website is live

  • h1

    Serif 32/40 (phone 28/36)

    Websites

  • h2

    Sans 22/30 · 600

    Opening hours

  • h3

    Sans 18/26 · 600

    Plan & usage

  • body-l

    Sans 18/28

    Tell us about your business in a few words.

  • body

    Sans 16/24

    Default body text and inputs.

  • body-s

    Sans 14/20

    Secondary text and table cells.

  • label

    Sans 14/20 · 500

    Business name

  • caption

    Sans 12/16 · 500 (minimum size)

    Updated 2 days ago

  • mono

    Mono 14/20

    CNAME www sites.example.net

Spacing, shape and depth

  • 4
  • 8
  • 12
  • 16
  • 20
  • 24
  • 32
  • 40
  • 48
  • 64
  • 80
radius-sm 4
radius-md 8
radius-lg 14
radius-full
shadow-sm
shadow-md

Buttons

Link styled as button
Loading indicatorExternal link ↗ (opens in a new tab)

Form controls

As customers know it.

.example

Enter a full phone number, with area code.

Disabled field.

Visual only: no code is sent or checked in this build.

That code isn't right. Check the email or resend a new code.

Cards, banners and badges

Card

Surface, subtle border, 14 px radius, no shadow.

Next step card

A 3 px accent bar marks the suggested next step.

Success: Your changes are live

Warning: You've used 80% of your AI edits

They reset on the 1st.

Note: Tip

Add photos of your place to make the website feel real.
STARTPROULTRA

Dialogs, menus and sheets

Motion

fast 150 ms · base 250 ms · slow 400 ms; ease-out for entering elements. With “reduce motion” turned on in the operating system, every animation becomes instant.